From 1c528b42f9b1c9be9197921586388c3a3bdc5c17 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:16:23 -0800 Subject: CSS Panel Update - Adding montage objects for css panel --- js/panels/css-panel/css-panel-container.js | 15 +++++ js/panels/css-panel/css-panel.reel/css-panel.css | 0 js/panels/css-panel/css-panel.reel/css-panel.html | 45 +++++++++++++ js/panels/css-panel/css-panel.reel/css-panel.js | 33 ++++++++++ .../css-panel/style-sheet.reel/style-sheet.css | 0 .../css-panel/style-sheet.reel/style-sheet.html | 42 ++++++++++++ .../css-panel/style-sheet.reel/style-sheet.js | 52 +++++++++++++++ .../style-sheets-view.reel/style-sheets-view.css | 0 .../style-sheets-view.reel/style-sheets-view.html | 68 ++++++++++++++++++++ .../style-sheets-view.reel/style-sheets-view.js | 45 +++++++++++++ .../styles-view-container.css | 11 ++++ .../styles-view-container.html | 75 ++++++++++++++++++++++ .../styles-view-container.js | 35 ++++++++++ 13 files changed, 421 insertions(+) create mode 100644 js/panels/css-panel/css-panel-container.js create mode 100644 js/panels/css-panel/css-panel.reel/css-panel.css create mode 100644 js/panels/css-panel/css-panel.reel/css-panel.html create mode 100644 js/panels/css-panel/css-panel.reel/css-panel.js create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.css create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.html create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.js create mode 100644 js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css create mode 100644 js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html create mode 100644 js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js create mode 100644 js/panels/css-panel/styles-view-container.reel/styles-view-container.css create mode 100644 js/panels/css-panel/styles-view-container.reel/styles-view-container.html create mode 100644 js/panels/css-panel/styles-view-container.reel/styles-view-container.js (limited to 'js/panels') diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js new file mode 100644 index 00000000..aeaa2d13 --- /dev/null +++ b/js/panels/css-panel/css-panel-container.js @@ -0,0 +1,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. + */ + +var Montage = require("montage/core/core").Montage; +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" }, + 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 new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html new file mode 100644 index 00000000..cc1876c3 --- /dev/null +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -0,0 +1,45 @@ + + + + + + + + + +
+

Style Sheets

+
+

Styles

