diff options
Diffstat (limited to 'js/panels/css-panel/style-sheets-view.reel')
3 files changed, 74 insertions, 10 deletions
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css index e69de29b..dfb67d13 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css | |||
@@ -0,0 +1,19 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | .style-sheets-view-container ul { | ||
7 | margin: 0; | ||
8 | padding: 0; | ||
9 | } | ||
10 | .style-sheets-view-container li { | ||
11 | list-style-type: none; | ||
12 | margin: 0 8px; | ||
13 | } | ||
14 | .style-sheets-view-container li:first-child { | ||
15 | margin-top: 5px; | ||
16 | } | ||
17 | .style-sheets-view-container li:last-child { | ||
18 | margin-bottom: 5px; | ||
19 | } \ No newline at end of file | ||
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 d1dbfa2b..092b189f 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 | |||
@@ -7,13 +7,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | <html lang="en"> | 7 | <html lang="en"> |
8 | <head> | 8 | <head> |
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
10 | <link href="style-sheets-view.css" rel="stylesheet" type="text/css"> | ||
10 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
11 | { | 12 | { |
12 | "owner": { | 13 | "owner": { |
13 | "module" : "js/panels/css-panel/style-sheets-view.reel", | 14 | "module" : "js/panels/css-panel/style-sheets-view.reel", |
14 | "name" : "StyleSheetsView", | 15 | "name" : "StyleSheetsView", |
15 | "properties" : { | 16 | "properties" : { |
16 | "element" : {"#" : "style-sheet-view-container"} | 17 | "element" : {"#" : "style-sheets-view-container"} |
17 | } | 18 | } |
18 | }, | 19 | }, |
19 | "arrayController" : { | 20 | "arrayController" : { |
@@ -28,8 +29,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
28 | } | 29 | } |
29 | }, | 30 | }, |
30 | "styleSheetList": { | 31 | "styleSheetList": { |
31 | "module" : "montage/ui/list.reel", | 32 | "module" : "montage/ui/repetition.reel", |
32 | "name": "List", | 33 | "name": "Repetition", |
33 | "properties": { | 34 | "properties": { |
34 | "element": {"#": "sheet-list" }, | 35 | "element": {"#": "sheet-list" }, |
35 | "contentController": {"@": "arrayController"} | 36 | "contentController": {"@": "arrayController"} |
@@ -58,20 +59,45 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
58 | "bindings": { | 59 | "bindings": { |
59 | "condition": { | 60 | "condition": { |
60 | "boundObject": {"@": "owner" }, | 61 | "boundObject": {"@": "owner" }, |
61 | "boundObjectPropertyPath": "noDocumentCondition", | 62 | "boundObjectPropertyPath": "styleSheets.count()", |
63 | "boundValueMutator": {"->": {"arguments": ["val"], "body": "return !val;"}}, | ||
62 | "oneway": true | 64 | "oneway": true |
63 | } | 65 | } |
64 | } | 66 | } |
67 | }, | ||
68 | "showToolbarCondition": { | ||
69 | "module": "montage/ui/condition.reel", | ||
70 | "name": "Condition", | ||
71 | "properties": { | ||
72 | "element": {"#": "style-sheets-toolbar-container" } | ||
73 | }, | ||
74 | "bindings" : { | ||
75 | "condition": { | ||
76 | "boundObject": {"@": "owner"}, | ||
77 | "boundObjectPropertyPath": "styleSheets.count()", | ||
78 | "oneway": true | ||
79 | } | ||
80 | } | ||
81 | }, | ||
82 | "toolbar": { | ||
83 | "module": "js/components/toolbar.reel", | ||
84 | "name": "Toolbar", | ||
85 | "properties": { | ||
86 | "element": {"#": "style-sheets-toolbar"} | ||
87 | } | ||
65 | } | 88 | } |
66 | } | 89 | } |
67 | </script> | 90 | </script> |
68 | </head> | 91 | </head> |
69 | <body> | 92 | <body> |
70 | <div id="style-sheet-view-container" class="style-sheet-view-container"> | 93 | <div id="style-sheets-view-container" class="style-sheets-view-container"> |
71 | <h3 id="no-document-message">No document loaded. Please Open or Create a new document.</h3> | 94 | <h4 id="no-document-message" class="panel-message">No style sheets to display.</h4> |
72 | <ul id="sheet-list"> | 95 | <ul id="sheet-list"> |
73 | <li><div id="sheet-item"></div></li> | 96 | <li><div id="sheet-item"></div></li> |
74 | </ul> | 97 | </ul> |
98 | <div id="style-sheets-toolbar-container"> | ||
99 | <div id="style-sheets-toolbar"></div> | ||
100 | </div> | ||
75 | </div> | 101 | </div> |
76 | </body> | 102 | </body> |
77 | </html> \ No newline at end of file | 103 | </html> \ No newline at end of file |
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 f8826b18..b1315311 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 | |||
@@ -11,6 +11,9 @@ exports.StyleSheetsView = Montage.create(Component, { | |||
11 | noDocumentCondition : { | 11 | noDocumentCondition : { |
12 | value: true | 12 | value: true |
13 | }, | 13 | }, |
14 | showToolbar : { | ||
15 | value: false | ||
16 | }, | ||
14 | styleSheets : { | 17 | styleSheets : { |
15 | value: [] | 18 | value: [] |
16 | }, | 19 | }, |
@@ -24,18 +27,27 @@ exports.StyleSheetsView = Montage.create(Component, { | |||
24 | this.stylesController = this.application.ninja.stylesController; | 27 | this.stylesController = this.application.ninja.stylesController; |
25 | 28 | ||
26 | this.eventManager.addEventListener("styleSheetsReady", this, false); | 29 | this.eventManager.addEventListener("styleSheetsReady", this, false); |
30 | this.eventManager.addEventListener("newStyleSheet", this, false); | ||
27 | } | 31 | } |
28 | }, | 32 | }, |
33 | _initView : { | ||
34 | value: false | ||
35 | }, | ||
29 | handleStyleSheetsReady : { | 36 | handleStyleSheetsReady : { |
30 | value: function(e) { | 37 | value: function(e) { |
31 | this.noDocumentCondition = false; | 38 | this._initView = this.needsDraw = true; |
32 | 39 | ||
33 | this.stylesController.userStyleSheets.forEach(function(sheet) { | 40 | // this.noDocumentCondition = false; |
34 | this.styleSheets.push(sheet); | 41 | // this.showToolbar = true; |
35 | }, this); | 42 | // this.styleSheets = this.stylesController.userStyleSheets; |
36 | 43 | ||
37 | } | 44 | } |
38 | }, | 45 | }, |
46 | handleNewStyleSheet : { | ||
47 | value: function(e) { | ||
48 | this.styleSheets.push(e._event.detail); | ||
49 | } | ||
50 | }, | ||
39 | prepareForDraw : { | 51 | prepareForDraw : { |
40 | value: function() { | 52 | value: function() { |
41 | console.log("style sheet view - prepare for draw"); | 53 | console.log("style sheet view - prepare for draw"); |
@@ -44,6 +56,13 @@ exports.StyleSheetsView = Montage.create(Component, { | |||
44 | draw : { | 56 | draw : { |
45 | value: function() { | 57 | value: function() { |
46 | console.log("styles sheet view - draw"); | 58 | console.log("styles sheet view - draw"); |
59 | |||
60 | if(this._initView) { | ||
61 | this.noDocumentCondition = false; | ||
62 | this.showToolbar = true; | ||
63 | this.styleSheets = this.stylesController.userStyleSheets; | ||
64 | this._initView = false; | ||
65 | } | ||
47 | } | 66 | } |
48 | } | 67 | } |
49 | }); \ No newline at end of file | 68 | }); \ No newline at end of file |