aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-04-11 16:45:23 -0700
committerEric Guzman2012-04-11 16:45:23 -0700
commit7246efab402664c75bd0de226c0b9a91b384839b (patch)
tree0e800cb2f65ece1c3526c114e561584dfcb1f127 /js/panels/css-panel
parentd203070579c8106b846657592a794ca8b4b1a9b6 (diff)
downloadninja-7246efab402664c75bd0de226c0b9a91b384839b.tar.gz
CSS Style - Add disabled UI state. Added Hintable and editable UI state.
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.css4
-rw-r--r--js/panels/css-panel/style.reel/style.css32
-rw-r--r--js/panels/css-panel/style.reel/style.html30
-rw-r--r--js/panels/css-panel/style.reel/style.js22
4 files changed, 77 insertions, 11 deletions
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
10exports.Style = Montage.create(TreeNode, { 10exports.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 //debugger;
@@ -35,6 +51,12 @@ exports.Style = Montage.create(TreeNode, {
35 console.log("Label key unknown"); 51 console.log("Label key unknown");
36 } 52 }
37 53
54 if(this._enabled) {
55 this.element.classList.remove(this.disabledClass);
56 } else {
57 this.element.classList.add(this.disabledClass);
58 }
59
38 } 60 }
39 } 61 }
40}); \ No newline at end of file 62}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 18:03:16 +0000