aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-04-30 13:45:52 -0700
committerEric Guzman2012-04-30 13:45:52 -0700
commit4332599afffae987a18bb197fcfdd09bc2e94d2b (patch)
tree81b80385d74ba5c13e1fd4979560f0dc8cf61ad4
parent2b78627d5f5332d01ef9649c9596cc3689b6867b (diff)
downloadninja-4332599afffae987a18bb197fcfdd09bc2e94d2b.tar.gz
CSS Style Rule - Add code for changing selectors and showing unapplied rules
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css19
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html13
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js66
-rw-r--r--js/panels/css-panel/styles-view-mediator.js73
4 files changed, 143 insertions, 28 deletions
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
index 7cde3fd8..03d43ebf 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -4,6 +4,7 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6.css-style-rule-item { 6.css-style-rule-item {
7 min-height: 69px;
7 position: relative; 8 position: relative;
8} 9}
9.css-style-rule-item:after { 10.css-style-rule-item:after {
@@ -14,7 +15,9 @@
14} 15}
15.style-rule-heading { 16.style-rule-heading {
16 background-color: #f3f3f3; 17 background-color: #f3f3f3;
18 /*background-color: #DDDDDD;*/
17 border: 1px #e7e7e7; 19 border: 1px #e7e7e7;
20 /*border: 1px #CCC;*/
18 border-style: solid none; 21 border-style: solid none;
19 box-shadow: inset 0 0 1px #FFF; 22 box-shadow: inset 0 0 1px #FFF;
20 padding: 4px; 23 padding: 4px;
@@ -47,4 +50,20 @@
47 50
48 right: -10px; 51 right: -10px;
49 52
53}
54
55/* -------------------
56 Unapplied Rule
57------------------ */
58.unapplied-css-rule {
59 opacity: .8;
60 background-color: #f3f3f3;
61}
62.unapplied-css-rule .style-rule-heading {
63 background-repeat: no-repeat;
64 background-position: 6px 6px;
65 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
66}
67.unapplied-css-rule .nj-css-selector {
68 margin-left: 16px;
50} \ No newline at end of file 69} \ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
index 1042d29e..bf101719 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -15,6 +15,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
15 "name" : "CssStyleRule", 15 "name" : "CssStyleRule",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "rule-item"}, 17 "element" : {"#" : "rule-item"},
18 "selectorField": {"@": "selector"},
18 "declarationComponent": {"@": "declaration"} 19 "declarationComponent": {"@": "declaration"}
19 } 20 }
20 }, 21 },
@@ -52,6 +53,18 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
52 "name": "Declaration", 53 "name": "Declaration",
53 "properties": { 54 "properties": {
54 "element": {"#": "declaration-list"} 55 "element": {"#": "declaration-list"}
56 },
57 "bindings": {
58 "focusDelegate" : {
59 "boundObject": {"@": "owner"},
60 "boundObjectPropertyPath": "focusDelegate",
61 "oneway": true
62 },
63 "declaration" : {
64 "boundObject": {"@": "owner"},
65 "boundObjectPropertyPath": "_declaration",
66 "oneway": true
67 }
55 } 68 }
56 }, 69 },
57 "sheetLink": { 70 "sheetLink": {
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index d85b5797..ac22878e 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.CssStyleRule = Montage.create(Component, { 10exports.CssStyleRule = Montage.create(Component, {
11 unappliedClass : {
12 value: 'unapplied-css-rule'
13 },
11 cssText: { 14 cssText: {
12 value: null 15 value: null
13 }, 16 },
@@ -17,6 +20,21 @@ exports.CssStyleRule = Montage.create(Component, {
17 focusDelegate : { 20 focusDelegate : {
18 value: null 21 value: null
19 }, 22 },
23 _applied : {
24 value: true,
25 distinct: true
26 },
27 applied : {
28 get: function() {
29 return this._applied;
30 },
31 set: function(value) {
32 if(this._applied === value) { return false; }
33
34 this._applied = value;
35 this.needsDraw = true;
36 }
37 },
20 38
21 _rule : { 39 _rule : {
22 value : null 40 value : null
@@ -44,13 +62,7 @@ exports.CssStyleRule = Montage.create(Component, {
44 }, 62 },
45 declarationComponent: { 63 declarationComponent: {
46 value: null 64 value: null
47 } , 65 },
48// declarationNodeName: {
49// value: "dl"
50// },
51// declarationElement: {
52// value: null
53// },
54 _declaration: { 66 _declaration: {
55 value: null 67 value: null
56 }, 68 },
@@ -65,35 +77,45 @@ exports.CssStyleRule = Montage.create(Component, {
65 condition: { 77 condition: {
66 value: false 78 value: false
67 }, 79 },
68 templateDidLoad : {
69 value: function() {
70 console.log("css style rule : template did load");
71 if(this._declaration) {
72 this.declarationComponent.declaration = this._declaration;
73 }
74 80
81 handleChange : {
82 value: function(e) {
75 if(this.focusDelegate) { 83 if(this.focusDelegate) {
76 this.declarationComponent.focusDelegate = this.focusDelegate; 84 this.focusDelegate.handleSelectorChange(this.rule, this.selectorField.value, this);
77 } 85 }
78 } 86 }
79 }, 87 },
88
89 templateDidLoad : {
90 value: function() {
91 //console.log("css style rule : template did load");
92 }
93 },
80 prepareForDraw : { 94 prepareForDraw : {
81 value: function() { 95 value: function() {
82 console.log("css style rule : prepare for draw"); 96 this.selectorField.addEventListener('change', this, false);
83
84 if(!this.declarationElement) {
85 ///// Create element to contain declaration
86 this.declarationElement = document.createElement(this.declarationNodeName);
87 }
88 97
89 if(!this._declaration && this._rule) { 98 //console.log("css style rule : prepare for draw");
90 99
100 }
101 },
102 willDraw : {
103 value: function() {
104 if(this.applied) {
105 this.element.removeAttribute('title');
106 } else {