diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/css-panel/css-style.reel/css-style.css | 9 | ||||
-rw-r--r-- | js/panels/css-panel/css-style.reel/css-style.js | 24 |
2 files changed, 32 insertions, 1 deletions
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css index d6ca76d1..928c2a33 100644 --- a/js/panels/css-panel/css-style.reel/css-style.css +++ b/js/panels/css-panel/css-style.reel/css-style.css | |||
@@ -138,6 +138,15 @@ POSSIBILITY OF SUCH DAMAGE. | |||
138 | .style-item .hintable-hint { | 138 | .style-item .hintable-hint { |
139 | color: #bdbdbd; | 139 | color: #bdbdbd; |
140 | } | 140 | } |
141 | .edit-value { | ||
142 | white-space: normal; | ||
143 | } | ||
144 | .edit-value dt { | ||
145 | margin-right: -7px; | ||
146 | } | ||
147 | .edit-value dd { | ||
148 | margin-left: 7px; | ||
149 | } | ||
141 | 150 | ||
142 | /* ------------------------ | 151 | /* ------------------------ |
143 | Empty Style (Add Style) | 152 | Empty Style (Add Style) |
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js index dee94e75..e0055dc6 100644 --- a/js/panels/css-panel/css-style.reel/css-style.js +++ b/js/panels/css-panel/css-style.reel/css-style.js | |||
@@ -57,6 +57,7 @@ exports.CssStyle = Montage.create(Component, { | |||
57 | delegate : { value: null }, | 57 | delegate : { value: null }, |
58 | disabledClass : { value: 'style-item-disabled' }, | 58 | disabledClass : { value: 'style-item-disabled' }, |
59 | editingStyleClass : { value: 'edit-style-item' }, | 59 | editingStyleClass : { value: 'edit-style-item' }, |
60 | editingValueClass : { value: 'edit-value' }, | ||
60 | editNewEmptyClass : { value: 'edit-empty-style' }, | 61 | editNewEmptyClass : { value: 'edit-empty-style' }, |
61 | invalidStyleClass : { value: "style-item-invalid" }, | 62 | invalidStyleClass : { value: "style-item-invalid" }, |
62 | emptyStyleClass : { value: "empty-css-style" }, | 63 | emptyStyleClass : { value: "empty-css-style" }, |
@@ -181,6 +182,18 @@ exports.CssStyle = Montage.create(Component, { | |||
181 | } | 182 | } |
182 | }, | 183 | }, |
183 | 184 | ||
185 | _editingValue : { value: null }, | ||
186 | editingValue : { | ||
187 | get : function() { return this._editingValue; }, | ||
188 | set : function(value) { | ||
189 | if(value === this._editingValue) { return; } | ||
190 | |||
191 | this._editingValue = value; | ||
192 | |||
193 | this.needsDraw = true; | ||
194 | } | ||
195 | }, | ||
196 | |||
184 | remove : { | 197 | remove : { |
185 | value: function() { | 198 | value: function() { |
186 | var branchController = this.parentComponent.parentComponent.contentController; | 199 | var branchController = this.parentComponent.parentComponent.contentController; |
@@ -257,6 +270,9 @@ exports.CssStyle = Montage.create(Component, { | |||
257 | if(this.empty) { | 270 | if(this.empty) { |
258 | this.editingNewStyle = true; | 271 | this.editingNewStyle = true; |
259 | } | 272 | } |
273 | |||
274 | this.editingValue = (this.valueField.element === e._currentTarget.element); | ||
275 | |||
260 | } | 276 | } |
261 | }, | 277 | }, |
262 | 278 | ||
@@ -300,7 +316,7 @@ exports.CssStyle = Montage.create(Component, { | |||
300 | return false; | 316 | return false; |
301 | } | 317 | } |
302 | 318 | ||
303 | this.editing = false; | 319 | this.editing = this.editingValue = false; |
304 | 320 | ||
305 | if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) { | 321 | if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) { |
306 | ///// Show add button | 322 | ///// Show add button |
@@ -457,6 +473,12 @@ exports.CssStyle = Montage.create(Component, { | |||
457 | } else { | 473 | } else { |
458 | this._element.classList.remove(this.editingStyleClass); | 474 | this._element.classList.remove(this.editingStyleClass); |
459 | } | 475 | } |
476 | |||
477 | if(this.editingValue) { | ||
478 | this._element.classList.add(this.editingValueClass); | ||
479 | } else { | ||
480 | this._element.classList.remove(this.editingValueClass); | ||
481 | } | ||
460 | } | 482 | } |
461 | } | 483 | } |
462 | }); | 484 | }); |