aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/styles-view-container.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/styles-view-container.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/styles-view-container.reel')
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.css34
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.html71
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js133
3 files changed, 194 insertions, 44 deletions
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
index 1d3baa5c..326254ed 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -1,11 +1,25 @@
1.styles-view-container h3 { 1/* <copyright>
2 background-color: rgba(255,255,255, 0.1); 2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 border: 1px dashed rgba(255,255,255, 0.2); 3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 border-radius: 4px; 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 color: #CCC; 5 </copyright> */
6 font-size: 11px; 6.sub-panel-slot {
7 font-weight: normal; 7 display: -webkit-box;
8 margin: 5px; 8 -webkit-box-orient: vertical;
9 padding: 10px; 9 -webkit-box-flex: 1;
10 text-shadow: 1px 1px 0px #333; 10}
11.no-styles .sub-panel-slot, .no-styles .styles-view-toolbar-container {
12 display: none;
13}
14.styles-view-container .panel-message {
15 display: none;
16}
17.styles-view-container.no-styles .panel-message {
18 display: block;
19}
20.styles-view-toolbar-container {
21 border-top: 1px solid #303030;
22}
23.styles-view-toolbar-container .toolbar-container {
24 border-top: 1px solid #5c5c5c;
11} \ No newline at end of file 25} \ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
index 17ba6326..97c7c889 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
@@ -7,13 +7,15 @@ 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="styles-view-container.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/styles-view-container.reel", 14 "module" : "js/panels/css-panel/styles-view-container.reel",
14 "name" : "StylesViewContainer", 15 "name" : "StylesViewContainer",
15 "properties" : { 16 "properties" : {
16 "element" : {"#" : "container"} 17 "element" : {"#" : "container"},
18 "ruleList": {"@": "ruleList" }
17 } 19 }
18 }, 20 },
19 "substitution": { 21 "substitution": {
@@ -22,46 +24,53 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
22 "properties": { 24 "properties": {
23 "element": {"#": "sub-panel-slot"}, 25 "element": {"#": "sub-panel-slot"},
24 "switchComponents": { 26 "switchComponents": {
25 "rules": {"@": "ruleListCollection"}, 27 "rules": {"@": "ruleList"},
26 "computed": {"@": "computedStyleView"} 28 "computed": {"@": "computedStyleView"}
29 }
30 },
31 "bindings": {
32 "switchValue": {
33 "boundObject": {"@": "owner"},
34 "boundObjectPropertyPath": "contentPanel",
35 "oneway": true
36 }
27 } 37 }
28 }, 38 },
29 "bindings": { 39 "ruleList": {
30 "switchValue": { 40 "module" : "js/panels/css-panel/rule-list.reel",
31 "boundObject": {"@": "owner"}, 41 "name": "RuleList",
32 "boundObjectPropertyPath": "contentPanel", 42 "properties": {
33 "oneway": true 43 "supportedRules" : {
34 } 44 "1" : {"@": "css-style-rule"},
35 } 45 "3" : {"@": "css-import-rule"},
36 }, 46 "4" : {"@": "css-media-rule"},
37 "ruleListCollection": { 47 "5" : {"@": "css-font-face-rule"},
38 "module" : "montage/ui/list.reel", 48 "6" : {"@": "css-page-rule"},
39 "name": "List", 49 "10" : {"@": "namespace-rule"}
40 "properties": { }, 50 }
51 },
41 "bindings": { 52 "bindings": {
42 "list": { 53 "contentController" : {
43 "boundObject": {"@": "owner" }, 54 "boundObject": {"@": "owner"},
44 "boundObjectPropertyPath": "displayedList" 55 "boundObjectPropertyPath": "contentController",
56 "oneway": true
45 } 57 }
46 } 58 }
47 }, 59 },
60 "css-style-rule": {
61 "module": "js/panels/css-panel/rule-components/css-style-rule.reel",
62 "name": "CssStyleRule"
63 },
48 "computedStyleView": { 64 "computedStyleView": {
49 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", 65 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
50 "name": "ComputedStyleSubPanel", 66 "name": "ComputedStyleSubPanel",
51 "properties": { } 67 "properties": { }
52 }, 68 },
53 "noDocumentCondition": { 69 "toolbar": {
54 "module": "montage/ui/condition.reel", 70 "module": "js/components/toolbar.reel",
55 "name": "Condition", 71 "name": "Toolbar",
56 "properties": { 72 "properties": {
57 "element": {"#": "no-document-message" } 73 "element": {"#": "styles-view-toolbar"}
58 },
59 "bindings": {
60 "condition": {
61 "boundObject": {"@": "owner" },
62 "boundObjectPropertyPath": "noDocumentCondition",
63 "oneway": true
64 }
65 } 74 }
66 } 75 }
67 } 76 }
@@ -69,8 +78,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
69</head> 78</head>
70<body> 79<body>
71<div id="container" class="styles-view-container"> 80<div id="container" class="styles-view-container">
72 <div id="sub-panel-slot"> 81 <h4 id="no-styles-message" class="panel-message">No styles to display.</h4>
73 <h3 id="no-document-message">No document loaded. Please Open or Create a new document.</h3> 82 <div id="sub-panel-slot" class="sub-panel-slot"></div>
83 <div class="styles-view-toolbar-container">
84 <div id="styles-view-toolbar"></div>
74 </div> 85 </div>
75</div> 86</div>
76</body> 87</body>
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index 41e16192..6164a14c 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -8,28 +8,153 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.StylesViewContainer = Montage.create(Component, { 10exports.StylesViewContainer = Montage.create(Component, {
11 noDocumentCondition : { 11 noStylesCondition : {
12 value: true 12 value: true
13 }, 13 },
14 contentController : {
15 value: null
16 },
14 contentPanel : { 17 contentPanel : {
15 value: 'rules' 18 value: 'rules'
16 }, 19 },
17 displayedList : { 20 _hasStyles : {
18 value: null 21 value: false
19 }, 22 },
20 deserializedFromTemplate : { 23 hasStyles : {
24 get: function() {
25 return this._hasStyles;
26 },
27 set: function(hasThem) {
28