Add detach feature on Composite properties

src/demo.js

@@ -476,6 +476,7 @@ require(['config/require-config'], function() {
 							name		: 'Padding',
 							property	: 'padding',
 							type		: 'composite',
+							detached : true,
 							properties:[{
 											name		: 'Top',
 											property	: 'padding-top',

src/style_manager/view/LayersView.js

@@ -105,6 +105,10 @@ define(['backbone','./LayerView'],
 
 			this.$el.append(fragment);
 			this.$el.attr('class', this.className);
+
+			if(this.sorter)
+				this.sorter.plh = null;
+
 			return this;
 		}
 	});

src/style_manager/view/PropertyCompositeView.js

@@ -14,11 +14,20 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html
 			this.className = this.className + ' '+ this.pfx +'composite';
 		},
 
+		/**
+		 * Fired when the input value is updated
+		 */
+		valueUpdated: function(){
+			if(!this.model.get('detached'))
+				PropertyView.prototype.valueUpdated.apply(this, arguments);
+		},
+
 		/**
 		 * Renders input
 		 * */
 		renderInput: function() {
 			var props	= this.model.get('properties');
+			var detached = this.model.get('detached');
 			if(props && props.length){
 				if(!this.$input)
 					this.$input = $('<input>', {value: 0, type: 'hidden' });
@@ -30,11 +39,6 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html
 				}
 
 				if(!this.$props){
-					//Avoid style for children
-					this.props.each(function(prop, index){
-						prop.set('doNotStyle', true);
-					});
-
 					//Not yet supported nested composite
 					this.props.each(function(prop, index){
 						if(prop && prop.get('type') == 'composite'){
@@ -43,24 +47,29 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html
 						}
 					}, this);
 
-					var PropertiesView 	= require('./PropertiesView');
-					var that 			= this;
-					var propsView = new PropertiesView({
-						config			: this.config,
-						collection	: this.props,
-						target			: this.target,
-						propTarget	: this.propTarget,
-						// On any change made to children I need to update composite value
-						onChange		: function(el, model){
-							var result = that.build(el, model);
-							that.model.set('value', result);
-						},
+					var PropertiesView = require('./PropertiesView');
+					var that = this;
+
+					var propsViewOpts = {
+						config: this.config,
+						collection: this.props,
+						target: this.target,
+						propTarget: this.propTarget,
 						// Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
 						// I need to extract from that string the corresponding one to that property.
-						customValue		: function(property, mIndex){
+						customValue: function(property, mIndex){
 							return that.valueOnIndex(mIndex, property.model);
 						},
-					});
+					};
+
+					// On any change made to children I need to update composite value
+					if(!detached)
+						propsViewOpts.onChange = function(el, model){
+							var result = that.build(el, model);
+							that.model.set('value', result);
+						};
+
+					var propsView = new PropertiesView(propsViewOpts);
 					this.$props = propsView.render().$el;
 					this.$el.find('#'+ this.pfx +'input-holder').html(this.$props);
 				}

src/style_manager/view/PropertyView.js

@@ -160,22 +160,24 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 			if(func)
 				value =  func + '(' + value + ')';
 
-			if( !this.model.get('doNotStyle') ){
-				var componentCss = _.clone( this.getTarget().get('style') );
+			var target = this.getTarget();
+			var onChange = this.onChange;
+
+			if(onChange && typeof onChange === "function"){
+				onChange(target, this.model);
+			}else{
+				var componentCss = _.clone( target.get('style') );
 
 				if(value)
 					componentCss[this.property] = value;
 				else
 					delete componentCss[this.property];
 
-				this.getTarget().set('style', componentCss, { avoidStore : avSt});
+				target.set('style', componentCss, { avoidStore : avSt});
+
 				if(this.helperComponent)
 					this.helperComponent.set('style', componentCss, { avoidStore : avSt});
 			}
-
-			if(this.onChange && typeof this.onChange === "function"){
-				this.onChange(this.getTarget(), this.model);
-			}
 		},
 
 		/**

styles/css/main.css

@@ -3165,6 +3165,9 @@ ol.example li.placeholder:before {
         top: 0;
         opacity: 0.2;
         filter: alpha(opacity=20); }
+        .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer:hover, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-close-layer:hover {
+          opacity: 0.5;
+          filter: alpha(opacity=50); }
       .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
         background-color: white;
         height: 100%;

styles/scss/main.scss

@@ -681,6 +681,10 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 				right: 5px;
 				top: 0;
 				@include opacity(0.2);
+
+				&:hover{
+					@include opacity(0.5);
+				}
 			}
 		  	> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
 			  background-color: white;

test/specs/style_manager/view/PropertyCompositeView.js

@@ -152,6 +152,26 @@ define([path + 'PropertyCompositeView', 'StyleManager/model/Property', 'DomCompo
                 compStyle.should.deep.equal(assertStyle);
               });
 
+              it('Update target on detached value change', function() {
+                model = new Property({
+                  type: 'composite',
+                  property: propName,
+                  properties: properties,
+                  detached: true,
+                });
+                view = new PropertyCompositeView({
+                  model: model,
+                  propTarget: target
+                });
+                $fixture.html(view.render().el);
+                $prop1 = view.$props.find('#' + properties[0].property + ' input');
+                $prop1.val(propValue).trigger('change');
+                var compStyle = view.getTarget().get('style');
+                var assertStyle = {};
+                assertStyle[properties[0].property] = $prop1.val();
+                compStyle.should.deep.equal(assertStyle);
+              });
+
               it('Update value and input on target swap', function() {
                 var style = {};
                 style[propName] = finalResult;