feat: add support for outline (#3237)

* feat: add support for outline * feat: add chinese translations
decentraland · Jan 9, 2025 · 81bd6e2 · 81bd6e2
1 parent c6bd5a7
commit 81bd6e2
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@dcl/crypto": "^3.4.5",
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
-    "@dcl/schemas": "^15.1.2",
+    "@dcl/schemas": "^15.4.0",
     "@dcl/sdk": "7.5.5",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",

diff --git a/src/components/ItemEditorPage/RightPanel/RightPanel.tsx b/src/components/ItemEditorPage/RightPanel/RightPanel.tsx
@@ -169,6 +169,14 @@ export default class RightPanel extends React.PureComponent<Props, State> {
     this.setState({ data, isDirty: this.isDirty({ data }) })
   }
 
+  handleAllowOutlineCompatible = (_event: React.FormEvent, { checked }: CheckboxProps) => {
+    const data = {
+      ...this.state.data,
+      outlineCompatible: checked
+    } as WearableData
+    this.setState({ data, isDirty: this.isDirty({ data }) })
+  }
+
   handleChangeCategory = (category: HideableWearableCategory | EmoteCategory) => {
     let data
     if (isEmoteData(this.state.data!)) {
@@ -262,7 +270,8 @@ export default class RightPanel extends React.PureComponent<Props, State> {
             itemData.category === WearableCategory.UPPER_BODY || itemData.hides?.includes(WearableCategory.UPPER_BODY)
               ? [BodyPartCategory.HANDS]
               : [],
-          ...('blockVrmExport' in itemData ? { blockVrmExport: itemData.blockVrmExport } : {})
+          ...('blockVrmExport' in itemData ? { blockVrmExport: itemData.blockVrmExport } : {}),
+          ...('outlineCompatible' in itemData ? { outlineCompatible: itemData.outlineCompatible } : {})
         }
       }
       const itemContents = {
@@ -689,6 +698,33 @@ export default class RightPanel extends React.PureComponent<Props, State> {
                         </div>
                       </Collapsable>
                     )}
+                    {item?.type === ItemType.WEARABLE && (
+                      <Collapsable
+                        label={
+                          <>
+                            <span className="overrides-label-panel">{t('item_editor.right_panel.outline_compatible.title')}</span>
+                            <Info content={t('item_editor.right_panel.outline_compatible.info')} className="info" />
+                          </>
+                        }
+                      >
+                        <div className="right-panel-copyright-section">
+                          <div className="right-panel-export-protection">
+                            <span>{t('item_editor.right_panel.outline_compatible.title')}</span>
+                            <Checkbox
+                              toggle
+                              label={
+                                (data as WearableData)?.outlineCompatible
+                                  ? t('item_editor.right_panel.copyright.enabled')
+                                  : t('item_editor.right_panel.copyright.disabled')
+                              }
+                              checked={(data as WearableData)?.outlineCompatible}
+                              onChange={this.handleAllowOutlineCompatible}
+                              aria-label={t('item_editor.right_panel.outline_compatible.title')}
+                            />
+                          </div>
+                        </div>
+                      </Collapsable>
+                    )}
                     {isDirty ? (
                       <div className="edit-buttons">
                         <Button secondary onClick={this.handleOnResetItem}>

diff --git a/src/modules/item/types.ts b/src/modules/item/types.ts
@@ -80,6 +80,7 @@ export type WearableData = {
   requiredPermissions?: string[]
   isSmart?: boolean
   blockVrmExport?: boolean
+  outlineCompatible?: boolean
 }
 
 type BaseItem = {

diff --git a/src/modules/item/utils.ts b/src/modules/item/utils.ts
@@ -551,7 +551,8 @@ export function isWearableSynced(item: Item, entity: Entity) {
     item.data.replaces.toString() !== catalystItem.data.replaces.toString() ||
     item.data.tags.toString() !== catalystItem.data.tags.toString() ||
     item.data.removesDefaultHiding?.toString() !== catalystItem.data.removesDefaultHiding?.toString() ||
-    item.data.blockVrmExport !== catalystItem.data.blockVrmExport
+    item.data.blockVrmExport !== catalystItem.data.blockVrmExport ||
+    item.data.outlineCompatible !== catalystItem.data.outlineCompatible
 
   if (hasMetadataChanged) {
     return false

diff --git a/src/modules/translation/languages/en.json b/src/modules/translation/languages/en.json
@@ -2116,6 +2116,10 @@
       "description_placeholder": "What makes your Item special?",
       "utility_placeholder": "Describe your Item functionality",
       "utility_tooltip": "Describe the in-world utility of the Wearable. E.g: Increase damage by 5%",
+      "outline_compatible": {
+        "title": "Is outline compatible",
+        "info": "Most wearables automatically support outlines. If you've created custom outline modeling, you can optionally disable the default outline behavior."
+      },
       "copyright": {
         "title": "VRM Export Permission",
         "vrm_export": "Allow VRM Export",

diff --git a/src/modules/translation/languages/es.json b/src/modules/translation/languages/es.json
@@ -2134,6 +2134,10 @@
       "description_placeholder": "¿Qué hace a tu Item especial?",
       "utility_placeholder": "Describe la funcionalida de tu Item",
       "utility_tooltip": "Describe la funcionalidad dentro del mundo del Wearable. Ej: Incrementa el daño en 5%",
+      "outline_compatible": {
+        "title": "Es compatible con linea exterior",
+        "info": "La mayoría de los wearables soportan la linea exterior. Si has creado un wearable personalizado, puedes deshabilitar la linea exterior por defecto."
+      },
       "copyright": {
         "title": "Permiso de exportación de VRM",
         "vrm_export": "Permitir la exportación de VRM",

diff --git a/src/modules/translation/languages/zh.json b/src/modules/translation/languages/zh.json
@@ -2115,6 +2115,10 @@
       "description_placeholder": "是什么让您的物品与众不同？",
       "utility_placeholder": "描述您的物品功能",
       "utility_tooltip": "描述可穿戴设备在现实世界中的用途。 例如：伤害增加5%",
+      "outline_compatible": {
+        "title": "兼容线条外框",
+        "info": "大多数可穿戴设备支持线条外框。如果您创建了自定义线条外框，您可以选择禁用默认线条外框行为。"
+      },
       "copyright": {
         "title": "VRM出口许可",
         "vrm_export": "允许VRM导出",