CSS Panel - Add labels for selection and document names

1 files changed, 76 insertions, 72 deletions

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