CSS Style - Add disabled UI state. Added Hintable and editable UI state.

author: Eric Guzman 2012-04-11 16:45:23 -0700
committer: Eric Guzman 2012-04-11 16:45:23 -0700
commit: 7246efab402664c75bd0de226c0b9a91b384839b (patch)
tree: 0e800cb2f65ece1c3526c114e561584dfcb1f127 /js/panels
parent: d203070579c8106b846657592a794ca8b4b1a9b6 (diff)
download: ninja-7246efab402664c75bd0de226c0b9a91b384839b.tar.gz
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 @@
 .css-tree-branch {
    /*padding-left: 10px;*/
 }
-.style-item {
-    padding-left: 20px;
-}
 .css-tree-branch .css-tree-branch {
    padding-left: 20px;
    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 @@
 </copyright> */
 .style-item {
+    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }
+.style-item input {
+    height: 10px;
+    width: 10px;
+    margin: 0 6px;
+    visibility: hidden;
+}
+.style-item:hover input, .style-item-disabled input {
+    visibility: visible;
+}
+.style-item-disabled {
+    opacity: .5;
+}
 .css-property, .css-value {
    border: 1px solid rgba(0,0,0,0);
    border-radius: 2px;
@@ -17,6 +29,9 @@
    outline: none;
    padding: 0 2px;
 }
+.css-property:hover, .css-value:hover {
+    background-color: #FFDECC;
+}
 .css-property:after {
    color: #333;
    content: ":";
@@ -33,4 +48,19 @@
 }
 .css-value {
    display: inline;
+}
+.style-item .editable {
+    border: 1px solid #999;
+    box-shadow: 1px 1px 1px #CCC;
+    color: #333;
+    display: inline-block;
+    margin-right: 7px;
+    max-width: none;
+    overflow: visible;
+    -webkit-user-select: text;
+}
+.style-item .editable:after {
+    position: relative;
+    margin-right: -7px;
+    right: -1px;
 }
 \ 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
                    "element" : {"#" : "container"}
                }
            },
+            "checkbox": {
+                "module": "montage/ui/checkbox.reel",
+                "name": "Checkbox",
+                "properties": {
+                    "element": {"#": "disable-checkbox"},
+                    "checked": true
+                },
+                "bindings": {
+                    "checked" : {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "enabled",
+                        "oneway": false
+                    }
+                }
+            },
            "property": {
-                "module": "montage/ui/dynamic-text.reel",
+                "module": "js/components/hintable.reel",
-                "name": "DynamicText",
+                "name": "Hintable",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "property"}
                },
                "bindings": {
@@ -32,9 +48,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                }
            },
            "value": {
-                "module": "montage/ui/dynamic-text.reel",
+                "module": "js/components/hintable.reel",
-                "name": "DynamicText",
+                "name": "Hintable",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "value"}
                },
                "bindings": {
@@ -49,9 +66,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    </script>
 </head>
 <body>
-<div id="container" class="style-item">
+<div id="container" class="style-item"  spellcheck="false">
-    <dt id="property" class="css-property"></dt>
+    <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>
-    <dd id="value" class="css-value"></dd>
 </div>
 </body>
 </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,
    TreeNode = require("js/components/treeview/tree-node").TreeNode;
 exports.Style = Montage.create(TreeNode, {
+    disabledClass : {
+        value: 'style-item-disabled'
+    },
    propertyText : {
        value: "property"
    },
    valueText : {
        value: "value"
    },
+    _enabled : { value: true, distinct: true },
+    enabled : {
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            this._enabled = value;
+            this.needsDraw = true;
+        }
+    },
    handleSourceObjectSet: {
        value: function() {
            //debugger;
@@ -26,6 +41,7 @@ exports.Style = Montage.create(TreeNode, {
            console.log("style - template did load");
        }
    },
    draw : {
        value : function() {
            //debugger;
@@ -35,6 +51,12 @@ exports.Style = Montage.create(TreeNode, {
                console.log("Label key unknown");
            }
+            if(this._enabled) {
+                this.element.classList.remove(this.disabledClass);
+            } else {
+                this.element.classList.add(this.disabledClass);
+            }
        }
    }
 });
 \ No newline at end of file
author	Eric Guzman	2012-04-11 16:45:23 -0700
committer	Eric Guzman	2012-04-11 16:45:23 -0700
commit	7246efab402664c75bd0de226c0b9a91b384839b (patch)
tree	0e800cb2f65ece1c3526c114e561584dfcb1f127 /js/panels
parent	d203070579c8106b846657592a794ca8b4b1a9b6 (diff)
download	ninja-7246efab402664c75bd0de226c0b9a91b384839b.tar.gz

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	//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