From 8b9024faa65566a18e4548f198b43f18390e6bc5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 3 May 2012 16:01:47 -0700 Subject: CSS Panel - Add labels for selection and document names --- js/panels/css-panel/css-panel.reel/css-panel.css | 7 + js/panels/css-panel/css-panel.reel/css-panel.html | 10 +- .../style-sheets-view.reel/style-sheets-view.js | 148 +++++++++++---------- .../styles-view-container.js | 23 ++++ 4 files changed, 112 insertions(+), 76 deletions(-) (limited to 'js/panels/css-panel') diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css index 7bcfbc1a..7a4191b9 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.css +++ b/js/panels/css-panel/css-panel.reel/css-panel.css @@ -23,6 +23,13 @@ -webkit-box-flex: 0; -webkit-user-select: none; } +.css-panel .selection-name:before, .css-panel .document-name:before { + content:" - " +} +.css-panel .no-styles.selection-name, .css-panel .no-document.document-name { + display: none; +} + .css-panel .style-sheets-view-container { -webkit-box-flex: 0; min-height: 41px; diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index 8ee56086..f0c538c8 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -23,14 +23,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/style-sheets-view.reel", "name": "StyleSheetsView", "properties": { - "element": {"#": "style-sheet-view" } + "element": {"#": "style-sheet-view" }, + "documentNameLabel": {"#": "document-name" } } }, "stylesViewContainer": { "module" : "js/panels/css-panel/styles-view-container.reel", "name": "StylesViewContainer", "properties": { - "element": {"#": "styles-view-container" } + "element": {"#": "styles-view-container" }, + "selectionNameLabel": {"#": "selection-name" } } } } @@ -38,9 +40,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot

Style Sheets

Styles

diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index 29381d73..26b996ec 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -8,35 +8,29 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.StyleSheetsView = Montage.create(Component, { - noDocumentCondition : { - value: true - }, - showToolbar : { - value: false - }, - _resizedHeight : { - value: null - }, - isResizing : { - value: null - }, - _height: { - value: null - }, - height: { + noDocumentCondition : { value: true }, + showToolbar : { value: false }, + stylesController : { value: null }, + styleSheets : { value: [] }, + _initView : { value: false }, + documentNameLabel : { value: null }, + noDocumentLabelClass : { value: "no-document" }, + + _documentName : { value: null }, + documentName : { get: function() { - return this._height; + return this._documentName; }, - set: function(val) { - if(this._height !== val) { - this._height = val; - this.needsDraw = true; - } + set: function(label) { + if(label === this._documentName) { return false; } + + this._documentName = label; + this.needsDraw = true; } }, - + /// Toolbar Button Actions - /// ----------------------- + /// -------------------------------- ///// Add rule button action handleAddAction : { @@ -45,34 +39,75 @@ exports.StyleSheetsView = Montage.create(Component, { } }, - styleSheets : { - value: [] - }, - stylesController : { - value: null + /// App event handlers + /// -------------------------------- + + handleStyleSheetsReady : { + value: function(e) { + this.documentName = this.stylesController.activeDocument.name; + this._initView = this.needsDraw = true; + } }, - deserializedFromTemplate : { - value: function() { - console.log("style sheet view - deserialized"); + /// Draw cycle + /// -------------------------------- + + templateDidLoad : { + value: function() { this.stylesController = this.application.ninja.stylesController; - + } + }, + prepareForDraw : { + value: function() { this.eventManager.addEventListener("styleSheetsReady", this, false); this.eventManager.addEventListener("newStyleSheet", this, false); } }, - _initView : { - value: false + draw : { + value: function() { + if(this._initView) { + this.noDocumentCondition = false; + this.showToolbar = true; + this.styleSheets = this.stylesController.userStyleSheets; + this._initView = false; + } + + if(this.height) { + this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px"; + } + + if(this.documentName && this.documentNameLabel) { + this.documentNameLabel.innerHTML = this.documentName; + this.documentNameLabel.classList.remove(this.noDocumentLabelClass); + } else { + this.documentNameLabel.classList.add(this.noDocumentLabelClass); + } + } + }, + didDraw: { + value: function() { + if(!this.isResizing) { + this.height = this.styleSheetList.element.offsetHeight; + } + } }, - handleStyleSheetsReady : { - value: function(e) { - this._initView = this.needsDraw = true; -// this.noDocumentCondition = false; -// this.showToolbar = true; -// this.styleSheets = this.stylesController.userStyleSheets; + /// Resize properties + /// -------------------------------- + _resizedHeight : { value: null }, + isResizing : { value: null }, + _height : { value: null }, + height: { + get: function() { + return this._height; + }, + set: function(val) { + if(this._height !== val) { + this._height = val; + this.needsDraw = true; + } } }, handleNewStyleSheet : { @@ -102,35 +137,4 @@ exports.StyleSheetsView = Montage.create(Component, { this.needsDraw = true; } }, - - - prepareForDraw : { - value: function() { - console.log("style sheet view - prepare for draw"); - } - }, - draw : { - value: function() { - console.log("styles sheet view - draw"); - - if(this._initView) { - this.noDocumentCondition = false; - this.showToolbar = true; - this.styleSheets = this.stylesController.userStyleSheets; - this._initView = false; - } - - if(this.height) { - console.log("StyleSheetsView draw - resizing to", (this.height + this._resizedHeight) + "px"); - this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px"; - } - } - }, - didDraw: { - value: function() { - if(!this.isResizing) { - this.height = this.styleSheetList.element.offsetHeight; - } - } - } }); \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js index 32b2c3ee..c927fe9a 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js @@ -26,6 +26,23 @@ exports.StylesViewContainer = Montage.create(Component, { this.needsDraw = true; } }, + + _getElementLabel : { + value: function(el) { + var id = '#'+el.id, + className = '.'+Array.prototype.slice.call(el.classList).join('.'), + nodeName = el.nodeName; + + if(id.length > 1) { + return nodeName + id; + } else if(className.length > 1) { + return nodeName + className; + } + + return nodeName; + } + }, + templateDidLoad : { value: function() { this.eventManager.addEventListener('styleSheetsReady', this, false); @@ -46,6 +63,10 @@ exports.StylesViewContainer = Montage.create(Component, { this.hasStyles = false; return false; } else if(elements.length === 1) { + + ///// update the selection status label with the label of the element + this.selectionNameLabel.innerHTML = this._getElementLabel(elements[0]); + if(this.contentPanel === "rules") { this.ruleListContainer.displayListForSelection(elements); } else { @@ -102,8 +123,10 @@ exports.StylesViewContainer = Montage.create(Component, { value: function() { if(this.hasStyles) { this.element.classList.remove('no-styles'); + this.selectionNameLabel.classList.remove('no-styles'); } else { this.element.classList.add('no-styles'); + this.selectionNameLabel.classList.add('no-styles'); } } } -- cgit v1.2.3