aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorEric Guzman2012-05-17 19:55:18 -0700
committerEric Guzman2012-05-17 19:55:18 -0700
commit7f0dad901bef6512357a7a768fda1cb3106ac864 (patch)
treed6fabda54309ba69a957c82c1bca28e12b28caa7 /js/panels
parent5c4cfc1a52b1cb079b1fa6f02aedcaef1ad2bc38 (diff)
downloadninja-7f0dad901bef6512357a7a768fda1cb3106ac864.tar.gz
CSS Panel - Fix style declaration interaction
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.js32
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.html3
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js17
-rw-r--r--js/panels/css-panel/styles-view-delegate.js7
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