diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js index 0edae1bd1..2d6659016 100644 --- a/src/i18n/locale/en.js +++ b/src/i18n/locale/en.js @@ -82,9 +82,9 @@ export default { flex: 'Flex', dimension: 'Dimension', }, - // The core library generates the name by their `property` name + // Default names for sub properties in Composite and Stack types. + // Other labels are generated directly from their property names (eg. 'font-size' will be 'Font size'). properties: { - // Default names for sub properties in Composite and Stack types 'text-shadow-h': 'X', 'text-shadow-v': 'Y', 'text-shadow-blur': 'Blur', @@ -116,6 +116,14 @@ export default { 'transform-scale-x': 'Scale X', 'transform-scale-y': 'Scale Y', 'transform-scale-z': 'Scale Z', + 'transition-property-sub': 'Property', + 'transition-duration-sub': 'Duration', + 'transition-timing-function-sub': 'Timing', + 'background-image-sub': 'Image', + 'background-repeat-sub': 'Repeat', + 'background-position-sub': 'Position', + 'background-attachment-sub': 'Attachment', + 'background-size-sub': 'Size', }, // Translate options in style properties // options: { diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 794c7a05e..fa9916108 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -294,7 +294,11 @@ export default class PropertyFactory { 'transition', { type: this.typeStack, - properties: this.__sub(['transition-property', 'transition-duration', 'transition-timing-function']), + properties: this.__sub([ + { extend: 'transition-property', id: 'transition-property-sub' }, + { extend: 'transition-duration', id: 'transition-duration-sub' }, + { extend: 'transition-timing-function', id: 'transition-timing-function-sub' }, + ]), }, ], [ @@ -325,11 +329,11 @@ export default class PropertyFactory { { detached: true, properties: this.__sub([ - 'background-image', - 'background-repeat', - 'background-position', - 'background-attachment', - 'background-size', + { extend: 'background-image', id: 'background-image-sub' }, + { extend: 'background-repeat', id: 'background-repeat-sub' }, + { extend: 'background-position', id: 'background-position-sub' }, + { extend: 'background-attachment', id: 'background-attachment-sub' }, + { extend: 'background-size', id: 'background-size-sub' }, ]), }, 'box-shadow', diff --git a/test/specs/style_manager/model/PropertyFactory.js b/test/specs/style_manager/model/PropertyFactory.js index b71d22561..773d9db77 100644 --- a/test/specs/style_manager/model/PropertyFactory.js +++ b/test/specs/style_manager/model/PropertyFactory.js @@ -614,17 +614,20 @@ describe('PropertyFactory', () => { properties: [ { property: 'background-image', + id: 'background-image-sub', type: 'file', functionName: 'url', }, { property: 'background-repeat', + id: 'background-repeat-sub', type: 'select', default: 'repeat', options: [{ id: 'repeat' }, { id: 'repeat-x' }, { id: 'repeat-y' }, { id: 'no-repeat' }], }, { property: 'background-position', + id: 'background-position-sub', type: 'select', default: 'left top', options: [ @@ -641,12 +644,14 @@ describe('PropertyFactory', () => { }, { property: 'background-attachment', + id: 'background-attachment-sub', type: 'select', default: 'scroll', options: [{ id: 'scroll' }, { id: 'fixed' }, { id: 'local' }], }, { property: 'background-size', + id: 'background-size-sub', type: 'select', default: 'auto', options: [{ id: 'auto' }, { id: 'cover' }, { id: 'contain' }], @@ -663,6 +668,7 @@ describe('PropertyFactory', () => { properties: [ { property: 'transition-property', + id: 'transition-property-sub', type: 'select', default: 'width', options: [ @@ -677,6 +683,7 @@ describe('PropertyFactory', () => { }, { property: 'transition-duration', + id: 'transition-duration-sub', type: 'integer', units: obj.unitsTime, default: '2', @@ -684,6 +691,7 @@ describe('PropertyFactory', () => { }, { property: 'transition-timing-function', + id: 'transition-timing-function-sub', type: 'select', default: 'ease', options: [{ id: 'linear' }, { id: 'ease' }, { id: 'ease-in' }, { id: 'ease-out' }, { id: 'ease-in-out' }],