diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/editable.reel/editable.js | 6 | ||||
-rw-r--r-- | js/panels/css-panel/style-shorthand.reel/style-shorthand.css | 4 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.css | 32 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.html | 30 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 22 |
5 files changed, 80 insertions, 14 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 9c8946c4..ef4096fd 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js | |||
@@ -122,7 +122,7 @@ exports.Editable = Montage.create(Component, { | |||
122 | if(this.stopOnBlur) { | 122 | if(this.stopOnBlur) { |
123 | console.log('adding mousedown event listener'); | 123 | console.log('adding mousedown event listener'); |
124 | ///// Simulate blur on editable node by listening to the doc | 124 | ///// Simulate blur on editable node by listening to the doc |
125 | document.addEventListener('mouseup', this, false); | 125 | document.addEventListener('mousedown', this, false); |
126 | } | 126 | } |
127 | 127 | ||
128 | this._sendEvent('start'); | 128 | this._sendEvent('start'); |
@@ -179,7 +179,7 @@ exports.Editable = Montage.create(Component, { | |||
179 | this.accept(); | 179 | this.accept(); |
180 | } | 180 | } |
181 | this.stop(); | 181 | this.stop(); |
182 | document.removeEventListener('mouseup', this, false); | 182 | document.removeEventListener('mousedown', this, false); |
183 | this._sendEvent('blur'); | 183 | this._sendEvent('blur'); |
184 | } | 184 | } |
185 | }, | 185 | }, |
@@ -202,7 +202,7 @@ exports.Editable = Montage.create(Component, { | |||
202 | this._sendEvent('input'); | 202 | this._sendEvent('input'); |
203 | } | 203 | } |
204 | }, | 204 | }, |
205 | handleMouseup : { | 205 | handleMousedown : { |
206 | value : function(e) { | 206 | value : function(e) { |
207 | console.log('handle mouse down'); | 207 | console.log('handle mouse down'); |
208 | ///// Listen for simulated blur event | 208 | ///// Listen for simulated blur event |
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css index 52f5a3c1..b77994a4 100644 --- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css +++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css | |||
@@ -7,9 +7,7 @@ | |||
7 | .css-tree-branch { | 7 | .css-tree-branch { |
8 | /*padding-left: 10px;*/ | 8 | /*padding-left: 10px;*/ |
9 | } | 9 | } |
10 | .style-item { | 10 | |
11 | padding-left: 20px; | ||
12 | } | ||
13 | .css-tree-branch .css-tree-branch { | 11 | .css-tree-branch .css-tree-branch { |
14 | padding-left: 20px; | 12 | padding-left: 20px; |
15 | margin-top: 0; | 13 | margin-top: 0; |
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css index 4673ab69..9a877b5d 100644 --- a/js/panels/css-panel/style.reel/style.css +++ b/js/panels/css-panel/style.reel/style.css | |||
@@ -5,11 +5,23 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | .style-item { | 7 | .style-item { |
8 | display: block; | ||
8 | overflow: hidden; | 9 | overflow: hidden; |
9 | white-space: nowrap; | 10 | white-space: nowrap; |
10 | text-overflow: ellipsis; | 11 | text-overflow: ellipsis; |
11 | } | 12 | } |
12 | 13 | .style-item input { | |
14 | height: 10px; | ||
15 | width: 10px; | ||
16 | margin: 0 6px; | ||
17 | visibility: hidden; | ||
18 | } | ||
19 | .style-item:hover input, .style-item-disabled input { | ||
20 | visibility: visible; | ||
21 | } | ||
22 | .style-item-disabled { | ||
23 | opacity: .5; | ||
24 | } | ||
13 | .css-property, .css-value { | 25 | .css-property, .css-value { |
14 | border: 1px solid rgba(0,0,0,0); | 26 | border: 1px solid rgba(0,0,0,0); |
15 | border-radius: 2px; | 27 | border-radius: 2px; |
@@ -17,6 +29,9 @@ | |||
17 | outline: none; | 29 | outline: none; |
18 | padding: 0 2px; | 30 | padding: 0 2px; |
19 | } | 31 | } |
32 | .css-property:hover, .css-value:hover { | ||
33 | background-color: #FFDECC; | ||
34 | } | ||
20 | .css-property:after { | 35 | .css-property:after { |
21 | color: #333; | 36 | color: #333; |
22 | content: ":"; | 37 | content: ":"; |
@@ -33,4 +48,19 @@ | |||
33 | } | 48 | } |
34 | .css-value { | 49 | .css-value { |
35 | display: inline; | 50 | display: inline; |
51 | } | ||
52 | .style-item .editable { | ||
53 | border: 1px solid #999; | ||
54 | box-shadow: 1px 1px 1px #CCC; | ||
55 | color: #333; | ||
56 | display: inline-block; | ||
57 | margin-right: 7px; | ||
58 | max-width: none; | ||
59 | overflow: visible; | ||
60 | -webkit-user-select: text; | ||
61 | } | ||
62 | .style-item .editable:after { | ||
63 | position: relative; | ||
64 | margin-right: -7px; | ||
65 | right: -1px; | ||
36 | } \ No newline at end of file | 66 | } \ No newline at end of file |
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html index f636ef6b..6cecf43e 100644 --- a/js/panels/css-panel/style.reel/style.html +++ b/js/panels/css-panel/style.reel/style.html | |||
@@ -17,10 +17,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
17 | "element" : {"#" : "container"} | 17 | "element" : {"#" : "container"} |
18 | } | 18 | } |
19 | }, | 19 | }, |
20 | "checkbox": { | ||
21 | "module": "montage/ui/checkbox.reel", | ||
22 | "name": "Checkbox", | ||
23 | "properties": { | ||
24 | "element": {"#": "disable-checkbox"}, | ||
25 | "checked": true | ||
26 | }, | ||
27 | "bindings": { | ||
28 | "checked" : { | ||
29 | "boundObject": {"@": "owner"}, | ||
30 | "boundObjectPropertyPath": "enabled", | ||
31 | "oneway": false | ||
32 | } | ||
33 | } | ||
34 | }, | ||
20 | "property": { | 35 | "property": { |
21 | "module": "montage/ui/dynamic-text.reel", | 36 | "module": "js/components/hintable.reel", |
22 | "name": "DynamicText", | 37 | "name": "Hintable", |
23 | "properties": { | 38 | "properties": { |
39 | "startOnEvent": "click", | ||
24 | "element": {"#": "property"} | 40 | "element": {"#": "property"} |
25 | }, | 41 | }, |
26 | "bindings": { | 42 | "bindings": { |
@@ -32,9 +48,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
32 | } | 48 | } |
33 | }, | 49 | }, |
34 | "value": { | 50 | "value": { |
35 | "module": "montage/ui/dynamic-text.reel", | 51 | "module": "js/components/hintable.reel", |
36 | "name": "DynamicText", | 52 | "name": "Hintable", |
37 | "properties": { | 53 | "properties": { |
54 | "startOnEvent": "click", | ||
38 | "element": {"#": "value"} | 55 | "element": {"#": "value"} |
39 | }, | 56 | }, |
40 | "bindings": { | 57 | "bindings": { |
@@ -49,9 +66,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
49 | </script> | 66 | </script> |
50 | </head> | 67 | </head> |
51 | <body> | 68 | <body> |
52 | <div id="container" class="style-item"> | 69 | <div id="container" class="style-item" spellcheck="false"> |
53 | <dt id="property" class="css-property"></dt> | 70 | <input type="checkbox" data-montage-id="disable-checkbox"><dt data-montage-id="property" class="css-property"></dt><dd data-montage-id="value" class="css-value"></dd> |
54 | <dd id="value" class="css-value"></dd> | ||
55 | </div> | 71 | </div> |
56 | </body> | 72 | </body> |
57 | </html> \ No newline at end of file | 73 | </html> \ No newline at end of file |
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js index 6860a97f..6ff102b2 100644 --- a/js/panels/css-panel/style.reel/style.js +++ b/js/panels/css-panel/style.reel/style.js | |||
@@ -8,12 +8,27 @@ 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 | disabledClass : { | ||
12 | value: 'style-item-disabled' | ||
13 | }, | ||
11 | propertyText : { | 14 | propertyText : { |
12 | value: "property" | 15 | value: "property" |
13 | }, | 16 | }, |
14 | valueText : { | 17 | valueText : { |
15 | value: "value" | 18 | value: "value" |
16 | }, | 19 | }, |
20 | |||
21 | _enabled : { value: true, distinct: true }, | ||
22 | enabled : { | ||
23 | get: function() { | ||
24 | return this._enabled; | ||
25 | }, | ||
26 | set: function(value) { | ||
27 | this._enabled = value; | ||
28 | this.needsDraw = true; | ||
29 | } | ||
30 | }, | ||
31 | |||
17 | handleSourceObjectSet: { | 32 | handleSourceObjectSet: { |
18 | value: function() { | 33 | value: function() { |
19 | //debugger; | 34 | //debugger; |
@@ -26,6 +41,7 @@ exports.Style = Montage.create(TreeNode, { | |||
26 | console.log("style - template did load"); | 41 | console.log("style - template did load"); |
27 | } | 42 | } |
28 | }, | 43 | }, |
44 | |||
29 | draw : { | 45 | draw : { |
30 | value : function() { | 46 | value : function() { |
31 | //debugger; | 47 |