diff options
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 | ||
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 | this.needsDraw = true; | ||
110 | } | ||
76 |