diff --git a/src/class_manager/template/classTag.html b/src/class_manager/template/classTag.html
index 1a9156134..39d01f543 100644
--- a/src/class_manager/template/classTag.html
+++ b/src/class_manager/template/classTag.html
@@ -1,3 +1,5 @@
- <%= label %>
+
+ />
+
⨯
\ No newline at end of file
diff --git a/src/class_manager/view/ClassTagView.js b/src/class_manager/view/ClassTagView.js
index 5fed012cc..d193ecd13 100644
--- a/src/class_manager/view/ClassTagView.js
+++ b/src/class_manager/view/ClassTagView.js
@@ -13,6 +13,8 @@ define(['backbone', 'text!./../template/classTag.html'],
this.config = o.config || {};
this.coll = o.coll || null;
this.pfx = this.config.stylePrefix || '';
+ this.ppfx = this.config.pStylePrefix || '';
+ this.inputProp = 'readonly';
this.target = this.config.target;
this.className = this.pfx + 'tag';
this.closeId = this.pfx + 'close';
@@ -20,13 +22,33 @@ define(['backbone', 'text!./../template/classTag.html'],
this.labelId = this.pfx + 'tag-label';
this.events['click #' + this.closeId ] = 'removeTag';
this.events['click #' + this.chkId ] = 'changeStatus';
- this.events['click #' + this.labelId ] = 'changeStatus';
+ this.events['dblclick #' + this.labelId ] = 'startEditTag';
+ this.events['keypress #' + this.labelId + ' input'] = 'updateInputLabel';
+ this.events['blur #' + this.labelId + ' input'] = 'endEditTag';
this.listenTo( this.model, 'change:active', this.updateStatus);
+ //this.listenTo( this.model, 'change:label', this.updateStatus);
this.delegateEvents();
},
+ /**
+ * Start editing tag
+ */
+ startEditTag: function(){
+ this.$labelInput.prop(this.inputProp, false);
+ },
+
+ /**
+ * End editing tag
+ */
+ endEditTag: function(){
+ this.$labelInput.prop(this.inputProp, true);
+ },
+
+ /**
+ * Update status of the tag
+ */
changeStatus: function(){
this.model.set('active', !this.model.get('active'));
this.target.trigger('targetClassUpdated');
@@ -66,14 +88,28 @@ define(['backbone', 'text!./../template/classTag.html'],
}
},
+ /**
+ * Update label's input
+ */
+ updateInputLabel: function(){
+ if(!this.$labelInput)
+ this.$labelInput = this.$el.find('input');
+ var size = this.$labelInput.val().length - 2;
+ size = size < 1 ? 1 : size;
+ this.$labelInput.attr('size', size);
+ },
+
/** @inheritdoc */
render : function(){
this.$el.html( this.template({
label: this.model.get('label'),
pfx: this.pfx,
+ ppfx: this.ppfx,
+ inputProp: this.inputProp,
}));
this.updateStatus();
this.$el.attr('class', this.className);
+ this.updateInputLabel();
return this;
},
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index d986bf9d9..2d70c8994 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -153,6 +153,7 @@ define([
initClassManager: function() {
var cfg = this.config.classManager,
pfx = cfg.stylePrefix || 'clm-';
+ cfg.pStylePrefix = this.config.stylePrefix;
cfg.stylePrefix = this.config.stylePrefix + pfx;
cfg.target = this;
this.clm = new ClassManager(cfg);
diff --git a/styles/css/main.css b/styles/css/main.css
index f2ed6d101..fa2393a6f 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2561,9 +2561,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/*#383838*/
/*#515151*/
/*l: #d8d7db*/
-.wte-invis-invis, .wte-clm-tags #wte-clm-new {
+.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
background-color: transparent;
- border: none; }
+ border: none;
+ color: inherit; }
+
+.wte-no-app {
+ height: 10px; }
.wte-test::btn {
color: '#fff'; }
@@ -3282,7 +3286,7 @@ ol.example li.placeholder:before {
cursor: pointer;
font-size: 9px; }
.wte-clm-tags #wte-clm-tag-label {
- cursor: pointer; }
+ cursor: text; }
/********* END Class manager **********/
/********* Modal dialog **********/
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 89a4e4398..973388ac5 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -47,9 +47,13 @@ $imageCompDim: 50px;
appearance: $v;
}
-.#{$app-prefix}invis-invis{
+.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{
background-color: transparent;
border: none;
+ color:inherit;
+}
+.#{$app-prefix}no-app{
+ height: 10px;
}
.#{$app-prefix}test {
@@ -840,7 +844,7 @@ $tagBg: #804f7b;
}
##{$clm-prefix}tag-label {
- cursor: pointer;
+ cursor: text;
@extend .no-select;
}
}