From 7f0dad901bef6512357a7a768fda1cb3106ac864 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 19:55:18 -0700 Subject: CSS Panel - Fix style declaration interaction --- js/panels/css-panel/css-style.reel/css-style.js | 32 ++++++++++++++-------- .../style-declaration.reel/style-declaration.html | 3 +- .../style-declaration.reel/style-declaration.js | 17 ++++++------ js/panels/css-panel/styles-view-delegate.js | 7 +---- 4 files changed, 32 insertions(+), 27 deletions(-) (limited to 'js') 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, { invalidStyleClass : { value: "style-item-invalid" }, emptyStyleClass : { value: "empty-css-style" }, - propertyText : { value: "property" }, - _valueText : { value: "value" }, + propertyText : { + value: "property", + distinct: true + }, + + _valueText : { + value: "value", + distinct: true + }, valueText : { get: function() { return this._valueText; @@ -207,10 +214,8 @@ exports.CssStyle = Montage.create(Component, { }, handleClick : { value: function(e) { - console.log("handle Add button click"); + this.buttonClicked = true; this.propertyField.start(); - //this.editingNewStyle = true; - this.editingNewStyle = this.editing = true; } }, @@ -282,6 +287,8 @@ exports.CssStyle = Montage.create(Component, { value = this.valueField.value, rule = this.getRule(); + this.propertyText = property; + this.delegate.handlePropertyChange(rule, property, value, oldProperty, this); } }, @@ -291,6 +298,8 @@ exports.CssStyle = Montage.create(Component, { value = this.valueField.value, rule = this.getRule(); + this.valueText = value; + this.delegate.handleValueChange(rule, property, value, this); } }, @@ -333,13 +342,6 @@ exports.CssStyle = Montage.create(Component, { this.propertyField.addEventListener('paste', this, false); this.valueField.addEventListener('paste', this, false); - - if(this.empty) { - this.addStyleButton.addEventListener('click', this, false); - } else { - this.addStyleButton.removeEventListener('click', this, false); - } - } }, @@ -364,6 +366,12 @@ exports.CssStyle = Montage.create(Component, { this._element.removeAttribute('title'); } + if(this.empty) { + this.addStyleButton.addEventListener('click', this, false); + } else { + this.addStyleButton.removeEventListener('click', this, false); + } + this.setToolTips(); } }, 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 "bindings": { "content": { "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "styles" + "boundObjectPropertyPath": "styles", + "oneway": true } } }, 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, { stylesArray = Array.prototype.slice.call(dec); + stylesArray.forEach(function(prop, index) { + this.styles.push({ + name: prop, + value: dec.getPropertyValue(prop) + }); + }, this); + if(this.includeEmptyStyle) { this.styles.push({ name : "property", @@ -93,13 +100,6 @@ exports.StyleDeclaration = Montage.create(Component, { }); } - stylesArray.forEach(function(prop, index) { - this.styles.push({ - name: prop, - value: dec.getPropertyValue(prop) - }); - }, this); - this._declaration = dec; this.needsDraw = this.needsSort = true; } @@ -218,7 +218,8 @@ exports.StyleDeclaration = Montage.create(Component, { } } - this.arrayController.addObjects(styleDescriptor); + this.styles.push(styleDescriptor); + this.arrayController.organizeObjects(); } }, 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, { nextFocus = style.getSiblingStyle('next'); if(nextFocus) { nextFocus.propertyField.start(); - } else { + } else if(style.dirty) { style.parentComponent.parentComponent.addNewStyle(); style.editingNewStyle = false; setTimeout(function() { @@ -189,11 +189,6 @@ exports.StylesViewMediator = Montage.create(Component, { style.invalid = (browserValue === null); this._dispatchChange(property, browserValue); - - if(style.editingNewStyle) { - style.parentComponent.parentComponent.addNewStyle(); - style.editingNewStyle = false; - } } }, -- cgit v1.2.3