From 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 10:55:51 -0800 Subject: CSS Panel - Updating components, created toolbar components, and small changes to styles controller --- js/components/toolbar.reel/toolbar.css | 14 +++ js/components/toolbar.reel/toolbar.html | 34 ++++++ js/components/toolbar.reel/toolbar.js | 27 +++++ js/controllers/styles-controller.js | 12 +- .../PanelContainer.reel/PanelContainer.js | 4 +- js/panels/css-panel/css-panel-container.js | 2 +- js/panels/css-panel/css-panel.reel/css-panel.css | 49 ++++++++ js/panels/css-panel/css-panel.reel/css-panel.html | 7 +- js/panels/css-panel/css-panel.reel/css-panel.js | 7 -- .../css-style-rule.reel/css-style-rule.css | 5 + .../css-style-rule.reel/css-style-rule.html | 57 +++++++++ .../css-style-rule.reel/css-style-rule.js | 48 ++++++++ js/panels/css-panel/rule-list.reel/rule-list.css | 29 +++++ js/panels/css-panel/rule-list.reel/rule-list.html | 85 +++++++++++++ js/panels/css-panel/rule-list.reel/rule-list.js | 100 ++++++++++++++++ .../css-panel/style-sheet.reel/style-sheet.css | 49 ++++++++ .../css-panel/style-sheet.reel/style-sheet.html | 36 +++++- .../css-panel/style-sheet.reel/style-sheet.js | 9 +- .../style-sheets-view.reel/style-sheets-view.css | 19 +++ .../style-sheets-view.reel/style-sheets-view.html | 38 +++++- .../style-sheets-view.reel/style-sheets-view.js | 27 ++++- .../styles-view-container.css | 34 ++++-- .../styles-view-container.html | 71 ++++++----- .../styles-view-container.js | 133 ++++++++++++++++++++- 24 files changed, 825 insertions(+), 71 deletions(-) create mode 100644 js/components/toolbar.reel/toolbar.css create mode 100644 js/components/toolbar.reel/toolbar.html create mode 100644 js/components/toolbar.reel/toolbar.js create mode 100644 js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css create mode 100644 js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html create mode 100644 js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.css create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.html create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.js diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css new file mode 100644 index 00000000..1ffae912 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.css @@ -0,0 +1,14 @@ +/* + 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. + */ +.toolbar-container { + background-color: #474747; + border-bottom: 1px solid #333; + border-top: 1px solid #505050; + box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75); + height: 22px; + width: 100%; + -webkit-box-flex: 0; +} \ No newline at end of file diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html new file mode 100644 index 00000000..8ccce126 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.html @@ -0,0 +1,34 @@ + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js new file mode 100644 index 00000000..79e7ff1f --- /dev/null +++ b/js/components/toolbar.reel/toolbar.js @@ -0,0 +1,27 @@ +/* + 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. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.Toolbar = Montage.create(Component, { + + deserializedFromTemplate : { + value: function() { + console.log("toolbar - deserialized"); + } + }, + prepareForDraw : { + value: function() { + console.log("toolbar - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("toolbar - draw"); + } + } +}); \ No newline at end of file diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 33084169..d36c8cb9 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -190,6 +190,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// attach specificity to rule object ///// if rule is css keyframes, return rule and don't attach specificity if (rule instanceof WebKitCSSKeyframesRule) { + return rule; } rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); @@ -1184,6 +1185,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { this.styleSheetModified(sheet); + NJevent('newStyleSheet', sheet); + return sheet; } }, @@ -1243,11 +1246,16 @@ var stylesController = exports.StylesController = Montage.create(Component, { clearDirtyStyleSheets : { value: function(doc) { - if(!doc) { + this.dirtyStyleSheets.length = 0; + + if(doc) { this.dirtyStyleSheets = null; - this.dirtyStyleSheets = []; + this.dirtyStyleSheets = this.dirtyStyleSheets.filter(function(sheet) { + return sheet.document !== doc; + }); } + } }, diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 003724bb..54320eef 100755 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components var ProjectPanel = require("js/panels/Project/ProjectPanel").ProjectPanel; var MaterialsPanel = require("js/panels/Materials/MaterialsPanel").MaterialsPanel; var PresetsPanel = require("js/panels/presets/presets-panel").PresetsPanel; +var CSSPanelNew = require("js/panels/css-panel/css-panel-container").CSSPanelContainer; exports.PanelContainer = Montage.create(Component, { lastOffset: { @@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, { }, initPanelOrder: { - value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] + value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] }, panelOrder: { @@ -106,6 +107,7 @@ exports.PanelContainer = Montage.create(Component, { this.addEventListener("change@appModel.CSSPanel", this, false); this.addEventListener("change@appModel.MaterialsPanel", this, false); this.addEventListener("change@appModel.PresetsPanel", this, false); + this.addEventListener("change@appModel.CSSPanelNew", this, false); } }, diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js index aeaa2d13..6110c999 100644 --- a/js/panels/css-panel/css-panel-container.js +++ b/js/panels/css-panel/css-panel-container.js @@ -9,7 +9,7 @@ var PanelBase = require("js/panels/PanelBase").PanelBase; var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew; exports.CSSPanelContainer = Montage.create(PanelBase, { - panelName : { value: "CSSPanelNew" }, + panelName : { value: "CSS Panel" }, minHeight : { value: 200 }, content : { value: Content } }); \ No newline at end of file diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css index e69de29b..6d296a8e 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.css +++ b/js/panels/css-panel/css-panel.reel/css-panel.css @@ -0,0 +1,49 @@ +/* + 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. + */ +.css-panel { + color: #FFF; + display: -webkit-box; + height: 100%; + -webkit-box-orient: vertical; +} +.css-panel > h3 { + background-color: #333; + border-top: 1px solid #3D3D3D; + color: #FFF; + cursor: default; + font-size: 12px; + font-weight: normal; + height: 16px; + margin: 0; + padding: 4px 0 2px 10px; + vertical-align: top; + -webkit-box-flex: 0; + -webkit-user-select: none; +} +.css-panel .style-sheets-view-container { + -webkit-box-flex: 0; + min-height: 41px; +} +.css-panel .styles-view-container { + -webkit-box-flex: 1; + display: -webkit-box; + -webkit-box-orient: vertical; +} +.panel-message { + background-color: rgba(255,255,255, 0.1); + border: 1px dashed rgba(255,255,255, 0.2); + border-radius: 4px; + color: #CCC; + font-size: 11px; + font-weight: normal; + margin: 0 8px; + padding: 5px; + position: relative; + text-shadow: 1px 1px 0px #333; + text-align: center; + top: 8px; + -webkit-box-flex: 0; +} diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index 86bfbbb7..899c7786 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/css-panel.reel", "name" : "CSSPanel", "properties" : { - "element" : {"#" : "container"} + "element" : {"#" : "container"}, + "controller": {"@": "cssPanelController"} } }, "styleSheetView": { @@ -36,9 +37,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-

Style Sheets

+

Style Sheets

-

Styles

+

Styles

diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js index a593f1c4..228e91f6 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.js +++ b/js/panels/css-panel/css-panel.reel/css-panel.js @@ -8,16 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CSSPanelNew = Montage.create(Component, { - hasTemplate: { - value: true - }, - condition: { - value: false - }, templateDidLoad : { value: function() { console.log("css panel : template did load"); - //this.condition = true; } }, prepareForDraw : { 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 new file mode 100644 index 00000000..0441c1cf --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css @@ -0,0 +1,5 @@ +/* + 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 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 new file mode 100644 index 00000000..e8661bf9 --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html @@ -0,0 +1,57 @@ + + + + + + + + + +
+ + +
+ + \ 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 new file mode 100644 index 00000000..f90104e1 --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -0,0 +1,48 @@ +/* + 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. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.CssStyleRule = Montage.create(Component, { + hasTemplate: { + value: true + }, + _rule : { + value : null + }, + rule : { + get: function() { + return this._rule; + }, + set: function(rule) { + 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._rule = rule; + } + }, + condition: { + value: false + }, + templateDidLoad : { + value: function() { + console.log("css style rule : template did load"); + //this.condition = true; + } + }, + prepareForDraw : { + value: function() { + console.log("css panel : prepare for draw"); + } + }, + draw : { + value: function() { + console.log("css panel : draw"); + } + } +}); diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css new file mode 100644 index 00000000..5f9092f3 --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -0,0 +1,29 @@ +/* + 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. + */ +.rule-list-container { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.rule-list { + background-color: #FFF; + background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); + color: #333; + font-family: monospace; + padding: 0; + margin: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.rule-list li { + list-style-type: none; + margin: 3px 6px; + position: relative; +} +.rule-list li { + +} \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html new file mode 100644 index 00000000..69154d8d --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.html @@ -0,0 +1,85 @@ + + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js new file mode 100644 index 00000000..11cda89c --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -0,0 +1,100 @@ +/* + 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. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.RuleList = Montage.create(Component, { + hasTemplate: { + value: true + }, + _rules: { + value: null + }, + rules: { + get: function() { + return this._rules; + }, + set: function(list) { + if(!list) { + return null; + } + console.log('list: ', list); + this._rules = list; + this.needsDraw = this._needsAppend = true; + } + }, + _contentController: { + value: null + }, + contentController: { + get: function() { + return this._contentController; + }, + set: function(controller) { + + Object.defineBinding(this, 'rules', { + "boundObject": controller, + "boundObjectPropertyPath": "ruleList", + "oneway": true + + }); + + this._contentController = controller; + } + }, + templateDidLoad : { + value: function() { + console.log("Rule List : template did load"); + //this.condition = true; + } + }, + prepareForDraw : { + value: function() { + console.log("Rule List : prepare for draw"); + } + }, + draw : { + value: function() { + if(this._needsAppend) { + this._rules.forEach(function(rule) { + var componentBase = this.supportedRules[rule.type], + instance, el; + + if(componentBase) { + el = document.createElement(this.ruleNodeName); + instance = componentBase.create(); + instance.element = el; + instance.rule = rule; + this.listElement.appendChild(el); + instance.needsDraw = true; + } + + + }, this); + } + console.log("Rule List : draw"); + } + }, + _createRuleComponent: { + value: function(ruleType) { + + } + }, + ruleNodeName : { + value: 'li' + }, + ruleComponents : { + value: { + "1" : 'css-style-rule', + "3" : 'css-import-rule', + "4" : 'css-media-rule', + "5" : 'css-font-face-rule', + "6" : 'css-page-rule', + "10" : 'namespace-rule' + } + } +}); diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index e69de29b..41c5ab12 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -0,0 +1,49 @@ +/* + 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. + */ +.style-sheet-container { + border-bottom: 1px solid #505050; + display: -webkit-box; + -webkit-box-orient: horizontal; + padding: 4px 0 3px; + white-space: nowrap; +} +.style-sheet-container > * { + -webkit-box-flex: 1; + display:-webkit-box; +} +.style-sheet-container input[type="checkbox"] { + margin-right: 8px; + position: relative; + -webkit-box-flex: 0; +} +.style-sheet-container span { + min-width: 50px; + overflow: hidden; + padding: 2px 0; + text-overflow: ellipsis; + white-space: nowrap; +} +.style-sheet-container label { + -webkit-box-flex: 0; + margin: 0 5px; + padding: 2px 0; +} +.style-sheet-container input[type="text"] { + min-width: 30px; +} +.style-sheet-container button { + background: none; + color: #FFF; + cursor: pointer; +} +.style-sheet-container button:after { + content: "\2716"; + opacity: 0.7; +} + +.style-sheet-container button:hover:after { + opacity: 1; +} \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 43ffec6f..64b8e8ae 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -7,16 +7,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot + -
-

No document loaded. Please Open or Create a new document.

+
+

No style sheets to display.

+
+
+
\ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index f8826b18..b1315311 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -11,6 +11,9 @@ exports.StyleSheetsView = Montage.create(Component, { noDocumentCondition : { value: true }, + showToolbar : { + value: false + }, styleSheets : { value: [] }, @@ -24,18 +27,27 @@ exports.StyleSheetsView = Montage.create(Component, { this.stylesController = this.application.ninja.stylesController; this.eventManager.addEventListener("styleSheetsReady", this, false); + this.eventManager.addEventListener("newStyleSheet", this, false); } }, + _initView : { + value: false + }, handleStyleSheetsReady : { value: function(e) { - this.noDocumentCondition = false; + this._initView = this.needsDraw = true; - this.stylesController.userStyleSheets.forEach(function(sheet) { - this.styleSheets.push(sheet); - }, this); +// this.noDocumentCondition = false; +// this.showToolbar = true; +// this.styleSheets = this.stylesController.userStyleSheets; } }, + handleNewStyleSheet : { + value: function(e) { + this.styleSheets.push(e._event.detail); + } + }, prepareForDraw : { value: function() { console.log("style sheet view - prepare for draw"); @@ -44,6 +56,13 @@ exports.StyleSheetsView = Montage.create(Component, { draw : { value: function() { console.log("styles sheet view - draw"); + + if(this._initView) { + this.noDocumentCondition = false; + this.showToolbar = true; + this.styleSheets = this.stylesController.userStyleSheets; + this._initView = false; + } } } }); \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css index 1d3baa5c..326254ed 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css @@ -1,11 +1,25 @@ -.styles-view-container h3 { - background-color: rgba(255,255,255, 0.1); - border: 1px dashed rgba(255,255,255, 0.2); - border-radius: 4px; - color: #CCC; - font-size: 11px; - font-weight: normal; - margin: 5px; - padding: 10px; - text-shadow: 1px 1px 0px #333; +/* + 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. + */ +.sub-panel-slot { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.no-styles .sub-panel-slot, .no-styles .styles-view-toolbar-container { + display: none; +} +.styles-view-container .panel-message { + display: none; +} +.styles-view-container.no-styles .panel-message { + display: block; +} +.styles-view-toolbar-container { + border-top: 1px solid #303030; +} +.styles-view-toolbar-container .toolbar-container { + border-top: 1px solid #5c5c5c; } \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html index 17ba6326..97c7c889 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html @@ -7,13 +7,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot +