aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-05-03 16:01:47 -0700
committerEric Guzman2012-05-03 16:01:47 -0700
commit8b9024faa65566a18e4548f198b43f18390e6bc5 (patch)
treef297dc0f5ed3c9d3541da523aa688baacfb2a2df
parent62131516247e00be3982d6e8aa562e12965dd795 (diff)
downloadninja-8b9024faa65566a18e4548f198b43f18390e6bc5.tar.gz
CSS Panel - Add labels for selection and document names
Diffstat
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.css7
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.html10
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js148
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js23
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 @@
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
10exports.StyleSheetsView = Montage.create(Component, { 10exports.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 this.needsDraw = true;