aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-05-02 15:30:27 -0700
committerEric Guzman2012-05-02 15:30:27 -0700
commit8bea1e0807f36595d762592c030d4810396ada85 (patch)
tree44e1bc9e270fe84437f0ac90824c56cabfaeb701 /js/panels/css-panel
parent2d31bce1b35001dfb7d1f63838abe8db1ddf019b (diff)
downloadninja-8bea1e0807f36595d762592c030d4810396ada85.tar.gz
CSS Panel - Add focus management to styles view delegate
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js32
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js2
-rw-r--r--js/panels/css-panel/style.reel/style.css2
-rw-r--r--js/panels/css-panel/style.reel/style.html8
-rw-r--r--js/panels/css-panel/style.reel/style.js83
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.html2
-rw-r--r--js/panels/css-panel/styles-view-delegate.js (renamed from js/panels/css-panel/styles-view-mediator.js)51
7 files changed, 147 insertions, 33 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 873d2ce4..8ab19ad6 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage,
9 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); 9 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
10 10
11exports.Declaration = Montage.create(Component, { 11exports.Declaration = Montage.create(Component, {
12 cssText : {
13 value: null
14 },
12 focusDelegate : { 15 focusDelegate : {
13 value: null 16 value: null
14 }, 17 },
@@ -42,6 +45,8 @@ exports.Declaration = Montage.create(Component, {
42 set: function(dec) { 45 set: function(dec) {
43 this._declaration = dec; 46 this._declaration = dec;
44 47
48 this.cssText = dec.cssText;
49
45 ///// creates data structure to use with tree component 50 ///// creates data structure to use with tree component
46 this.buildStyleTree(); 51 this.buildStyleTree();
47 52
@@ -52,11 +57,34 @@ exports.Declaration = Montage.create(Component, {
52 "isEmpty": true 57 "isEmpty": true
53 }); 58 });
54 } 59 }
55//debugger; 60
56 this.needsDraw = true; 61 this.needsDraw = true;
57 } 62 }
58 }, 63 },
59 64
65 update : {
66 value: function() {
67 if(this.declaration.cssText !== this.cssText) {
68 ///// Needs update
69 this.treeController.branchControllers[0].content.forEach(function(obj) {
70 this.treeController.branchControllers[0].removeObjects(obj);
71 }, this );
72
73 this.buildStyleTree();
74
75 if(this.includeEmptyStyle) {
76 this.styleTree.properties.push({
77 "name": "property",
78 "value" : "value",
79 "isEmpty": true
80 });
81 }
82//debugger;
83 this.needsDraw = true;
84 }
85 }
86 },
87
60 buildStyleTree : { 88 buildStyleTree : {
61 value: function() { 89 value: function() {
62 var styles = Array.prototype.slice.call(this._declaration).sort(); 90 var styles = Array.prototype.slice.call(this._declaration).sort();
@@ -124,8 +152,6 @@ exports.Declaration = Montage.create(Component, {
124 152
125 addNewStyleAfter : { 153 addNewStyleAfter : {
126 value: function(style) { 154 value: function(style) {
127 //this.treeController.branchControllers[0].addObjects({
128 foo1 = style.parentComponent.parentComponent;
129 style.parentComponent.parentComponent.contentController.addObjects({ 155 style.parentComponent.parentComponent.contentController.addObjects({
130 name: 'property', 156 name: 'property',
131 value: 'value', 157 value: 'value',
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 7b5a736f..cfa3e605 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
@@ -90,7 +90,7 @@ exports.CssStyleRule = Montage.create(Component, {
90 value: function() { 90 value: function() {
91 if(this.cssText !== this.rule.cssText) { 91 if(this.cssText !== this.rule.cssText) {
92 // TODO: add update for selector and stylesheet name 92 // TODO: add update for selector and stylesheet name
93 this.declarationComponent.update(); 93 //this.declarationComponent.update();
94 } 94 }
95 } 95 }
96 }, 96 },
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index c6bb070c..6864e245 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -111,7 +111,7 @@
111 right: -1px; 111 right: -1px;
112} 112}
113.style-item .hintable-hint { 113.style-item .hintable-hint {
114 color: #CCC; 114 color: #bdbdbd;
115} 115}
116 116
117/* ------------------------ 117/* ------------------------
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index acc169be..9830a21e 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -58,6 +58,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
58 { 58 {
59 "type": "change", 59 "type": "change",
60 "listener": {"@": "owner"} 60 "listener": {"@": "owner"}
61 },
62 {
63 "type": "stop",
64 "listener": {"@": "owner"}
61 } 65 }
62 ] 66 ]
63 }, 67 },
@@ -80,6 +84,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
80 { 84 {
81 "type": "change", 85 "type": "change",
82 "listener": {"@": "owner"} 86 "listener": {"@": "owner"}
87 },
88 {
89 "type": "stop",
90 "listener": {"@": "owner"}
83 } 91 }
84 ] 92 ]
85 } 93 }
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index c73da6e5..1d5a11a5 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,27 +8,14 @@ var Montage = require("montage/core/core").Montage,
8 TreeNode = require("js/components/treeview/tree-node").TreeNode; 8 TreeNode = require("js/components/treeview/tree-node").TreeNode;
9 9
10exports.Style = Montage.create(TreeNode, { 10exports.Style = Montage.create(TreeNode, {
11 delegate : { 11 delegate : { value: null },
12 value: null 12 disabledClass : { value: 'style-item-disabled' },
13 }, 13 editingStyleClass : { value: 'edit-style-item' },
14 disabledClass : { 14 editNewEmptyClass : { value: 'edit-empty-style' },
15 value: 'style-item-disabled' 15 invalidStyleClass : { value: "style-item-invalid" },
16 }, 16
17 editingStyleClass : { 17 propertyText : { value: "property" },
18 value: 'edit-style-item' 18 _valueText : { value: "value" },
19 },
20 editNewEmptyClass : {
21 value: 'edit-empty-style'
22 },
23 invalidStyleClass : {
24 value: "style-item-invalid"
25 },
26 propertyText : {
27 value: "property"
28 },
29 _valueText : {
30 value: "value"
31 },
32 valueText : { 19 valueText : {
33 get: function() { 20 get: function() {
34 return this._valueText; 21 return this._valueText;
@@ -158,6 +145,27 @@ exports.Style = Montage.create(TreeNode, {
158 } 145 }
159 }, 146 },
160 147
148 getSiblingStyle : {
149 value: function(which) {
150 var styles = this.parentComponent.parentComponent.childComponents.map(function(sub){
151 return sub.childComponents[0];
152 }),
153 index = styles.indexOf(this);
154
155 switch (which) {
156 case "first":
157 return styles[0];
158 case "last":
159 return styles[styles.length-1];
160 case "next":
161 return (index+1 < styles.length) ? styles[index+1] : null;
162 case "prev":
163 return (index-1 >= 0) ? styles[index-1] : null;
164 }
165 }
166 },
167
168
161 handleEvent : { 169 handleEvent : {
162 value: function(e) { 170 value: function(e) {
163 console.log(e); 171 console.log(e);
@@ -206,11 +214,40 @@ exports.Style = Montage.create(TreeNode, {
206 handleStart : { 214 handleStart : {
207 value: function(e) { 215 value: function(e) {
208 this.editing = true; 216 this.editing = true;
217
218 if(this.empty) {
219 this.editingNewStyle = true;
220 }