From a43de0b808db09ed76a94bf43ca0108bedeb2e62 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 12 Mar 2012 15:25:53 -0700 Subject: CSS Panel Update - Style Rule update --- .../css-style-rule.reel/css-style-rule.css | 13 +++++- .../css-style-rule.reel/css-style-rule.html | 24 +++++++++-- .../css-style-rule.reel/css-style-rule.js | 46 ++++++++++++++++++++-- 3 files changed, 75 insertions(+), 8 deletions(-) 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 0441c1cf..9306955c 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 @@ -2,4 +2,15 @@ This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ \ No newline at end of file + */ +.css-style-rule-item { + position: relative; +} +.style-rule-heading { + /*background-color: #333;*/ +} +.style-sheet-name { + position: absolute; + right: 0; + +} \ 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 e8661bf9..2f5d69af 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 @@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/rule-components/css-style-rule.reel", "name" : "CssStyleRule", "properties" : { - "element" : {"#" : "rule-item"} + "element" : {"#" : "rule-item"}, + "declarationComponent": {"@": "declaration"} } }, "sheetName": { @@ -44,14 +45,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "oneway": true } } + }, + "declaration": { + "module": "js/panels/css-panel/declaration.reel", + "name": "Declaration", + "properties": { + "element": {"#": "declaration-list"} + } + }, + "sheetLink": { + "module": "montage/ui/anchor.reel", + "name": "Anchor", + "properties": { + "element": {"#": "style-sheet-name"} + } } }
- - +
+ + +
+
\ No newline at end of file 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 f90104e1..a0ff4b4e 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, { + cssText: { + value: null + }, hasTemplate: { value: true }, @@ -22,27 +25,62 @@ exports.CssStyleRule = Montage.create(Component, { this.cssText = rule.cssText; this.sheetName = rule.href || 'Style Tag'; this.selector = rule.selectorText; -console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + + this.declaration = rule.style; + + console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + this._rule = rule; } }, + declarationComponent: { + value: null + } , +// declarationNodeName: { +// value: "dl" +// }, +// declarationElement: { +// value: null +// }, + _declaration: { + value: null + }, + declaration: { + get: function() { + return this._declaration; + }, + set: function(dec) { + this._declaration = dec; + } + }, condition: { value: false }, templateDidLoad : { value: function() { console.log("css style rule : template did load"); - //this.condition = true; + if(this._declaration) { + this.declarationComponent.declaration = this._declaration; + } } }, prepareForDraw : { value: function() { - console.log("css panel : prepare for draw"); + console.log("css style rule : prepare for draw"); + + if(!this.declarationElement) { + ///// Create element to contain declaration + this.declarationElement = document.createElement(this.declarationNodeName); + } + + if(!this._declaration && this._rule) { + + } } }, draw : { value: function() { - console.log("css panel : draw"); + console.log("css style rule : draw"); } } }); -- cgit v1.2.3