diff options
Diffstat (limited to 'js/panels/css-panel')
4 files changed, 32 insertions, 27 deletions
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 61723284..3a07f8f1 100644 --- a/js/panels/css-panel/css-style.reel/css-style.js +++ b/js/panels/css-panel/css-style.reel/css-style.js | |||
@@ -15,8 +15,15 @@ exports.CssStyle = Montage.create(Component, { | |||
15 | invalidStyleClass : { value: "style-item-invalid" }, | 15 | invalidStyleClass : { value: "style-item-invalid" }, |
16 | emptyStyleClass : { value: "empty-css-style" }, | 16 | emptyStyleClass : { value: "empty-css-style" }, |
17 | 17 | ||
18 | propertyText : { value: "property" }, | 18 | propertyText : { |
19 | _valueText : { value: "value" }, | 19 | value: "property", |
20 | distinct: true | ||
21 | }, | ||
22 | |||
23 | _valueText : { | ||
24 | value: "value", | ||
25 | distinct: true | ||
26 | }, | ||
20 | valueText : { | 27 | valueText : { |
21 | get: function() { | 28 | get: function() { |
22 | return this._valueText; | 29 | return this._valueText; |
@@ -207,10 +214,8 @@ exports.CssStyle = Montage.create(Component, { | |||
207 | }, | 214 | }, |
208 | handleClick : { | 215 | handleClick : { |
209 | value: function(e) { | 216 | value: function(e) { |
210 | console.log("handle Add button click"); | 217 | this.buttonClicked = true; |
211 | this.propertyField.start(); | 218 | this.propertyField.start(); |
212 | //this.editingNewStyle = true; | ||
213 | this.editingNewStyle = this.editing = true; | ||
214 | } | 219 | } |
215 | }, | 220 | }, |
216 | 221 | ||
@@ -282,6 +287,8 @@ exports.CssStyle = Montage.create(Component, { | |||
282 | value = this.valueField.value, | 287 | value = this.valueField.value, |
283 | rule = this.getRule(); | 288 | rule = this.getRule(); |
284 | 289 | ||
290 | this.propertyText = property; | ||
291 | |||
285 | this.delegate.handlePropertyChange(rule, property, value, oldProperty, this); | 292 | this.delegate.handlePropertyChange(rule, property, value, oldProperty, this); |
286 | } | 293 | } |
287 | }, | 294 | }, |
@@ -291,6 +298,8 @@ exports.CssStyle = Montage.create(Component, { | |||
291 | value = this.valueField.value, | 298 | value = this.valueField.value, |
292 | rule = this.getRule(); | 299 | rule = this.getRule(); |
293 | 300 | ||
301 | this.valueText = value; | ||
302 | |||
294 | this.delegate.handleValueChange(rule, property, value, this); | 303 | this.delegate.handleValueChange(rule, property, value, this); |
295 | } | 304 | } |
296 | }, | 305 | }, |
@@ -333,13 +342,6 @@ exports.CssStyle = Montage.create(Component, { | |||
333 | this.propertyField.addEventListener('paste', this, false); | 342 | this.propertyField.addEventListener('paste', this, false); |
334 | this.valueField.addEventListener('paste', this, false); | 343 | this.valueField.addEventListener('paste', this, false); |
335 | 344 | ||
336 | |||
337 | if(this.empty) { | ||
338 | this.addStyleButton.addEventListener('click', this, false); | ||
339 | } else { | ||
340 | this.addStyleButton.removeEventListener('click', this, false); | ||
341 | } | ||
342 | |||
343 | } | 345 | } |
344 | }, | 346 | }, |
345 | 347 | ||
@@ -364,6 +366,12 @@ exports.CssStyle = Montage.create(Component, { | |||
364 | this._element.removeAttribute('title'); | 366 | this._element.removeAttribute('title'); |
365 | } | 367 | } |
366 | 368 | ||
369 | if(this.empty) { | ||
370 | this.addStyleButton.addEventListener('click', this, false); | ||
371 | } else { | ||
372 | this.addStyleButton.removeEventListener('click', this, false); | ||
373 | } | ||
374 | |||
367 | this.setToolTips(); | 375 | this.setToolTips(); |
368 | } | 376 | } |
369 | }, | 377 | }, |
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html index fced7d7a..5724ffc3 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.html +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html | |||
@@ -25,7 +25,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
25 | "bindings": { | 25 | "bindings": { |
26 | "content": { | 26 | "content": { |
27 | "boundObject": {"@": "owner"}, | 27 | "boundObject": {"@": "owner"}, |
28 | "boundObjectPropertyPath": "styles" | 28 | "boundObjectPropertyPath": "styles", |
29 | "oneway": true | ||
29 | } | 30 | } |
30 | } | 31 | } |
31 | }, | 32 | }, |
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js index 61a65099..c679783e 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.js +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js | |||
@@ -85,6 +85,13 @@ exports.StyleDeclaration = Montage.create(Component, { | |||
85 | 85 | ||
86 | stylesArray = Array.prototype.slice.call(dec); | 86 | stylesArray = Array.prototype.slice.call(dec); |
87 | 87 | ||
88 | stylesArray.forEach(function(prop, index) { | ||
89 | this.styles.push({ | ||
90 | name: prop, | ||
91 | value: dec.getPropertyValue(prop) | ||
92 | }); | ||
93 | }, this); | ||
94 | |||
88 | if(this.includeEmptyStyle) { | 95 | if(this.includeEmptyStyle) { |
89 | this.styles.push({ | 96 | this.styles.push({ |
90 | name : "property", | 97 | name : "property", |
@@ -93,13 +100,6 @@ exports.StyleDeclaration = Montage.create(Component, { | |||
93 | }); | 100 | }); |
94 | } | 101 | } |
95 | 102 | ||
96 | stylesArray.forEach(function(prop, index) { | ||
97 | this.styles.push({ | ||
98 | name: prop, | ||
99 | value: dec.getPropertyValue(prop) | ||
100 | }); | ||
101 | }, this); | ||
102 | |||
103 | this._declaration = dec; | 103 | this._declaration = dec; |
104 | this.needsDraw = this.needsSort = true; | 104 | this.needsDraw = this.needsSort = true; |
105 | } | 105 | } |
@@ -218,7 +218,8 @@ exports.StyleDeclaration = Montage.create(Component, { | |||
218 | } | 218 | } |
219 | } | 219 | } |
220 | 220 | ||
221 | this.arrayController.addObjects(styleDescriptor); | 221 | this.styles.push(styleDescriptor); |
222 | this.arrayController.organizeObjects(); | ||
222 | } | 223 | } |
223 | }, | 224 | }, |
224 | 225 | ||
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index e00d7fca..38b0fcc6 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -125,7 +125,7 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
125 | nextFocus = style.getSiblingStyle('next'); | 125 | nextFocus = style.getSiblingStyle('next'); |
126 | if(nextFocus) { | 126 | if(nextFocus) { |
127 | nextFocus.propertyField.start(); | 127 | nextFocus.propertyField.start(); |
128 | } else { | 128 | } else if(style.dirty) { |
129 | style.parentComponent.parentComponent.addNewStyle(); | 129 | style.parentComponent.parentComponent.addNewStyle(); |
130 | style.editingNewStyle = false; | 130 | style.editingNewStyle = false; |
131 | setTimeout(function() { | 131 | setTimeout(function() { |
@@ -189,11 +189,6 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
189 | style.invalid = (browserValue === null); | 189 | style.invalid = (browserValue === null); |
190 | 190 | ||
191 | this._dispatchChange(property, browserValue); | 191 | this._dispatchChange(property, browserValue); |
192 | |||
193 | if(style.editingNewStyle) { | ||
194 | style.parentComponent.parentComponent.addNewStyle(); | ||
195 | style.editingNewStyle = false; | ||
196 | } | ||
197 | } | 192 | } |
198 | }, | 193 | }, |
199 | 194 | ||