+
+
+ + \ No newline at end of file diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js new file mode 100644 index 00000000..a593f1c4 --- /dev/null +++ b/js/panels/css-panel/css-panel.reel/css-panel.js @@ -0,0 +1,33 @@ +/* + 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.CSSPanelNew = Montage.create(Component, { + hasTemplate: { + value: true + }, + condition: { + value: false + }, + templateDidLoad : { + value: function() { + console.log("css panel : 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/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html new file mode 100644 index 00000000..4fb94335 --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -0,0 +1,42 @@ + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js new file mode 100644 index 00000000..daa614c2 --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -0,0 +1,52 @@ +/* + 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.StyleSheet = Montage.create(Component, { + deserializedFromTemplate : { + value: function() { + console.log("style sheet view - deserialized"); + } + }, + prepareForDraw : { + value: function() { + console.log("style sheet view - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("styles sheet view - draw"); + } + }, + _name: { + value: null + }, + name : { + get: function() { + return this._name; + }, + set: function(text) { + this._name = text; + } + }, + _styleSheet : { + value: null + }, + styleSheet : { + get: function() { + return this._styleSheet; + }, + set: function(sheet) { + if(sheet.href) { + this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); + } else { + this.name = 'Style Tag'; + } + } + } +}); \ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html new file mode 100644 index 00000000..78836f21 --- /dev/null +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html @@ -0,0 +1,68 @@ + + + + + + + + +
+

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

+ +
+ + \ 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 new file mode 100644 index 00000000..f93de830 --- /dev/null +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -0,0 +1,45 @@ +/* + 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.StyleSheetsView = Montage.create(Component, { + noDocumentCondition : { + value: true + }, + styleSheets : { + value: [] + }, + stylesController : { + value: null + }, + deserializedFromTemplate : { + value: function() { + console.log("style sheet view - deserialized"); + + this.stylesController = this.application.ninja.stylesController; + + this.eventManager.addEventListener("styleSheetsReady", this, false); + } + }, + handleStyleSheetsReady : { + value: function(e) { + //this.styleSheets = null; + this.styleSheets = this.stylesController.userStyleSheets; + } + }, + prepareForDraw : { + value: function() { + console.log("style sheet view - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("styles sheet view - draw"); + } + } +}); \ 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 new file mode 100644 index 00000000..1d3baa5c --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css @@ -0,0 +1,11 @@ +.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; +} \ 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 new file mode 100644 index 00000000..4b2bf60a --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html @@ -0,0 +1,75 @@ + + + + + + + + +
+

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

+
+ + \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js new file mode 100644 index 00000000..41e16192 --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js @@ -0,0 +1,35 @@ +/* + 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.StylesViewContainer = Montage.create(Component, { + noDocumentCondition : { + value: true + }, + contentPanel : { + value: 'rules' + }, + displayedList : { + value: null + }, + deserializedFromTemplate : { + value: function() { + console.log("styles view container - deserialized"); + } + }, + prepareForDraw : { + value: function() { + console.log("styles view container - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("styles view container - draw"); + } + } +}); \ No newline at end of file -- cgit v1.2.3 From a5ee11857f923d3e49b44c0a8c480e9d0b026d5b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:18:12 -0800 Subject: CSS Panel Update --- .../PanelContainer.reel/PanelContainer.js | 4 +++- js/panels/css-panel/css-panel.reel/css-panel.html | 4 ++-- .../css-panel/style-sheet.reel/style-sheet.html | 3 ++- .../css-panel/style-sheet.reel/style-sheet.js | 8 ++++--- .../style-sheets-view.reel/style-sheets-view.html | 25 +++++++++++++++------- .../style-sheets-view.reel/style-sheets-view.js | 8 +++++-- .../styles-view-container.html | 8 ++++--- 7 files changed, 40 insertions(+), 20 deletions(-) (limited to 'js/panels') diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index b8223471..db0f494b 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: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] + value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] }, panelOrder: { @@ -101,6 +102,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.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index cc1876c3..86bfbbb7 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -26,9 +26,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot }, "stylesViewContainer": { "module" : "js/panels/css-panel/styles-view-container.reel", - "name": "StyleSheetView", + "name": "StylesViewContainer", "properties": { - "element": {"#": "css-styles-view" } + "element": {"#": "styles-view-container" } } } } 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 4fb94335..43ffec6f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -20,7 +20,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module": "montage/ui/dynamic-text.reel", "name": "DynamicText", "properties": { - "element": {"#": "sheet-name"} + "element": {"#": "sheet-name"}, + "defaultText": "Style sheet" }, "bindings": { "value": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index daa614c2..a4fe5960 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -34,19 +34,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, - _styleSheet : { + _source : { value: null }, - styleSheet : { + source : { get: function() { - return this._styleSheet; + return this._source; }, set: function(sheet) { + console.log('sheet being set'); if(sheet.href) { this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); } else { this.name = 'Style Tag'; } + this._source = sheet; } } }); \ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html index 78836f21..d1dbfa2b 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html @@ -16,22 +16,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element" : {"#" : "style-sheet-view-container"} } }, + "arrayController" : { + "module" : "montage/ui/controller/array-controller", + "name": "ArrayController", + "bindings": { + "content": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "styleSheets", + "oneway": true + } + } + }, "styleSheetList": { "module" : "montage/ui/list.reel", "name": "List", "properties": { - "element": {"#": "sheet-list" } - }, - "bindings": { - "content": { - "boundObject": {"@": "owner" }, - "boundObjectPropertyPath": "styleSheets" - } + "element": {"#": "sheet-list" }, + "contentController": {"@": "arrayController"} } }, "sheet": { "module": "js/panels/css-panel/style-sheet.reel", "name": "StyleSheet", + "properties": { + "element": {"#": "sheet-item"} + }, "bindings": { "source": { "boundObject": {"@": "styleSheetList"}, @@ -61,7 +70,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot

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

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 f93de830..f8826b18 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 @@ -28,8 +28,12 @@ exports.StyleSheetsView = Montage.create(Component, { }, handleStyleSheetsReady : { value: function(e) { - //this.styleSheets = null; - this.styleSheets = this.stylesController.userStyleSheets; + this.noDocumentCondition = false; + + this.stylesController.userStyleSheets.forEach(function(sheet) { + this.styleSheets.push(sheet); + }, this); + } }, prepareForDraw : { 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 4b2bf60a..17ba6326 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 @@ -10,7 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
-

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

+
+
+

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

+
\ No newline at end of file -- cgit v1.2.3 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 --- .../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 ++++++++++++++++++++- 20 files changed, 740 insertions(+), 69 deletions(-) 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 (limited to 'js/panels') 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 +