Merge pull request #1663 from artf/fix-1613

Fix 1613

src/style_manager/model/Layer.js

@@ -18,6 +18,10 @@ module.exports = Backbone.Model.extend({
       'properties',
       properties instanceof Properties ? properties : new Properties(properties)
     );
+    this.get('properties').forEach(item => {
+      const { collection } = this;
+      item.parent = collection && collection.property;
+    });
 
     // If there is no value I'll try to get it from values
     // I need value setted to make preview working

src/style_manager/model/PropertyFactory.js

@@ -185,10 +185,6 @@ module.exports = () => ({
         case 'text-shadow-v':
         case 'text-shadow-blur':
         case 'border-radius-c':
-        case 'border-top-left-radius':
-        case 'border-top-right-radius':
-        case 'border-bottom-left-radius':
-        case 'border-bottom-right-radius':
         case 'box-shadow-h':
         case 'box-shadow-v':
         case 'box-shadow-spread':
@@ -198,6 +194,12 @@ module.exports = () => ({
         case 'transform-rotate-z':
           obj.defaults = 0;
           break;
+        case 'border-top-left-radius':
+        case 'border-top-right-radius':
+        case 'border-bottom-left-radius':
+        case 'border-bottom-right-radius':
+          obj.defaults = '0px';
+          break;
         case 'transform-scale-x':
         case 'transform-scale-y':
         case 'transform-scale-z':

src/style_manager/view/PropertyView.js

@@ -21,11 +21,13 @@ module.exports = Backbone.View.extend({
     const pfx = this.pfx;
     const icon = model.get('icon');
     const info = model.get('info');
+    const parent = model.parent;
+
     return `
       <span class="${pfx}icon ${icon}" title="${info}">
         ${model.get('name')}
       </span>
-      <b class="${pfx}clear" ${clearProp}>&Cross;</b>
+      ${!parent ? `<b class="${pfx}clear" ${clearProp}>&Cross;</b>` : ''}
     `;
   },
 
@@ -89,20 +91,23 @@ module.exports = Backbone.View.extend({
    * @private
    */
   updateStatus() {
-    const status = this.model.get('status');
+    const { model } = this;
+    const status = model.get('status');
+    const parent = model.parent;
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     const config = this.config;
     const updatedCls = `${ppfx}four-color`;
     const computedCls = `${ppfx}color-warn`;
     const labelEl = this.$el.children(`.${pfx}label`);
-    const clearStyle = this.getClearEl().style;
+    const clearStyleEl = this.getClearEl();
+    const clearStyle = clearStyleEl ? clearStyleEl.style : {};
     labelEl.removeClass(`${updatedCls} ${computedCls}`);
     clearStyle.display = 'none';
 
     switch (status) {
       case 'updated':
-        labelEl.addClass(updatedCls);
+        !parent && labelEl.addClass(updatedCls);
 
         if (config.clearProperties) {
           clearStyle.display = 'inline';
@@ -120,7 +125,8 @@ module.exports = Backbone.View.extend({
   clear(e) {
     e && e.stopPropagation();
     this.model.clearValue();
-    this.targetUpdated();
+    // Skip one stack with setTimeout to avoid inconsistencies
+    setTimeout(() => this.targetUpdated());
   },
 
   /**
@@ -179,7 +185,7 @@ module.exports = Backbone.View.extend({
   setStatus(value) {
     this.model.set('status', value);
     const parent = this.model.parent;
-    parent && parent.set('status', value);
+    parent && value && parent.set('status', value);
   },
 
   emitUpdateTarget: debounce(function() {

test/specs/style_manager/model/Models.js

@@ -703,7 +703,7 @@ module.exports = {
               property: 'border-top-left-radius',
               type: 'integer',
               units: ['px', '%'],
-              defaults: 0,
+              defaults: '0px',
               min: 0
             },
             {
@@ -711,21 +711,21 @@ module.exports = {
               type: 'integer',
               units: ['px', '%'],
               min: 0,
-              defaults: 0
+              defaults: '0px'
             },
             {
               property: 'border-bottom-left-radius',
               type: 'integer',
               units: ['px', '%'],
               min: 0,
-              defaults: 0
+              defaults: '0px'
             },
             {
               property: 'border-bottom-right-radius',
               type: 'integer',
               units: ['px', '%'],
               min: 0,
-              defaults: 0
+              defaults: '0px'
             }
           ]
         };