4 files changed, 112 insertions, 76 deletions
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
 </head>
 <body>
 <section id="container" class="css-panel">
-    <h3>Style Sheets</h3>
+    <h3>Style Sheets <span data-montage-id="document-name" class="document-name"></span></h3>
    <div id="style-sheet-view"></div>
-    <h3>Styles</h3>
+    <h3>Styles <span data-montage-id="selection-name" class="selection-name"></span></h3>
    <div id="styles-view-container"></div>
 </section>
 </body>
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 : {
+    noDocumentCondition  : { value: true },
-        value: true
+    showToolbar          : { value: false },
-    },
+    stylesController     : { value: null },
-    showToolbar : {
+    styleSheets          : { value: [] },
-        value: false
+    _initView            : { value: false },
-    },
+    documentNameLabel    : { value: null },
-    _resizedHeight : {
+    noDocumentLabelClass : { value: "no-document" },
-        value: null
-    },
+    _documentName : { value: null },
-    isResizing : {
+    documentName : {
-        value: null
-    },
-    _height: {
-        value: null
-    },
-    height: {
        get: function() {
-            return this._height;
+            return this._documentName;
        },
-        set: function(val) {
+        set: function(label) {
-            if(this._height !== val) {
+            if(label === this._documentName) { return false; }
-                this._height = val;
+            
-                this.needsDraw = true;
+            this._documentName = label;
-            }
+            this.needsDraw = true;
        }
    },
+    
    /// Toolbar Button Actions
-    /// -----------------------
+    /// --------------------------------
    ///// Add rule button action
    handleAddAction : {
@@ -45,34 +39,75 @@ exports.StyleSheetsView = Montage.create(Component, {
        }
    },
-    styleSheets : {
+    /// App event handlers
-        value: []
+    /// --------------------------------
-    },
+    
-    stylesController : {
+    handleStyleSheetsReady : {
-        value: null
+        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 : {
+    draw : {
-        value: false
+        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;
+    /// Resize properties
-//            this.showToolbar = true;
+    /// --------------------------------
-//            this.styleSheets = this.stylesController.userStyleSheets;
+    _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;

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 @@
23	-webkit-box-flex: 0;	23	-webkit-box-flex: 0;
24	-webkit-user-select: none;	24	-webkit-user-select: none;
25	}	25	}
		26	.css-panel .selection-name:before, .css-panel .document-name:before {
		27	content:" - "
		28	}
		29	.css-panel .no-styles.selection-name, .css-panel .no-document.document-name {
		30	display: none;
		31	}
		32
26	.css-panel .style-sheets-view-container {	33	.css-panel .style-sheets-view-container {
27	-webkit-box-flex: 0;	34	-webkit-box-flex: 0;
28	min-height: 41px;	35	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
23	"module" : "js/panels/css-panel/style-sheets-view.reel",	23	"module" : "js/panels/css-panel/style-sheets-view.reel",
24	"name": "StyleSheetsView",	24	"name": "StyleSheetsView",
25	"properties": {	25	"properties": {
26	"element": {"#": "style-sheet-view" }	26	"element": {"#": "style-sheet-view" },
		27	"documentNameLabel": {"#": "document-name" }
27	}	28	}
28	},	29	},
29	"stylesViewContainer": {	30	"stylesViewContainer": {
30	"module" : "js/panels/css-panel/styles-view-container.reel",	31	"module" : "js/panels/css-panel/styles-view-container.reel",
31	"name": "StylesViewContainer",	32	"name": "StylesViewContainer",
32	"properties": {	33	"properties": {
33	"element": {"#": "styles-view-container" }	34	"element": {"#": "styles-view-container" },
		35	"selectionNameLabel": {"#": "selection-name" }
34	}	36	}
35	}	37	}
36	}	38	}
@@ -38,9 +40,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
38	</head>	40	</head>
39	<body>	41	<body>
40	<section id="container" class="css-panel">	42	<section id="container" class="css-panel">
41	<h3>Style Sheets</h3>	43	<h3>Style Sheets <span data-montage-id="document-name" class="document-name"></span></h3>
42	<div id="style-sheet-view"></div>	44	<div id="style-sheet-view"></div>
43	<h3>Styles</h3>	45	<h3>Styles <span data-montage-id="selection-name" class="selection-name"></span></h3>
44	<div id="styles-view-container"></div>	46	<div id="styles-view-container"></div>
45	</section>	47	</section>
46	</body>	48	</body>


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,
8	Component = require("montage/ui/component").Component;	8	Component = require("montage/ui/component").Component;
9		9
10	exports.StyleSheetsView = Montage.create(Component, {	10	exports.StyleSheetsView = Montage.create(Component, {
11	noDocumentCondition : {	11	noDocumentCondition : { value: true },
12	value: true	12	showToolbar : { value: false },
13	},	13	stylesController : { value: null },
14	showToolbar : {	14	styleSheets : { value: [] },
15	value: false	15	_initView : { value: false },
16	},	16	documentNameLabel : { value: null },
17	_resizedHeight : {	17	noDocumentLabelClass : { value: "no-document" },
18	value: null	18
19	},	19	_documentName : { value: null },
20	isResizing : {	20	documentName : {
21	value: null
22	},
23	_height: {
24	value: null
25	},
26	height: {
27	get: function() {	21	get: function() {
28	return this._height;	22	return this._documentName;
29	},	23	},
30	set: function(val) {	24	set: function(label) {
31	if(this._height !== val) {	25	if(label === this._documentName) { return false; }
32	this._height = val;	26
33	this.needsDraw = true;	27	this._documentName = label;
34	}	28	this.needsDraw = true;
35	}	29	}
36	},	30	},
37		31
38	/// Toolbar Button Actions	32	/// Toolbar Button Actions
39	/// -----------------------	33	/// --------------------------------
40		34
41	///// Add rule button action	35	///// Add rule button action
42	handleAddAction : {	36	handleAddAction : {
@@ -45,34 +39,75 @@ exports.StyleSheetsView = Montage.create(Component, {
45	}	39	}
46	},	40	},
47		41
48	styleSheets : {	42	/// App event handlers
49	value: []	43	/// --------------------------------
50	},	44
51	stylesController : {	45	handleStyleSheetsReady : {
52	value: null	46	value: function(e) {
		47	this.documentName = this.stylesController.activeDocument.name;
		48	this._initView = this.needsDraw = true;
		49	}
53	},	50	},
54	deserializedFromTemplate : {
55	value: function() {
56	console.log("style sheet view - deserialized");
57		51
		52	/// Draw cycle
		53	/// --------------------------------
		54
		55	templateDidLoad : {
		56	value: function() {
58	this.stylesController = this.application.ninja.stylesController;	57	this.stylesController = this.application.ninja.stylesController;
59		58	}
		59	},
		60	prepareForDraw : {
		61	value: function() {
60	this.eventManager.addEventListener("styleSheetsReady", this, false);	62	this.eventManager.addEventListener("styleSheetsReady", this, false);
61	this.eventManager.addEventListener("newStyleSheet", this, false);	63	this.eventManager.addEventListener("newStyleSheet", this, false);
62	}	64	}
63	},	65	},
64	_initView : {	66	draw : {
65	value: false	67	value: function() {
		68	if(this._initView) {
		69	this.noDocumentCondition = false;
		70	this.showToolbar = true;
		71	this.styleSheets = this.stylesController.userStyleSheets;
		72	this._initView = false;
		73	}
		74
		75	if(this.height) {
		76	this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px";
		77	}
		78
		79	if(this.documentName && this.documentNameLabel) {
		80	this.documentNameLabel.innerHTML = this.documentName;
		81	this.documentNameLabel.classList.remove(this.noDocumentLabelClass);
		82	} else {
		83	this.documentNameLabel.classList.add(this.noDocumentLabelClass);
		84	}
		85	}
		86	},
		87	didDraw: {
		88	value: function() {
		89	if(!this.isResizing) {
		90	this.height = this.styleSheetList.element.offsetHeight;
		91	}
		92	}
66	},	93	},
67		94
68	handleStyleSheetsReady : {
69	value: function(e) {
70	this._initView = this.needsDraw = true;
71		95
72	// this.noDocumentCondition = false;	96	/// Resize properties
73	// this.showToolbar = true;	97	/// --------------------------------
74	// this.styleSheets = this.stylesController.userStyleSheets;
75		98
		99	_resizedHeight : { value: null },
		100	isResizing : { value: null },
		101	_height : { value: null },
		102	height: {
		103	get: function() {
		104	return this._height;
		105	},
		106	set: function(val) {
		107	if(this._height !== val) {
		108	this._height = val;
		109</