diff --git a/src/class_manager/template/classTags.html b/src/class_manager/template/classTags.html
index c30c69e69..8ddbe35a6 100644
--- a/src/class_manager/template/classTags.html
+++ b/src/class_manager/template/classTags.html
@@ -20,3 +20,8 @@
+
diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js
index e73bef658..5663151fc 100644
--- a/src/class_manager/view/ClassTagsView.js
+++ b/src/class_manager/view/ClassTagsView.js
@@ -25,11 +25,12 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.target = this.config.target;
- this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
+ this.listenTo(this.target ,'change:selectedComponent',this.componentChanged);
+ this.listenTo(this.target, 'targetClassUpdated', this.updateSelector);
- this.listenTo( this.collection, 'add', this.addNew);
- this.listenTo( this.collection, 'reset', this.renderClasses);
- this.listenTo( this.collection, 'remove', this.tagRemoved);
+ this.listenTo(this.collection, 'add', this.addNew);
+ this.listenTo(this.collection, 'reset', this.renderClasses);
+ this.listenTo(this.collection, 'remove', this.tagRemoved);
this.delegateEvents();
},
@@ -115,6 +116,27 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.$statesC.css('display','block');
else
this.$statesC.css('display','none');
+ this.updateSelector();
+ },
+
+ /**
+ * Udpate selector helper
+ * @return {this}
+ * @private
+ */
+ updateSelector: function(){
+ this.compTarget = this.target.get('selectedComponent');
+ if(!this.compTarget || !this.compTarget.get)
+ return;
+ var result = '';
+ var models = this.compTarget.get('classes');
+ models.each(function(model){
+ if(model.get('active'))
+ result += '.' + model.get('name');
+ });
+ var state = this.compTarget.get('state');
+ result = state ? result + ':' + state : result;
+ this.el.querySelector('#' + this.pfx + 'sel').innerHTML = result;
},
/**
@@ -126,6 +148,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.compTarget.set('state', this.$states.val());
if(this.target)
this.target.trigger('targetStateUpdated');
+ this.updateSelector();
}
},
diff --git a/styles/css/main.css b/styles/css/main.css
index da8dde3ce..389374834 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -3272,9 +3272,12 @@ ol.example li.placeholder:before {
.wte-clm-tags {
font-size: 11px;
padding: 10px 5px; }
- .wte-clm-tags #wte-clm-label {
+ .wte-clm-tags #wte-clm-label, .wte-clm-tags #wte-clm-sel {
padding: 7px 0;
float: left; }
+ .wte-clm-tags #wte-clm-sel {
+ font-style: italic;
+ margin-left: 5px; }
.wte-clm-tags #wte-clm-status-c {
float: right; }
.wte-clm-tags #wte-clm-tags-field {
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index fa28282fc..085f3f405 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -815,10 +815,14 @@ $paddElClm: 5px 6px;
font-size: 11px;
padding: 10px 5px;
- ##{$clm-prefix}label{
+ ##{$clm-prefix}label, ##{$clm-prefix}sel{
padding: 7px 0;
float:left;
}
+ ##{$clm-prefix}sel{
+ font-style: italic;
+ margin-left: 5px;
+ }
##{$clm-prefix}status-c{
float:right;
}
diff --git a/test/specs/class_manager/view/ClassTagsView.js b/test/specs/class_manager/view/ClassTagsView.js
index e2c82c2ea..961e063c0 100644
--- a/test/specs/class_manager/view/ClassTagsView.js
+++ b/test/specs/class_manager/view/ClassTagsView.js
@@ -117,6 +117,7 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
sinon.stub(this.target, "get").returns(this.targetStub);
this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test');
+ this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test2');
this.$tags.children().length.should.equal(2);
});