diff options
Diffstat (limited to 'js/panels')
-rwxr-xr-x | js/panels/CSSPanel/css-shorthand-map.js | 11 | ||||
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 22 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.css | 8 | ||||
-rwxr-xr-x | js/panels/properties.reel/sections/custom.reel/custom.js | 2 |
4 files changed, 32 insertions, 11 deletions
diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js index d469e2a1..e38627f7 100755 --- a/js/panels/CSSPanel/css-shorthand-map.js +++ b/js/panels/CSSPanel/css-shorthand-map.js | |||
@@ -68,7 +68,15 @@ exports.CSS_SHORTHAND_MAP = { | |||
68 | 'padding-left' : ['padding'], | 68 | 'padding-left' : ['padding'], |
69 | 'padding-right' : ['padding'], | 69 | 'padding-right' : ['padding'], |
70 | 'padding-top' : ['padding'], | 70 | 'padding-top' : ['padding'], |
71 | 71 | ||
72 | '-webkit-animation-name' : ['-webkit-animation'], | ||
73 | '-webkit-animation-duration' : ['-webkit-animation'], | ||
74 | '-webkit-animation-timing-function' : ['-webkit-animation'], | ||
75 | '-webkit-animation-delay' : ['-webkit-animation'], | ||
76 | '-webkit-animation-iteration-count' : ['-webkit-animation'], | ||
77 | '-webkit-animation-direction' : ['-webkit-animation'], | ||
78 | '-webkit-animation-fill-mode' : ['-webkit-animation'], | ||
79 | |||
72 | '-webkit-transition-property' : ['-webkit-transition'], | 80 | '-webkit-transition-property' : ['-webkit-transition'], |
73 | '-webkit-transition-duration' : ['-webkit-transition'], | 81 | '-webkit-transition-duration' : ['-webkit-transition'], |
74 | '-webkit-transition-timing-function' : ['-webkit-transition'], | 82 | '-webkit-transition-timing-function' : ['-webkit-transition'], |
@@ -91,6 +99,7 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { | |||
91 | 'list' : ["list-style-type", "list-style-image", "list-style-position"], | 99 | 'list' : ["list-style-type", "list-style-image", "list-style-position"], |
92 | 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], | 100 | 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], |
93 | 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], | 101 | 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], |
102 | '-webkit-animation': ["webkit-animation-name", "webkit-animation-duration", "webkit-animation-timing-function", "webkit-animation-delay", "webkit-animation-iteration-count", "webkit-animation-direction", "webkit-animation-fill-mode"], | ||
94 | '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", | 103 | '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", |
95 | "-webkit-transition-timing-function", "-webkit-transition-delay"] | 104 | "-webkit-transition-timing-function", "-webkit-transition-delay"] |
96 | }; \ No newline at end of file | 105 | }; \ No newline at end of file |
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index a7c1f0d9..4f41ff12 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -171,7 +171,8 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
171 | }, | 171 | }, |
172 | handlePropertyChange : { | 172 | handlePropertyChange : { |
173 | value: function(rule, property, value, oldProperty, style) { | 173 | value: function(rule, property, value, oldProperty, style) { |
174 | var browserValue; | 174 | var declaration = style.parentComponent.parentComponent, |
175 | browserValue; | ||
175 | 176 | ||
176 | if(style.editingNewStyle) { | 177 | if(style.editingNewStyle) { |
177 | if(property === '') { | 178 | if(property === '') { |
@@ -187,14 +188,17 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
187 | 188 | ||
188 | if(property === '') { | 189 | if(property === '') { |
189 | style.deleting = true; | 190 | style.deleting = true; |
190 | style.parentComponent.parentComponent.removeStyle(style.source); | 191 | declaration.removeStyle(style.source); |
191 | this._dispatchChange(oldProperty, browserValue); | 192 | this._dispatchChange(oldProperty); |
192 | return false; | 193 | return false; |
193 | } | 194 | } |
194 | 195 | ||
195 | // now add new property | 196 | // now add new property |
196 | browserValue = this.stylesController.setStyle(rule, property, value); | 197 | browserValue = this.stylesController.setStyle(rule, property, value); |
197 | 198 | ||
199 | //// Update the css text so it knows when to update | ||
200 | declaration.cssText = rule.style.cssText; | ||
201 | |||
198 | ///// Mark style as invalid if the browser doesn't accept it | 202 | ///// Mark style as invalid if the browser doesn't accept it |
199 | style.invalid = (browserValue === null); | 203 | style.invalid = (browserValue === null); |
200 | 204 | ||
@@ -203,13 +207,18 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
203 | }, | 207 | }, |
204 | handleValueChange : { | 208 | handleValueChange : { |
205 | value: function(rule, property, value, style) { | 209 | value: function(rule, property, value, style) { |
206 | var browserValue, units; | 210 | var declaration = style.parentComponent.parentComponent, |
211 | browserValue, units; | ||
207 | 212 | ||
208 | if(value === '') { | 213 | if(value === '') { |
209 | ///// Remove old property | 214 | ///// Remove old property |
210 | style.deleting = true; | 215 | style.deleting = true; |
211 | this.stylesController.deleteStyle(rule, property); | 216 | this.stylesController.deleteStyle(rule, property); |
212 | style.parentComponent.parentComponent.removeStyle(style.source); | 217 | declaration.removeStyle(style.source); |
218 | |||
219 | //// Update the css text so it knows when to update | ||
220 | declaration.cssText = rule.style.cssText; | ||
221 | |||
213 | this._dispatchChange(property, browserValue); | 222 | this._dispatchChange(property, browserValue); |
214 | return false; | 223 | return false; |
215 | } | 224 | } |
@@ -218,6 +227,9 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
218 | browserValue = this.stylesController.setStyle(rule, property, value); | 227 | browserValue = this.stylesController.setStyle(rule, property, value); |
219 | style.browserValue = browserValue; | 228 | style.browserValue = browserValue; |
220 | 229 | ||
230 | //// Update the css text so it knows when to update | ||
231 | declaration.cssText = rule.style.cssText; | ||
232 | |||
221 | ///// Mark style as invalid if the browser doesn't accept it | 233 | ///// Mark style as invalid if the browser doesn't accept it |
222 | style.invalid = (browserValue === null); | 234 | style.invalid = (browserValue === null); |
223 | 235 | ||
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index d1aa750a..786eb57a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -314,11 +314,11 @@ input label { | |||
314 | width:45px; | 314 | width:45px; |
315 | } | 315 | } |
316 | 316 | ||
317 | .propertiesPanel div.montage-button:disabled { | 317 | .propertiesPanel div[type=button]:disabled { |
318 | opacity: 0.4; | 318 | opacity: 0.4; |
319 | } | 319 | } |
320 | 320 | ||
321 | .propertiesPanel div.montage-button { | 321 | .propertiesPanel div[type=button] { |
322 | font-size: 9px; | 322 | font-size: 9px; |
323 | cursor: pointer; | 323 | cursor: pointer; |
324 | display: block; | 324 | display: block; |
@@ -336,10 +336,10 @@ input label { | |||
336 | height: 14px; | 336 | height: 14px; |
337 | } | 337 | } |
338 | 338 | ||
339 | .propertiesPanel div.montage-button:active { | 339 | .propertiesPanel div[type=button]:active { |
340 | background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); | 340 | background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); |
341 | } | 341 | } |
342 | 342 | ||
343 | .propertiesPanel div.montage-button:hover { | 343 | .propertiesPanel div[type=button]:hover { |
344 | -webkit-box-shadow: 0px 0px 3px #b4b4b4; | 344 | -webkit-box-shadow: 0px 0px 3px #b4b4b4; |
345 | } \ No newline at end of file | 345 | } \ No newline at end of file |
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 5112fca9..ed4616da 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js | |||
@@ -20,7 +20,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox; | |||
20 | var TextField = require("js/components/textfield.reel").TextField; | 20 | var TextField = require("js/components/textfield.reel").TextField; |
21 | var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox; | 21 | var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox; |
22 | var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; | 22 | var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; |
23 | var Button = require("montage/ui/button.reel").Button; | 23 | var Button = require("montage/ui/native/button.reel").Button; |
24 | 24 | ||
25 | exports.CustomSection = Montage.create(Component, { | 25 | exports.CustomSection = Montage.create(Component, { |
26 | 26 | ||