From fdfba499f0b84360b96096fa866a981e96e8756c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 18 May 2012 16:35:56 -0700 Subject: fixing the color chip for the document root Signed-off-by: Valerio Virgillito --- js/components/ui/color-chip.reel/color-chip.js | 13 +++++++++++-- js/controllers/document-controller.js | 2 ++ js/controllers/elements/body-controller.js | 2 +- js/document/views/design.js | 5 +++++ js/ninja.reel/ninja.js | 2 +- js/panels/properties.reel/properties.js | 25 +++++++++++++++++++++---- 6 files changed, 41 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 4e64b2e8..630dcd4b 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -33,6 +33,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} }, + chipBtn: { + serializable: true, + value: null + }, + changeDelegate: { value: function(event) { this.color = event._event.color; @@ -60,7 +65,7 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { this.icon.style.display = "none"; } - this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; + this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, nocolor: true, offset: this.offset}; this.application.ninja.colorController.addButton(this.mode, this.chipBtn); } @@ -80,9 +85,13 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { b = colorObj.value.b; a = colorObj.value.a; css = colorObj.css; + this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); + } else { + mode = "nocolor"; + this.chipBtn.color(mode, null); + } - this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); this.chipBtn.addEventListener("change", this, false); } } diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index f1523d87..7721d32d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -489,6 +489,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(currentDocument) { currentDocument.serializeDocument(); + this.application.ninja.selectionController._selectionContainer = null; + currentDocument.model.views.design.propertiesPanel.clear(); currentDocument.model.views.design.hide(); } diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 5c23dcf7..7a3a66f5 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -30,7 +30,7 @@ exports.BodyController = Montage.create(ElementController, { value: function(el, p) { switch(p) { case "background" : - return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", true, true)); + return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", false, true)); case "border": return 0; case "height": diff --git a/js/document/views/design.js b/js/document/views/design.js index 2ccb82d1..44f1a5e8 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -64,6 +64,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { }, //////////////////////////////////////////////////////////////////// // + propertiesPanel: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // initialize: { value: function (parent) { //Creating iFrame for view diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 6d41cd53..80d1b406 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -280,7 +280,7 @@ exports.Ninja = Montage.create(Component, { this.currentDocument = event.detail; if(this.currentDocument.documentRoot) { - this.application.ninja.currentSelectedContainer = this.currentDocument.documentRoot; + this.currentSelectedContainer = this.currentDocument.documentRoot; } else { alert("The current document has not loaded yet"); return; diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 4d048472..eb362796 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -46,7 +46,7 @@ exports.Properties = Montage.create(Component, { prepareForDraw: { value : function() { - + this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("selectionChange", this, false); // This will be a toggle option @@ -54,8 +54,6 @@ exports.Properties = Montage.create(Component, { this.eventManager.addEventListener( "elementChanging", this, false); } - this.eventManager.addEventListener("openDocument", this, false); - this.elementId.element.addEventListener("blur", this, false); this.elementId.element.addEventListener("focus", this, false); this.elementId.element.addEventListener("keyup", this, false); @@ -70,6 +68,9 @@ exports.Properties = Montage.create(Component, { value: function() { this.eventManager.addEventListener( "elementChange", this, false); + // Save a reference of the pi inside the document view to be able to clear + this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; + // Display the default document root PI this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } @@ -165,6 +166,15 @@ exports.Properties = Montage.create(Component, { } }, + clear: { + value: function() { + this.elementName.value = ""; + this.elementId.value = ""; + this.elementClass.value = ""; + this.customPi = null; + } + }, + displayElementProperties: { value: function (el) { var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; @@ -210,9 +220,16 @@ exports.Properties = Montage.create(Component, { this.displayCustomProperties(el, el.elementModel.pi); } + // Root element color chip if(isRoot) { var backgroundChip = this.customSections[0].content.controls["background"]; - if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background"); + var rootBackgroundColor = ElementsMediator.getProperty(el, "background"); + + if(rootBackgroundColor) { + backgroundChip.color = rootBackgroundColor; + } else { + backgroundChip.color = null; + } } var previousInput = this.application.ninja.colorController.colorModel.input; -- cgit v1.2.3