aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/CSSPanel/css-shorthand-map.js11
-rw-r--r--js/panels/css-panel/styles-view-delegate.js22
-rwxr-xr-xjs/panels/properties.reel/properties.css8
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js2
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;
20var TextField = require("js/components/textfield.reel").TextField; 20var TextField = require("js/components/textfield.reel").TextField;
21var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox; 21var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox;
22var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; 22var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
23var Button = require("montage/ui/button.reel").Button; 23var Button = require("montage/ui/native/button.reel").Button;
24 24
25exports.CustomSection = Montage.create(Component, { 25exports.CustomSection = Montage.create(Component, {
26 26