From 7246efab402664c75bd0de226c0b9a91b384839b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 11 Apr 2012 16:45:23 -0700 Subject: CSS Style - Add disabled UI state. Added Hintable and editable UI state. --- .../style-shorthand.reel/style-shorthand.css | 4 +-- js/panels/css-panel/style.reel/style.css | 32 +++++++++++++++++++++- js/panels/css-panel/style.reel/style.html | 30 +++++++++++++++----- js/panels/css-panel/style.reel/style.js | 22 +++++++++++++++ 4 files changed, 77 insertions(+), 11 deletions(-) (limited to 'js/panels') 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 @@ */ .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", - "name": "DynamicText", + "module": "js/components/hintable.reel", + "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", - "name": "DynamicText", + "module": "js/components/hintable.reel", + "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 -
-
-
+
+
\ 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 -- cgit v1.2.3