diff options
author | Eric Guzman | 2012-05-21 09:30:24 -0700 |
---|---|---|
committer | Eric Guzman | 2012-05-21 09:30:24 -0700 |
commit | a8e97144c832e355de7f8177ce38644119248e87 (patch) | |
tree | 14d7c03648347019b34c37f789c48d5554d77f1e /js | |
parent | 84097be9d7dd3403a0ac12f8c039d3ffc5281cfc (diff) | |
download | ninja-a8e97144c832e355de7f8177ce38644119248e87.tar.gz |
Style sheets view - Fixed drawing of toolbar and "no sheets" message
Diffstat (limited to 'js')
4 files changed, 36 insertions, 14 deletions
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html index 53c6627a..b33c4665 100644 --- a/js/components/toolbar.reel/toolbar.html +++ b/js/components/toolbar.reel/toolbar.html | |||
@@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "owner": { | 13 | "owner": { |
14 | "module" : "js/panels/css-panel/style-sheet.reel", | 14 | "prototype" : "js/components/toolbar.reel", |
15 | "name" : "StyleSheet", | ||
16 | "properties" : { | 15 | "properties" : { |
17 | "element" : {"#" : "toolbar-container"}, | 16 | "element" : {"#" : "toolbar-container"}, |
18 | "repetition": {"@": "buttonList" } | 17 | "repetition": {"@": "buttonList" } |
@@ -36,8 +35,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
36 | }, | 35 | }, |
37 | 36 | ||
38 | "button": { | 37 | "button": { |
39 | "module": "montage/ui/button.reel", | 38 | "prototype": "montage/ui/button.reel", |
40 | "name": "Button", | ||
41 | "properties": { | 39 | "properties": { |
42 | "element": {"#": "button" }, | 40 | "element": {"#": "button" }, |
43 | "label": " " | 41 | "label": " " |
@@ -64,7 +62,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
64 | </script> | 62 | </script> |
65 | </head> | 63 | </head> |
66 | <body> | 64 | <body> |
67 | <div id="toolbar-container" class="toolbar-container"> | 65 | <div data-montage-id="toolbar-container" class="toolbar-container"> |
68 | <ul data-montage-id="repetition"> | 66 | <ul data-montage-id="repetition"> |
69 | <li><button data-montage-id="button" class="toolbar-button"></button></li> | 67 | <li><button data-montage-id="button" class="toolbar-button"></button></li> |
70 | </ul> | 68 | </ul> |
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index bc3cbd08..8f93aa2b 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js | |||
@@ -20,7 +20,7 @@ exports.Toolbar = Montage.create(Component, { | |||
20 | }, | 20 | }, |
21 | set: function(btns) { | 21 | set: function(btns) { |
22 | this._buttons = btns; | 22 | this._buttons = btns; |
23 | this._needsButtonProperties = true; | 23 | this._needsButtonProperties = this.needsDraw = true;; |
24 | } | 24 | } |
25 | }, | 25 | }, |
26 | 26 | ||
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html index bbefc69b..3e15f50b 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html | |||
@@ -14,6 +14,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
14 | "prototype" : "js/panels/css-panel/style-sheets-view.reel", | 14 | "prototype" : "js/panels/css-panel/style-sheets-view.reel", |
15 | "properties" : { | 15 | "properties" : { |
16 | "element" : {"#" : "style-sheets-view-container"}, | 16 | "element" : {"#" : "style-sheets-view-container"}, |
17 | "toolbar" : {"@": "toolbar"}, | ||
17 | "styleSheetList" : {"@" : "styleSheetList"} | 18 | "styleSheetList" : {"@" : "styleSheetList"} |
18 | } | 19 | } |
19 | }, | 20 | }, |
@@ -47,29 +48,30 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
47 | } | 48 | } |
48 | } | 49 | } |
49 | }, | 50 | }, |
50 | "noDocumentCondition": { | 51 | "documentLoaded": { |
51 | "prototype": "montage/ui/condition.reel", | 52 | "prototype": "montage/ui/condition.reel", |
52 | "properties": { | 53 | "properties": { |
53 | "element": {"#": "no-document-message" } | 54 | "element": {"#": "style-sheets-toolbar-container" }, |
55 | "removalStrategy": "hide" | ||
54 | }, | 56 | }, |
55 | "bindings": { | 57 | "bindings": { |
56 | "condition": { | 58 | "condition": { |
57 | "boundObject": {"@": "owner" }, | 59 | "boundObject": {"@": "owner" }, |
58 | "boundObjectPropertyPath": "styleSheets.count()", | 60 | "boundObjectPropertyPath": "documentLoaded", |
59 | "boundValueMutator": {"->": {"arguments": ["val"], "body": "return !val;"}}, | ||
60 | "oneway": true | 61 | "oneway": true |
61 | } | 62 | } |
62 | } | 63 | } |
63 | }, | 64 | }, |
64 | "showToolbarCondition": { | 65 | "hasSheets": { |
65 | "prototype": "montage/ui/condition.reel", | 66 | "prototype": "montage/ui/condition.reel", |
66 | "properties": { | 67 | "properties": { |
67 | "element": {"#": "style-sheets-toolbar-container" } | 68 | "element": {"#": "no-sheets-message" } |
68 | }, | 69 | }, |
69 | "bindings" : { | 70 | "bindings" : { |
70 | "condition": { | 71 | "condition": { |
71 | "boundObject": {"@": "owner"}, | 72 | "boundObject": {"@": "owner"}, |
72 | "boundObjectPropertyPath": "styleSheets.count()", | 73 | "boundObjectPropertyPath": "styleSheets.count()", |
74 | "boundValueMutator": {"->": {"arguments": ["val"], "body": "return !val;"}}, | ||
73 | "oneway": true | 75 | "oneway": true |
74 | } | 76 | } |
75 | } | 77 | } |
@@ -113,7 +115,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
113 | </head> | 115 | </head> |
114 | <body> | 116 | <body> |
115 | <div data-montage-id="style-sheets-view-container" class="style-sheets-view-container"> | 117 | <div data-montage-id="style-sheets-view-container" class="style-sheets-view-container"> |
116 | <h4 data-montage-id="no-document-message" class="panel-message">No style sheets to display.</h4> | 118 | <h4 data-montage-id="no-sheets-message" class="panel-message">No style sheets to display.</h4> |
117 | <ul data-montage-id="sheet-list" class="sheet-list"> | 119 | <ul data-montage-id="sheet-list" class="sheet-list"> |
118 | <li><div data-montage-id="sheet-item"></div></li> | 120 | <li><div data-montage-id="sheet-item"></div></li> |
119 | </ul> | 121 | </ul> |
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 d6ec5349..28b094a7 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,7 +8,7 @@ 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 : { value: true }, | 11 | documentLoaded : { value: false }, |
12 | showToolbar : { value: false }, | 12 | showToolbar : { value: false }, |
13 | stylesController : { value: null }, | 13 | stylesController : { value: null }, |
14 | styleSheets : { value: [] }, | 14 | styleSheets : { value: [] }, |
@@ -17,6 +17,22 @@ exports.StyleSheetsView = Montage.create(Component, { | |||
17 | documentNameLabel : { value: null }, | 17 | documentNameLabel : { value: null }, |
18 | noDocumentLabelClass : { value: "no-document" }, | 18 | noDocumentLabelClass : { value: "no-document" }, |
19 | 19 | ||
20 | _activeDocument: { | ||
21 | value: null | ||
22 | }, | ||
23 | activeDocument : { | ||
24 | get: function() { | ||
25 | return this._activeDocument; | ||
26 | }, | ||
27 | set: function(value) { | ||
28 | if(value === this._activeDocument) { return;} | ||
29 | |||
30 | this.documentLoaded = !!value; | ||
31 | |||
32 | this._activeDocument = value; | ||
33 | } | ||
34 | }, | ||
35 | |||
20 | _documentName : { value: null }, | 36 | _documentName : { value: null }, |
21 | documentName : { | 37 | documentName : { |
22 | get: function() { | 38 | get: function() { |
@@ -99,6 +115,12 @@ exports.StyleSheetsView = Montage.create(Component, { | |||
99 | this.documentName = this.stylesController.activeDocument.name; | 115 | this.documentName = this.stylesController.activeDocument.name; |
100 | this.styleSheets = this.stylesController.userStyleSheets; | 116 | this.styleSheets = this.stylesController.userStyleSheets; |
101 | 117 | ||
118 | Object.defineBinding(this, 'activeDocument', { | ||
119 | 'boundObject': this.stylesController, | ||
120 | 'boundObjectPropertyPath': 'activeDocument', | ||
121 | 'oneway': true | ||
122 | }); | ||
123 | |||
102 | Object.defineBinding(this, 'defaultStyleSheet', { | 124 | Object.defineBinding(this, 'defaultStyleSheet', { |
103 | 'boundObject': this.stylesController, | 125 | 'boundObject': this.stylesController, |
104 | 'boundObjectPropertyPath': 'defaultStylesheet', | 126 | 'boundObjectPropertyPath': 'defaultStylesheet', |