+

-- cgit v1.2.3 From e39cc380ef2c0479f57b35dcadedccb0fb3fd22f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 13 Apr 2012 01:44:45 -0700 Subject: CSS Style Rule - Show appropriate "sheet name" for inline style --- .../rule-components/css-style-rule.reel/css-style-rule.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index a0ff4b4e..dd51565a 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -23,9 +23,14 @@ exports.CssStyleRule = Montage.create(Component, { }, set: function(rule) { this.cssText = rule.cssText; - this.sheetName = rule.href || 'Style Tag'; - this.selector = rule.selectorText; + if(rule.type === 'inline') { + this.sheetName = 'Inline Style'; + } else { + this.sheetName = rule.href || 'Style Tag'; + } + + this.selector = rule.selectorText; this.declaration = rule.style; console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); -- cgit v1.2.3 From f1d4c48cd12d4c1a4a8b8d7ce648ea510607cb88 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 24 Apr 2012 14:19:21 -0700 Subject: CSS Style Rule - Nudge sheet link a bit --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 6918e695..7cde3fd8 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css @@ -21,10 +21,11 @@ } .style-sheet-name { color: #333; + font-family: "Droid Sans", sans-serif; + padding-top: 1px; position: absolute; right: 8px; text-decoration: none; - font-family: "Droid Sans", sans-serif; } .css-style-rule-item .nj-css-selector { position: relative; -- cgit v1.2.3 From 143105a0b9c7765898b22d53489b4bd8df3dff2e Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 26 Apr 2012 03:15:49 -0700 Subject: CSS Panel - add handlers for css panel actions --- .../rule-components/css-style-rule.reel/css-style-rule.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index dd51565a..d85b5797 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -14,6 +14,10 @@ exports.CssStyleRule = Montage.create(Component, { hasTemplate: { value: true }, + focusDelegate : { + value: null + }, + _rule : { value : null }, @@ -67,6 +71,10 @@ exports.CssStyleRule = Montage.create(Component, { if(this._declaration) { this.declarationComponent.declaration = this._declaration; } + + if(this.focusDelegate) { + this.declarationComponent.focusDelegate = this.focusDelegate; + } } }, prepareForDraw : { -- cgit v1.2.3 From 4332599afffae987a18bb197fcfdd09bc2e94d2b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:45:52 -0700 Subject: CSS Style Rule - Add code for changing selectors and showing unapplied rules --- .../css-style-rule.reel/css-style-rule.css | 19 +++++++ .../css-style-rule.reel/css-style-rule.html | 13 +++++ .../css-style-rule.reel/css-style-rule.js | 66 ++++++++++++++-------- 3 files changed, 76 insertions(+), 22 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 7cde3fd8..03d43ebf 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css @@ -4,6 +4,7 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ .css-style-rule-item { + min-height: 69px; position: relative; } .css-style-rule-item:after { @@ -14,7 +15,9 @@ } .style-rule-heading { background-color: #f3f3f3; + /*background-color: #DDDDDD;*/ border: 1px #e7e7e7; + /*border: 1px #CCC;*/ border-style: solid none; box-shadow: inset 0 0 1px #FFF; padding: 4px; @@ -47,4 +50,20 @@ right: -10px; +} + +/* ------------------- + Unapplied Rule +------------------ */ +.unapplied-css-rule { + opacity: .8; + background-color: #f3f3f3; +} +.unapplied-css-rule .style-rule-heading { + background-repeat: no-repeat; + background-position: 6px 6px; + 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); +} +.unapplied-css-rule .nj-css-selector { + margin-left: 16px; } \ No newline at end of file diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index 1042d29e..bf101719 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html @@ -15,6 +15,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name" : "CssStyleRule", "properties" : { "element" : {"#" : "rule-item"}, + "selectorField": {"@": "selector"}, "declarationComponent": {"@": "declaration"} } }, @@ -52,6 +53,18 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name": "Declaration", "properties": { "element": {"#": "declaration-list"} + }, + "bindings": { + "focusDelegate" : { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "focusDelegate", + "oneway": true + }, + "declaration" : { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "_declaration", + "oneway": true + } } }, "sheetLink": { diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index d85b5797..ac22878e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CssStyleRule = Montage.create(Component, { + unappliedClass : { + value: 'unapplied-css-rule' + }, cssText: { value: null }, @@ -17,6 +20,21 @@ exports.CssStyleRule = Montage.create(Component, { focusDelegate : { value: null }, + _applied : { + value: true, + distinct: true + }, + applied : { + get: function() { + return this._applied; + }, + set: function(value) { + if(this._applied === value) { return false; } + + this._applied = value; + this.needsDraw = true; + } + }, _rule : { value : null @@ -44,13 +62,7 @@ exports.CssStyleRule = Montage.create(Component, { }, declarationComponent: { value: null - } , -// declarationNodeName: { -// value: "dl" -// }, -// declarationElement: { -// value: null -// }, + }, _declaration: { value: null }, @@ -65,35 +77,45 @@ exports.CssStyleRule = Montage.create(Component, { condition: { value: false }, - templateDidLoad : { - value: function() { - console.log("css style rule : template did load"); - if(this._declaration) { - this.declarationComponent.declaration = this._declaration; - } + handleChange : { + value: function(e) { if(this.focusDelegate) { - this.declarationComponent.focusDelegate = this.focusDelegate; + this.focusDelegate.handleSelectorChange(this.rule, this.selectorField.value, this); } } }, + + templateDidLoad : { + value: function() { + //console.log("css style rule : template did load"); + } + }, prepareForDraw : { value: function() { - console.log("css style rule : prepare for draw"); - - if(!this.declarationElement) { - ///// Create element to contain declaration - this.declarationElement = document.createElement(this.declarationNodeName); - } + this.selectorField.addEventListener('change', this, false); - if(!this._declaration && this._rule) { + //console.log("css style rule : prepare for draw"); + } + }, + willDraw : { + value: function() { + if(this.applied) { + this.element.removeAttribute('title'); + } else { + this.element.title = "Rule does not apply to selection"; } } }, draw : { value: function() { - console.log("css style rule : draw"); + //console.log("css style rule : draw"); + if(this.applied) { + this.element.classList.remove(this.unappliedClass); + } else { + this.element.classList.add(this.unappliedClass); + } } } }); -- cgit v1.2.3 From 9a94c6fb5f82d18139b48341788a0ffca23ae0af Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 1 May 2012 11:15:14 -0700 Subject: CSS Panel - Added removing of rules/styles --- .../css-style-rule.reel/css-style-rule.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index ac22878e..d2c81b93 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -86,6 +86,15 @@ exports.CssStyleRule = Montage.create(Component, { } }, + update: { + value: function() { + if(this.cssText !== this.rule.cssText) { + // TODO: add update for selector and stylesheet name + this.declarationComponent.update(); + } + } + }, + templateDidLoad : { value: function() { //console.log("css style rule : template did load"); @@ -93,8 +102,11 @@ exports.CssStyleRule = Montage.create(Component, { }, prepareForDraw : { value: function() { - this.selectorField.addEventListener('change', this, false); - + if(this.rule.type === 'inline') { + this.selectorField.readOnly = true; + } else { + this.selectorField.addEventListener('change', this, false); + } //console.log("css style rule : prepare for draw"); } -- cgit v1.2.3 From 0f56430673fa2e008f9b1c17fca8627251866935 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 1 May 2012 16:24:03 -0700 Subject: CSS Panel - Inline style editing --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index d2c81b93..7b5a736f 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -104,6 +104,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.rule.type === 'inline') { this.selectorField.readOnly = true; + this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); } -- cgit v1.2.3 From 8bea1e0807f36595d762592c030d4810396ada85 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 15:30:27 -0700 Subject: CSS Panel - Add focus management to styles view delegate --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 7b5a736f..cfa3e605 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -90,7 +90,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.cssText !== this.rule.cssText) { // TODO: add update for selector and stylesheet name - this.declarationComponent.update(); + //this.declarationComponent.update(); } } }, -- cgit v1.2.3 From a447eaf48ffbaea89cbb229f06e8b5a7e199f77f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 17:00:09 -0700 Subject: CSS Panel - Added element highlight on selector field hover --- .../css-style-rule.reel/css-style-rule.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index cfa3e605..7a6a3957 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -85,7 +85,20 @@ exports.CssStyleRule = Montage.create(Component, { } } }, - + handleMouseover: { + value: function(e) { + if(this.focusDelegate) { + this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over'); + } + } + }, + handleMouseout: { + value: function(e) { + if(this.focusDelegate) { + this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out'); + } + } + }, update: { value: function() { if(this.cssText !== this.rule.cssText) { @@ -107,11 +120,12 @@ exports.CssStyleRule = Montage.create(Component, { this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); + this.selectorField.element.addEventListener('mouseover', this, false); + this.selectorField.element.addEventListener('mouseout', this, false); } - //console.log("css style rule : prepare for draw"); - } }, + willDraw : { value: function() { if(this.applied) { -- cgit v1.2.3 From eb80f8a610100f908b5cb9ffc65bfa94f8a23c21 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 13:26:36 -0700 Subject: CSS Panel - Create non-tree declaration (optimized). And add updating functionality. --- .../css-style-rule.reel/css-style-rule.html | 25 ++++++++++++++++++++-- .../css-style-rule.reel/css-style-rule.js | 2 +- 2 files changed, 24 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index bf101719..05ea669f 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html @@ -49,8 +49,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } }, "declaration": { - "module": "js/panels/css-panel/declaration.reel", - "name": "Declaration", + "module": "js/panels/css-panel/style-declaration.reel", + "name": "StyleDeclaration", "properties": { "element": {"#": "declaration-list"} }, @@ -76,6 +76,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } } +

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 7a6a3957..c74502c0 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -103,7 +103,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.cssText !== this.rule.cssText) { // TODO: add update for selector and stylesheet name - //this.declarationComponent.update(); + this.declarationComponent.update(); } } }, -- cgit v1.2.3 From 1c73ff78bb6a251ded84ab34ed7f341844c030f1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 17:14:12 -0700 Subject: CSS Panel - Fixed removing rules and checking to see if rules apply on add. --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index c74502c0..ac714bfa 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -29,7 +29,7 @@ exports.CssStyleRule = Montage.create(Component, { return this._applied; }, set: function(value) { - if(this._applied === value) { return false; } + if(this._applied === value || value === undefined || value === null) { return false; } this._applied = value; this.needsDraw = true; -- cgit v1.2.3 From f71e8f853605f0eb4deaf16263124aac1aad9ee1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 12:02:08 -0700 Subject: CSS Panel - Allow ":" to be used in selector field --- .../css-style-rule.reel/css-style-rule.js | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index ac714bfa..71fe8470 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -115,6 +115,8 @@ exports.CssStyleRule = Montage.create(Component, { }, prepareForDraw : { value: function() { + this.selectorField.keyActions = this.keyActions; + if(this.rule.type === 'inline') { this.selectorField.readOnly = true; this.declarationComponent.type = 'inline'; @@ -144,5 +146,26 @@ exports.CssStyleRule = Montage.create(Component, { this.element.classList.add(this.unappliedClass); } } + }, + + keyActions : { + value : { + hint : { + accept : [9,13], // accept hint + stop : [27], // stop editing + next : [40], // cycle to next hint + prev : [38], // cycle to prev hint + revert : [27], // revert value + backsp : [8] // backspace hit + }, + noHint : { + stop : [27,9,13], + next : [40], + prev : [38], + revert : [27], + backsp : [8] + } + }, + distinct: true } }); -- cgit v1.2.3 From a237dfaad38bb9efac803db83a28099f6f74dde8 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 15:10:51 -0700 Subject: Remove Old CSS Panel --- .../css-style-rule.reel/css-style-rule.css | 32 +++++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 03d43ebf..3e7252b5 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css @@ -30,13 +30,37 @@ right: 8px; text-decoration: none; } + +/* ------------------- + Selector Styles +------------------ */ + .css-style-rule-item .nj-css-selector { - position: relative; border: 1px solid rgba(0,0,0,0); + display: inline-block; + font-weight: bold; + padding: 0 2px; + position: relative; + outline: none; + +} +.nj-css-selector:after { + content: " {"; + font-weight: normal; +} +.nj-css-selector.nj-editable-focus { + position: relative; +} +.nj-css-rule-list .nj-css-selector.nj-editable-focus:after { + position: absolute; +} +.css-style-rule-item .nj-css-selector:focus { + box-shadow: none; } .css-style-rule-item .nj-css-selector.editable { + background-color: #FFF; border: 1px solid #999; - border-radius: 3px; + border-radius: 2px; box-shadow: 1px 1px 1px #CCC; color: #333; display: inline-block; @@ -56,8 +80,8 @@ Unapplied Rule ------------------ */ .unapplied-css-rule { - opacity: .8; - background-color: #f3f3f3; + /*opacity: .8;*/ + /*background-color: #f3f3f3;*/ } .unapplied-css-rule .style-rule-heading { background-repeat: no-repeat; -- cgit v1.2.3 From d56af1a4716445db28d343182c8bfaf211eb6ab7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 11:15:47 -0700 Subject: CSS Panel - Remove console logs --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 71fe8470..cfe3c24d 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -55,7 +55,7 @@ exports.CssStyleRule = Montage.create(Component, { this.selector = rule.selectorText; this.declaration = rule.style; - console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + //console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); this._rule = rule; } -- cgit v1.2.3 From 1c3da2901f454ad2c18e20216bb2517740a1c080 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 14:28:00 -0700 Subject: CSS Panel - Update components to use new serialization format --- .../css-style-rule.reel/css-style-rule.html | 40 ++++++---------------- 1 file changed, 10 insertions(+), 30 deletions(-) (limited to 'js/panels/css-panel/rule-components') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index 05ea669f..f203b61f 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html @@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot