aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheets-view.reel
diff options
context:
space:
mode:
authorEric Guzman2012-03-02 10:55:51 -0800
committerEric Guzman2012-03-02 10:55:51 -0800
commit1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d (patch)
tree885ed3352f89e124bca7261d7c0edd4c95d3fff5 /js/panels/css-panel/style-sheets-view.reel
parent53bdb1e7773069c4cca59e88d6da91cd0f58c94a (diff)
downloadninja-1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d.tar.gz
CSS Panel - Updating components, created toolbar components, and small changes to styles controller
Diffstat (limited to 'js/panels/css-panel/style-sheets-view.reel')
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css19
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html38
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js27
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