Localize StyleManager

src/commands/view/OpenStyleManager.js

@@ -33,7 +33,7 @@ export default {
       const pfx = smConfig.stylePrefix;
       // Create header
       this.$header = $(
-        `<div class="${pfx}header">${smConfig.textNoElement}</div>`
+        `<div class="${pfx}header">${em.t('styleManager.empty')}</div>`
       );
       this.$cn.append(this.$header);
 

src/i18n/locale/en.js

@@ -47,5 +47,23 @@ export default {
       active: 'Click',
       'nth-of-type(2n)': 'Even/Odd'
     }
+  },
+  styleManager: {
+    empty: 'Select an element before using Style Manager',
+    layer: 'Layer',
+    fileButton: 'Images',
+    sectors: {
+      general: 'General',
+      layout: 'Layout',
+      typography: 'Typography',
+      decorations: 'Decorations',
+      extra: 'Extra',
+      flex: 'Flex',
+      dimension: 'Dimension'
+    },
+    // The core library generates the name by their `property` name
+    properties: {
+      // float: 'Float',
+    }
   }
 };

src/i18n/locale/tr.js

@@ -29,11 +29,12 @@ export default {
   },
   selectorManager: {
     selected: 'Seçili',
-    emptyState: '- DURUM -'
+    emptyState: '- DURUM -',
+    label: 'Sınıflar'
   },
   styleManager: {
-    noEl: 'Stilini düzenlemek istediğiniz öğeyi seçiniz',
-    label: 'Sınıflar',
+    empty: 'Stilini düzenlemek istediğiniz öğeyi seçiniz',
+    layer: 'Katman',
     sectors: {
       general: 'Genel',
       layout: 'Düzen',
@@ -125,8 +126,7 @@ export default {
       'flex-grow': 'Flex Büyüme',
       'flex-shrink': 'Flex Küçülme',
       'align-self': 'Kendini Hizala',
-      'background-color': 'Arkaplan Rengi',
-      assets: 'Görsel'
+      'background-color': 'Arkaplan Rengi'
     }
   },
   traitManager: {

src/style_manager/config/config.js

@@ -7,12 +7,6 @@ export default {
   // With the empty value, nothing will be rendered
   appendTo: '',
 
-  // Text to show in case no element selected
-  textNoElement: 'Select an element before using Style Manager',
-
-  // Text for layers
-  textLayer: 'Layer',
-
   // Hide the property in case it's not stylable for the
   // selected component (each component has 'stylable' property)
   hideNotStylable: true,

src/style_manager/view/LayerView.js

@@ -10,8 +10,8 @@ export default Backbone.View.extend({
   },
 
   template(model) {
-    const { pfx, ppfx, config } = this;
-    const label = `${config.textLayer} ${model.get('index')}`;
+    const { pfx, ppfx, em } = this;
+    const label = `${em.t('styleManager.layer')} ${model.get('index')}`;
 
     return `
       <div id="${pfx}move" class="${ppfx}no-touch-actions" data-move-layer>
@@ -33,6 +33,7 @@ export default Backbone.View.extend({
     let model = this.model;
     this.stackModel = o.stackModel || {};
     this.config = o.config || {};
+    this.em = this.config.em;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
     this.sorter = o.sorter || null;

src/style_manager/view/PropertyFileView.js

@@ -6,15 +6,14 @@ const $ = Backbone.$;
 
 export default PropertyView.extend({
   templateInput() {
-    const pfx = this.pfx;
-    const ppfx = this.ppfx;
-    const assetsLabel = this.config.assetsLabel || 'Images';
+    const { pfx, em } = this;
+
     return `
     <div class="${pfx}field ${pfx}file">
       <div id='${pfx}input-holder'>
         <div class="${pfx}btn-c">
           <button class="${pfx}btn" id="${pfx}images" type="button">
-            ${assetsLabel}
+            ${em.t('styleManager.fileButton')}
           </button>
         </div>
         <div style="clear:both;"></div>

src/style_manager/view/PropertyView.js

@@ -19,14 +19,14 @@ export default Backbone.View.extend({
   },
 
   templateLabel(model) {
-    const { pfx } = this;
-    const icon = model.get('icon') || '';
-    const info = model.get('info') || '';
-    const parent = model.parent;
+    const { pfx, em } = this;
+    const { parent } = model;
+    const { icon = '', info = '', id, name } = model.attributes;
+    const label = em.t(`styleManager.properties.${id}`) || name;
 
     return `
       <span class="${pfx}icon ${icon}" title="${info}">
-        ${model.get('name')}
+        ${label}
       </span>
       ${!parent ? `<b class="${pfx}clear" ${clearProp}>&Cross;</b>` : ''}
     `;

src/style_manager/view/SectorView.js

@@ -15,6 +15,7 @@ export default Backbone.View.extend({
 
   initialize(o) {
     this.config = o.config || {};
+    this.em = this.config.em;
     this.pfx = this.config.stylePrefix || '';
     this.target = o.target || {};
     this.propTarget = o.propTarget || {};
@@ -78,17 +79,13 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const { pfx, model } = this;
-    const { id } = model.attributes;
-    this.$el.html(
-      this.template({
-        pfx,
-        label: model.get('name')
-      })
-    );
-    this.$caret = this.$el.find(`#${pfx}caret`);
+    const { pfx, model, em, $el } = this;
+    const { id, name } = model.attributes;
+    const label = em.t(`styleManager.sectors.${id}`) || name;
+    $el.html(this.template({ pfx, label }));
+    this.$caret = $el.find(`#${pfx}caret`);
     this.renderProperties();
-    this.$el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`);
+    $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`);
     this.updateOpen();
     return this;
   },