diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/css-panel/declaration.reel/declaration.js | 32 | ||||
-rw-r--r-- | js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.css | 2 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.html | 8 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 83 | ||||
-rw-r--r-- | js/panels/css-panel/styles-view-container.reel/styles-view-container.html | 2 | ||||
-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 | ||
11 | exports.Declaration = Montage.create(Component, { | 11 | exports.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 | ||
10 | exports.Style = Montage.create(TreeNode, { | 10 | exports.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 | } | ||
209 | } | 221 | } |
210 | }, | 222 | }, |
211 | 223 | ||
212 | //// Handler for both hintable components | 224 | //// Handler for both hintable components |
213 | handleStop : { | 225 | handlePropertyStop : { |
226 | value: function(e) { | ||