Update Css Composer

src/class_manager/config/config.js

@@ -11,7 +11,7 @@ define(function () {
     label: 'Classes',
 
     // Label for states
-    statesLabel: 'State',
+    statesLabel: '',
 
 	};
 });

src/class_manager/view/ClassTagView.js

@@ -13,6 +13,7 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.config = o.config || {};
       this.coll = o.coll || null;
       this.pfx = this.config.stylePrefix || '';
+      this.target = this.config.target;
       this.className = this.pfx + 'tag';
       this.closeId = this.pfx + 'close';
       this.chkId = this.pfx + 'checkbox';
@@ -28,6 +29,7 @@ define(['backbone', 'text!./../template/classTag.html'],
 
     changeStatus: function(){
       this.model.set('active', !this.model.get('active'));
+      this.target.trigger('targetClassUpdated');
     },
 
     /**
@@ -35,13 +37,15 @@ define(['backbone', 'text!./../template/classTag.html'],
      * @param {Object} e
      */
     removeTag: function(e){
-      var comp = this.config.target.get('selectedComponent');
+      var comp = this.target.get('selectedComponent');
 
       if(comp)
         comp.get('classes').remove(this.model);
 
-      if(this.coll)
+      if(this.coll){
         this.coll.remove(this.model);
+        this.target.trigger('targetClassRemoved');
+      }
 
       this.remove();
     },
@@ -53,10 +57,13 @@ define(['backbone', 'text!./../template/classTag.html'],
       if(!this.$chk)
         this.$chk = this.$el.find('#' + this.pfx + 'checkbox');
 
-      if(this.model.get('active'))
+      if(this.model.get('active')){
         this.$chk.removeClass('fa-circle-o').addClass('fa-dot-circle-o');
-      else
+        this.$el.removeClass('opac50');
+      }else{
         this.$chk.removeClass('fa-dot-circle-o').addClass('fa-circle-o');
+        this.$el.addClass('opac50');
+      }
     },
 
     /** @inheritdoc */

src/style_manager/view/SectorsView.js

@@ -13,7 +13,7 @@ define(['backbone','./SectorView'],
 			// The taget that will emit events for properties
 			this.propTarget	 = {};
 			_.extend(this.propTarget, Backbone.Events);
-			this.listenTo( this.target, 'change:selectedComponent targetClassAdded', this.targetUpdated);
+			this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated', this.targetUpdated);
 
 		},
 

test/specs/class_manager/view/ClassTagView.js

@@ -12,16 +12,19 @@ define([path + 'ClassTagView', 'ClassManager/model/ClassTags'],
             });
 
             beforeEach(function () {
-              var coll  = new ClassTags();
+              this.coll  = new ClassTags();
               this.testLabel = 'TestLabel';
-              var model = coll.add({
+              var model = this.coll.add({
                 name: 'test',
                 label: this.testLabel,
               });
               this.view = new ClassTagView({
                 config : {},
-                model: model
+                model: model,
+                coll: this.coll
               });
+              this.view.target = { get:function(){} };
+              _.extend(this.view.target, Backbone.Events);
               this.$fixture.empty().appendTo(this.$fixtures);
               this.$fixture.html(this.view.render().el);
             });
@@ -73,6 +76,14 @@ define([path + 'ClassTagView', 'ClassManager/model/ClassTags'],
               this.$fixture.html().should.be.empty;
             });
 
+            it('On remove triggers event', function() {
+              var spy = sinon.spy();
+              sinon.stub(this.view.target, 'get').returns(0);
+              this.view.target.on("targetClassRemoved", spy);
+              this.view.$el.find('#close').trigger('click');
+              spy.called.should.equal(true);
+            });
+
             it('Checkbox toggles status', function() {
               var spy     = sinon.spy();
               this.view.model.on("change:active", spy);
@@ -82,6 +93,14 @@ define([path + 'ClassTagView', 'ClassManager/model/ClassTags'],
               spy.called.should.equal(true);
             });
 
+            it('On toggle triggers event', function() {
+              var spy = sinon.spy();
+              sinon.stub(this.view.target, 'get').returns(0);
+              this.view.target.on("targetClassUpdated", spy);
+              this.view.$el.find('#checkbox').trigger('click');
+              spy.called.should.equal(true);
+            });
+
             it('Label toggles status', function() {
               var spy     = sinon.spy();
               this.view.model.on("change:active", spy);