aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/styles-view-container.reel
diff options
context:
space:
mode:
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.css26
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.html84
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js70
3 files changed, 180 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..5bc34d57
--- /dev/null
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -0,0 +1,26 @@
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 background-color: #FFF;
8 display: -webkit-box;
9 -webkit-box-orient: vertical;
10 -webkit-box-flex: 1;
11}
12.no-styles .sub-panel-slot, .no-styles .styles-view-toolbar-container {
13 display: none;
14}
15.styles-view-container .panel-message {
16 display: none;
17}
18.styles-view-container.no-styles .panel-message {
19 display: block;
20}
21.styles-view-toolbar-container {
22 border-top: 1px solid #303030;
23}
24.styles-view-toolbar-container .toolbar-container {
25 border-top: 1px solid #5c5c5c;
26}
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..658a8bac
--- /dev/null
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
@@ -0,0 +1,84 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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 "stylesViewDelegate" : {
41 "module": "js/panels/css-panel/styles-view-delegate",
42 "name": "StylesViewMediator",
43 "properties": {
44 "ruleListContainer": {"@": "ruleListContainer"}
45 }
46 },
47 "ruleListContainer": {
48 "module": "js/panels/css-panel/rule-list-container.reel",
49 "name": "RuleListContainer",
50 "properties": {
51 "focusDelegate": {"@": "stylesViewDelegate"}
52 }
53 },
54 "computedStyleView": {
55 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
56 "name": "ComputedStyleSubPanel"
57 },
58 "toolbar": {
59 "module": "js/components/toolbar.reel",
60 "name": "Toolbar",
61 "properties": {
62 "element": {"#": "styles-view-toolbar"},
63 "delegate": {"@": "stylesViewDelegate" },
64 "buttons": [
65 {
66 "title": "Add",
67 "identifier": "add"
68 }
69 ]
70 }
71 }
72 }
73 </script>
74</head>
75<body>
76<div id="container" class="styles-view-container">
77 <h4 id="no-styles-message" class="panel-message">No styles to display.</h4>
78 <div id="sub-panel-slot" class="sub-panel-slot"></div>
79 <div class="styles-view-toolbar-container">
80 <div id="styles-view-toolbar"></div>
81 </div>
82</div>
83</body>
84</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..1d6d6075
--- /dev/null
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -0,0 +1,70 @@
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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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 this.eventManager.addEventListener('styleSheetsReady', this, false);
32 this.eventManager.addEventListener('elementChange', 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
44 if(elements.length === 0) {
45 this.hasStyles = false;
46 return false;
47 }
48
49 this.ruleListContainer.displayListForSelection(elements);
50 this.hasStyles = true;
51 }
52 },
53 handleElementChange : {
54 value: function(e) {
55 if(e._event.detail.type !== 'cssChange') {
56 this.ruleListContainer.displayedList.component.update();
57 }
58 }
59 },
60
61 draw : {
62 value: function() {
63 if(this.hasStyles) {
64 this.element.classList.remove('no-styles');
65 } else {
66 this.element.classList.add('no-styles');
67 }
68 }
69 }
70}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 18:35:58 +0000