diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index d90456969..291655c73 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -33,7 +33,7 @@ export default { const pfx = smConfig.stylePrefix; // Create header this.$header = $( - `
${smConfig.textNoElement}
` + `
${em.t('styleManager.empty')}
` ); this.$cn.append(this.$header); diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js index 2d527d211..8ea5ec07a 100644 --- a/src/i18n/locale/en.js +++ b/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', + } } }; diff --git a/src/i18n/locale/tr.js b/src/i18n/locale/tr.js index e9ed2a11b..d2075d07a 100644 --- a/src/i18n/locale/tr.js +++ b/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: { diff --git a/src/style_manager/config/config.js b/src/style_manager/config/config.js index 90977d42d..779449e99 100644 --- a/src/style_manager/config/config.js +++ b/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, diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 1f342ee82..6efda2edc 100644 --- a/src/style_manager/view/LayerView.js +++ b/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 `
@@ -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; diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index a5b3bc6dd..d38ba3fc9 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/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 `
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 6ed8e7c1f..47c999061 100644 --- a/src/style_manager/view/PropertyView.js +++ b/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 ` - ${model.get('name')} + ${label} ${!parent ? `⨯` : ''} `; diff --git a/src/style_manager/view/SectorView.js b/src/style_manager/view/SectorView.js index 34ed34854..745900c57 100644 --- a/src/style_manager/view/SectorView.js +++ 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; },