diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 2c8a7f0889..2d2f13cdd9 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -39,6 +39,9 @@ module.exports = Backbone.Model.extend(Styleable).extend({ // All other properties will be hidden from the style manager stylable: true, + // Indicate an array of style properties to show up which has been marked as `toRequire` + 'stylable-require': '', + // Indicate an array of style properties which should be hidden from the style manager unstylable: '', diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index cfb179172b..c6f4d48f3d 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -12,6 +12,13 @@ module.exports = require('backbone').Model.extend({ status: '', visible: true, fixedValues: ['initial', 'inherit'], + + // If true, will be hidden by default and will show up only for targets + // which require this property (via `stylable-require`) + // Use case: + // you can add all SVG CSS properties with toRequire as true + // and then require them on SVG Components + toRequire: 0, }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 5245c643a4..8d8809a742 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -375,9 +375,15 @@ module.exports = Backbone.View.extend({ * @return {Boolean} */ isTargetStylable(target) { + if (this.model.get('id') == 'flex-width') { + //debugger; + } const trg = target || this.getTarget(); - const property = this.model.get('property'); + const model = this.model; + const property = model.get('property'); + const toRequire = model.get('toRequire'); const unstylable = trg.get('unstylable'); + const stylableReq = trg.get('stylable-require'); let stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property @@ -391,6 +397,11 @@ module.exports = Backbone.View.extend({ stylable = unstylable.indexOf(property) < 0; } + // Check if the property is available only if requested + if (toRequire) { + stylable = (stylableReq && stylableReq.indexOf(property) >= 0) || !target; + } + return stylable; },