diff options
author | Eric Guzman | 2012-04-26 03:15:49 -0700 |
---|---|---|
committer | Eric Guzman | 2012-04-26 03:15:49 -0700 |
commit | 143105a0b9c7765898b22d53489b4bd8df3dff2e (patch) | |
tree | 05c6cd14d6400dc2393ebc4465ac3c31c42feb47 /js/panels/css-panel/style.reel | |
parent | f1d4c48cd12d4c1a4a8b8d7ce648ea510607cb88 (diff) | |
download | ninja-143105a0b9c7765898b22d53489b4bd8df3dff2e.tar.gz |
CSS Panel - add handlers for css panel actions
Diffstat (limited to 'js/panels/css-panel/style.reel')
-rw-r--r-- | js/panels/css-panel/style.reel/style.css | 22 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.html | 22 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 126 |
3 files changed, 159 insertions, 11 deletions
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css index f8750eea..ff410951 100644 --- a/js/panels/css-panel/style.reel/style.css +++ b/js/panels/css-panel/style.reel/style.css | |||
@@ -11,7 +11,7 @@ | |||
11 | border-bottom: 1px solid rgba(0,0,0,0); | 11 | border-bottom: 1px solid rgba(0,0,0,0); |
12 | cursor: url(/js/../images/tools/hand_down.png), default; | 12 | cursor: url(/js/../images/tools/hand_down.png), default; |
13 | display: block; | 13 | display: block; |
14 | /*overflow: hidden;*/ | 14 | overflow: hidden; |
15 | white-space: nowrap; | 15 | white-space: nowrap; |
16 | text-overflow: ellipsis; | 16 | text-overflow: ellipsis; |
17 | } | 17 | } |
@@ -21,6 +21,21 @@ | |||
21 | } | 21 | } |
22 | 22 | ||
23 | /* ------------------------ | 23 | /* ------------------------ |
24 | Invalid Style | ||
25 | ------------------------ */ | ||
26 | .style-item-invalid { | ||
27 | background-repeat: no-repeat; | ||
28 | background-position: 6px 2px; | ||
29 | 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); | ||
30 | opacity: 0.5; | ||
31 | } | ||
32 | .style-item.style-item-invalid:hover input { | ||
33 | visibility: hidden; | ||
34 | } | ||
35 | .style-item-invalid.edit-style-item { | ||
36 | opacity: 1; | ||
37 | } | ||
38 | /* ------------------------ | ||
24 | Checkbox | 39 | Checkbox |
25 | ------------------------ */ | 40 | ------------------------ */ |
26 | 41 | ||
@@ -52,6 +67,10 @@ | |||
52 | .css-property:hover, .css-value:hover { | 67 | .css-property:hover, .css-value:hover { |
53 | background-color: #FFDECC; | 68 | background-color: #FFDECC; |
54 | } | 69 | } |
70 | .css-property:focus, .css-value:focus { | ||
71 | border: 1px solid rgba(0,0,0,0); | ||
72 | box-shadow: none; | ||
73 | } | ||
55 | .css-property:after { | 74 | .css-property:after { |
56 | color: #333; | 75 | color: #333; |
57 | content: ":"; | 76 | content: ":"; |
@@ -102,6 +121,7 @@ | |||
102 | cursor: default; | 121 | cursor: default; |
103 | -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99); | 122 | -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99); |
104 | -webkit-transform: translate3d(-120px, 0, 0); | 123 | -webkit-transform: translate3d(-120px, 0, 0); |
124 | overflow: visible; | ||
105 | } | 125 | } |
106 | .empty-css-style:hover { | 126 | .empty-css-style:hover { |
107 | border-right-style: none; | 127 | border-right-style: none; |
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html index 0d438ead..469c7268 100644 --- a/js/panels/css-panel/style.reel/style.html +++ b/js/panels/css-panel/style.reel/style.html | |||
@@ -40,7 +40,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
40 | "name": "Hintable", | 40 | "name": "Hintable", |
41 | "properties": { | 41 | "properties": { |
42 | "startOnEvent": "click", | 42 | "startOnEvent": "click", |
43 | "element": {"#": "property"} | 43 | "element": {"#": "property"}, |
44 | "identifier": "property" | ||
44 | }, | 45 | }, |
45 | "bindings": { | 46 | "bindings": { |
46 | "value" : { | 47 | "value" : { |
@@ -48,14 +49,21 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
48 | "boundObjectPropertyPath": "propertyText", | 49 | "boundObjectPropertyPath": "propertyText", |
49 | "oneway": true | 50 | "oneway": true |
50 | } | 51 | } |
51 | } | 52 | }, |
53 | "listeners": [ | ||
54 | { | ||
55 | "type": "change", | ||
56 | "listener": {"@": "owner"} | ||
57 | } | ||
58 | ] | ||
52 | }, | 59 | }, |
53 | "value": { | 60 | "value": { |
54 | "module": "js/components/hintable.reel", | 61 | "module": "js/components/hintable.reel", |
55 | "name": "Hintable", | 62 | "name": "Hintable", |
56 | "properties": { | 63 | "properties": { |
57 | "startOnEvent": "click", | 64 | "startOnEvent": "click", |
58 | "element": {"#": "value"} | 65 | "element": {"#": "value"}, |
66 | "identifier": "value" | ||
59 | }, | 67 | }, |
60 | "bindings": { | 68 | "bindings": { |
61 | "value" : { | 69 | "value" : { |
@@ -63,7 +71,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
63 | "boundObjectPropertyPath": "valueText", | 71 | "boundObjectPropertyPath": "valueText", |
64 | "oneway": true | 72 | "oneway": true |
65 | } | 73 | } |
66 | } | 74 | }, |
75 | "listeners": [ | ||
76 | { | ||
77 | "type": "change", | ||
78 | "listener": {"@": "owner"} | ||
79 | } | ||
80 | ] | ||
67 | } | 81 | } |
68 | } | 82 | } |
69 | </script> | 83 | </script> |
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js index adf17a84..517d1012 100644 --- a/js/panels/css-panel/style.reel/style.js +++ b/js/panels/css-panel/style.reel/style.js | |||
@@ -8,18 +8,47 @@ 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 : { | ||
12 | value: null | ||
13 | }, | ||
11 | disabledClass : { | 14 | disabledClass : { |
12 | value: 'style-item-disabled' | 15 | value: 'style-item-disabled' |
13 | }, | 16 | }, |
17 | editingStyleClass : { | ||
18 | value: 'edit-style-item' | ||
19 | }, | ||
14 | editNewEmptyClass : { | 20 | editNewEmptyClass : { |
15 | value: 'edit-empty-style' | 21 | value: 'edit-empty-style' |
16 | }, | 22 | }, |
23 | invalidStyleClass : { | ||
24 | value: "style-item-invalid" | ||
25 | }, | ||
17 | propertyText : { | 26 | propertyText : { |
18 | value: "property" | 27 | value: "property" |
19 | }, | 28 | }, |
20 | valueText : { | 29 | _valueText : { |
21 | value: "value" | 30 | value: "value" |
22 | }, | 31 | }, |
32 | valueText : { | ||
33 | get: function() { | ||
34 | return this._valueText; | ||
35 | }, | ||
36 | set: function(text) { | ||
37 | this._valueText = text; | ||
38 | this.units = this.getUnits(text); | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | getUnits : { | ||
43 | value: function(val) { | ||
44 | if(val.split(/\s/).length > 1) { | ||
45 | return false; | ||
46 | } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) { | ||
47 | return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1'); | ||
48 | } | ||
49 | return null; | ||
50 | } | ||
51 | }, | ||
23 | 52 | ||
24 | _enabled : { value: true, distinct: true }, | 53 | _enabled : { value: true, distinct: true }, |
25 | enabled : { | 54 | enabled : { |
@@ -42,6 +71,28 @@ exports.Style = Montage.create(TreeNode, { | |||
42 | } | 71 | } |
43 | }, | 72 | }, |
44 | 73 | ||
74 | _invalid: { value: null }, | ||
75 | invalid : { | ||
76 | get: function() { | ||
77 | return this._invalid; | ||
78 | }, | ||
79 | set: function(value) { | ||
80 | this._invalid = value; | ||
81 | this.needsDraw = true; | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | _editing : { value : null }, | ||
86 | editing : { | ||
87 | get: function() { | ||
88 | return this._editing; | ||
89 | }, | ||
90 | set: function(value) { | ||
91 | this._editing = value; | ||
92 | this.needsDraw = true; | ||
93 | } | ||
94 | }, | ||
95 | |||
45 | _editingNewStyle : { | 96 | _editingNewStyle : { |
46 | value: null | 97 | value: null |
47 | }, | 98 | }, |
@@ -100,7 +151,13 @@ exports.Style = Montage.create(TreeNode, { | |||
100 | handleClick : { | 151 | handleClick : { |
101 | value: function(e) { | 152 | value: function(e) { |
102 | console.log("handleAction"); | 153 | console.log("handleAction"); |
103 | this.editingNewStyle = true; | 154 | this.editingNewStyle = this.editing = true; |
155 | } | ||