diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-container.reel')
3 files changed, 193 insertions, 0 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 new file mode 100644 index 00000000..0b1aa892 --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css | |||
@@ -0,0 +1,25 @@ | |||
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 | .sub-panel-slot { | ||
7 | display: -webkit-box; | ||
8 | -webkit-box-orient: vertical; | ||
9 | -webkit-box-flex: 1; | ||
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; | ||
25 | } | ||
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 new file mode 100644 index 00000000..e8ddb139 --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html | |||
@@ -0,0 +1,67 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link href="styles-view-container.css" rel="stylesheet" type="text/css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module" : "js/panels/css-panel/styles-view-container.reel", | ||
15 | "name" : "StylesViewContainer", | ||
16 | "properties" : { | ||
17 | "element" : {"#" : "container"}, | ||
18 | "ruleListContainer": {"@": "ruleListContainer" }, | ||
19 | "substitution": {"@": "substitution" } | ||
20 | } | ||
21 | }, | ||
22 | "substitution": { | ||
23 | "module": "montage/ui/substitution.reel", | ||
24 | "name": "Substitution", | ||
25 | "properties": { | ||
26 | "element": {"#": "sub-panel-slot"}, | ||
27 | "switchComponents": { | ||
28 | "rules": {"@": "ruleListContainer"}, | ||
29 | "computed": {"@": "computedStyleView"} | ||
30 | } | ||
31 | }, | ||
32 | "bindings": { | ||
33 | "switchValue": { | ||
34 | "boundObject": {"@": "owner"}, | ||
35 | "boundObjectPropertyPath": "contentPanel", | ||
36 | "oneway": true | ||
37 | } | ||
38 | } | ||
39 | }, | ||
40 | "ruleListContainer": { | ||
41 | "module": "js/panels/css-panel/rule-list-container.reel", | ||
42 | "name": "RuleListContainer" | ||
43 | }, | ||
44 | "computedStyleView": { | ||
45 | "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", | ||
46 | "name": "ComputedStyleSubPanel" | ||
47 | }, | ||
48 | "toolbar": { | ||
49 | "module": "js/components/toolbar.reel", | ||
50 | "name": "Toolbar", | ||
51 | "properties": { | ||
52 | "element": {"#": "styles-view-toolbar"} | ||
53 | } | ||
54 | } | ||
55 | } | ||
56 | </script> | ||
57 | </head> | ||
58 | <body> | ||
59 | <div id="container" class="styles-view-container"> | ||
60 | <h4 id="no-styles-message" class="panel-message">No styles to display.</h4> | ||
61 | <div id="sub-panel-slot" class="sub-panel-slot"></div> | ||
62 | <div class="styles-view-toolbar-container"> | ||
63 | <div id="styles-view-toolbar"></div> | ||
64 | </div> | ||
65 | </div> | ||
66 | </body> | ||
67 | </html> \ No newline at end of file | ||
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 new file mode 100644 index 00000000..7df39d39 --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js | |||
@@ -0,0 +1,101 @@ | |||
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 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.StylesViewContainer = Montage.create(Component, { | ||
11 | contentController : { | ||
12 | value: null | ||
13 | }, | ||
14 | contentPanel : { | ||
15 | value: 'rules' | ||
16 | }, | ||
17 | _hasStyles : { | ||
18 | value: false | ||
19 | }, | ||
20 | hasStyles : { | ||
21 | get: function() { | ||
22 | return this._hasStyles; | ||
23 | }, | ||
24 | set: function(hasThem) { | ||
25 | this._hasStyles = hasThem; | ||
26 | this.needsDraw = true; | ||
27 | } | ||
28 | }, | ||
29 | templateDidLoad : { | ||
30 | value: function() { | ||
31 | console.log("styles view container - deserialized"); | ||
32 | this.eventManager.addEventListener('styleSheetsReady', this, false); | ||
33 | } | ||
34 | }, | ||
35 | handleStyleSheetsReady: { | ||
36 | value: function(e) { | ||
37 | this.eventManager.addEventListener( "selectionChange", this, false); | ||
38 | } | ||
39 | }, | ||
40 | handleSelectionChange: { | ||
41 | value: function() { | ||
42 | var elements = this.application.ninja.selectedElements, | ||
43 | type, selection, ruleList; | ||
44 | |||
45 | if(elements.length === 0) { | ||
46 | return false; | ||
47 | } else if(elements.length > 1) { | ||
48 | type = 'ELEMENTS'; | ||
49 | selection = elements; | ||
50 | } else { | ||
51 | type = 'ELEMENT'; | ||
52 | selection = elements[0]; | ||
53 | } | ||
54 | |||
55 | ruleList = this.ruleListContainer._getRuleList({ | ||
56 | selectionType : type, | ||
57 | selection : selection | ||
58 | }); | ||
59 | |||
60 | if(ruleList) { | ||
61 | this.ruleListContainer.displayedList = ruleList; | ||
62 | } else { | ||
63 | this.ruleListContainer.add(type, selection); | ||
64 | } | ||
65 | |||
66 | this.hasStyles = true; | ||
67 | } | ||
68 | }, | ||
69 | |||
70 | _ruleList : { | ||
71 | value: [] | ||
72 | }, | ||
73 | ruleList : { | ||
74 | get: function() { | ||
75 | return this._ruleList; | ||
76 | }, | ||
77 | set: function(list) { | ||
78 | if(!list) { | ||
79 | this._ruleList.length = 0; | ||
80 | return; | ||
81 | } | ||
82 | |||
83 | this._ruleList = list; | ||
84 | this.needsDraw = true; | ||
85 | } | ||
86 | }, | ||
87 | prepareForDraw : { | ||
88 | value: function() { | ||
89 | console.log("styles view container - prepare for draw"); | ||
90 | } | ||
91 | }, | ||
92 | draw : { | ||
93 | value: function() { | ||
94 | if(this.hasStyles) { | ||
95 | this.element.classList.remove('no-styles'); | ||
96 | } else { | ||
97 | this.element.classList.add('no-styles'); | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | }); \ No newline at end of file | ||