From c6d1a1da9e7cdf477daf32410d80691eb1e828d5 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 31 Jan 2012 13:54:35 -0800
Subject: Montage Native Widgets: Cleanup of current components
Cleaning up the current components support files:
- Clean the component tree
- Clean the app delegate and panel
Signed-off-by: Valerio Virgillito
+
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 51822150..338e7e0d 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -11,12 +11,74 @@ var Montage = require("montage/core/core").Montage, var treeControlModule = require("js/components/tree.reel"); var PIData = require("js/data/pi/pi-data").PiData; +String.prototype.capitalizeFirstChar = function() { + return this.charAt(0).toUpperCase() + this.slice(1); +}; + + var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { components: { value: null }, + componentsToLoad: { + value: null + }, + + componentsLoaded: { + value: 0 + }, + + data2: { + value: { + "text": "styles", + "children": [{ + "text": "Box Styles", + "children": [ + { + "text": "Border-Radius", + "classNameBase" : "border-radius", + "styles" : { + "border-radius": "100px", + "border" : "1px solid #333" + } + }, + { + "text": "Drop Shadow", + "classNameBase" : "drop-shadow", + "styles" : { + "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", + "border" : "1px solid #CCC" + } + }, + { + "text": "Fancy Box", + "classNameBase" : "fancy-box", + "styles" : { + "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", + "border" : "1px solid #FFF", + "border-radius": "30px", + "background-color": "#7db9e8", + "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)" + } + }] + }, { + "text": "Text Styles", + "children": [ + { "text": "Italic" }, + { "text": "Text Shadow" }, + { "text": "Text Color" } ] + }, { + "text": "Color Styles", + "children": [ + { "text": "Background Gradient" }, + { "text": "Background Color" }, + { "text": "Text Highlight" } ] + }] + } + }, + _testButtonJson: { value: { "component": "button", @@ -42,14 +104,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component didCreate: { value: function() { - this._loadComponents(); -// var req = new XMLHttpRequest(); -// req.identifier = "searchRequest"; -// req.open("GET", url); -// req.addEventListener("load", this, false); -// req.addEventListener("error", this, false); -// req.send(); + this._loadComponents(); } }, @@ -61,6 +117,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component {name: "Textfield", data: "node_modules/components-data/textfield.json"} ]; + this.componentsToLoad = this.components.length; + // Build the PI objects for each component for(var i = 0, component; component = this.components[i]; i++) { var req = new XMLHttpRequest(); @@ -70,39 +128,44 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component req.addEventListener("error", this, false); req.send(); -/* - var piIdentifier = component.name + "Pi"; - var piObj = []; - var section = {}; + } + + } + }, + + handleLoad: { + value: function(evt) { + var response = JSON.parse(evt.target.responseText); + var component = response.component.capitalizeFirstChar(); - section.label = component.name + " Properties"; - section.Section = []; + var piIdentifier = component + "Pi"; + var piObj = []; + var section = {}; - for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) { - var row = {}; - row.type = this.getControlType(props.type); - row.id = props.name; - row.prop = props.name; - row.defaultValue = props["default"]; - row.label = props.name; - section.Section.push([row]); - } + section.label = component + " Properties"; + section.Section = []; - PIData[piIdentifier] = []; - PIData[piIdentifier].push(section); - */ + for(var j = 0, props; props = response.properties[j]; j++) { + var row = {}; + row.type = this.getControlType(props.type); + row.id = props.name; + row.prop = props.name; + row.defaultValue = props["default"]; + row.label = props.name; + section.Section.push([row]); } - } - }, + PIData[piIdentifier] = []; + PIData[piIdentifier].push(section); - handleLoad: { - value: function(evt) { - var response = JSON.parse(evt.target.responseText); - console.log(response); + this.componentsLoaded++; + + if(this.componentsLoaded === this.componentsToLoad) { + console.log("all loaded"); + } } }, @@ -123,6 +186,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component prepareForDraw: { enumerable: false, value: function() { + var treeHolderDiv = document.getElementById("comp_tree"); var componentsTree = treeControlModule.Tree.create(); componentsTree.element = treeHolderDiv; @@ -130,6 +194,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component componentsTree.needsDraw = true; this.eventManager.addEventListener( "executeAddComponent", this, false); + } }, -- cgit v1.2.3 From 18f687974273b5ed7374ca5ae440c797064c5d0f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 7 Feb 2012 13:35:27 -0800 Subject: Presets Panel - Initial commit with panel content --- .../PanelContainer.reel/PanelContainer.js | 4 +- js/panels/presets/content.reel/content.css | 55 ++++++++++ js/panels/presets/content.reel/content.html | 66 ++++++++++++ js/panels/presets/content.reel/content.js | 106 ++++++++++++++++++ js/panels/presets/presets-panel.js | 15 +++ .../presets/style-presets.reel/style-presets.css | 0 .../presets/style-presets.reel/style-presets.html | 58 ++++++++++ .../presets/style-presets.reel/style-presets.js | 119 +++++++++++++++++++++ .../transitions-presets.css | 0 .../transitions-presets.html | 58 ++++++++++ .../transitions-presets.js | 67 ++++++++++++ 11 files changed, 547 insertions(+), 1 deletion(-) create mode 100644 js/panels/presets/content.reel/content.css create mode 100644 js/panels/presets/content.reel/content.html create mode 100644 js/panels/presets/content.reel/content.js create mode 100644 js/panels/presets/presets-panel.js create mode 100644 js/panels/presets/style-presets.reel/style-presets.css create mode 100644 js/panels/presets/style-presets.reel/style-presets.html create mode 100644 js/panels/presets/style-presets.reel/style-presets.js create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.css create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.html create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.js (limited to 'js/panels') diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 66333cc0..0569cc51 100644 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -15,6 +15,7 @@ var CSSPanel = require("js/panels/CSSPanel/CSSPanel").CSSPanel; var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel; 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; exports.PanelContainer = Montage.create(Component, { lastOffset: { @@ -44,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, { }, initPanelOrder: { - value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel'] + value: ['PresetsPanel','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel'] }, panelOrder: { @@ -93,6 +94,7 @@ exports.PanelContainer = Montage.create(Component, { // this.needsDraw = true; + this.addEventListener("change@appModel.PresetsPanel", this, false); this.addEventListener("change@appModel.PropertiesPanel", this, false); this.addEventListener("change@appModel.ProjectPanel", this, false); this.addEventListener("change@appModel.ColorPanel", this, false); diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css new file mode 100644 index 00000000..a6a1545f --- /dev/null +++ b/js/panels/presets/content.reel/content.css @@ -0,0 +1,55 @@ +.presetsPanel { + display: -webkit-box; + text-shadow: 1px 1px 0 #000; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.presetsPanel .treeRoot { + margin: 0 8px; +} +.tab-bar { + -webkit-box-flex: 0; + background-color: #282828; + color: #FFF; + display: -webkit-box; + font-size: 12px; + -webkit-box-orient: horizontal; +} + +.tab-bar div { + -webkit-box-flex: 0; + border-top-right-radius: 2px; + border-top-left-radius: 2px; + background-color: #474747; + background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px); + border-top: 1px solid rgb(100, 100, 100); + border-left: 1px solid rgba(100, 100, 100, 0.3); + border-right: 1px solid rgba(100, 100, 100, 0.3); + padding: 4px 9px; + cursor: pointer; + opacity: 0.6; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + z-index: 999; +} +.tab-bar div.active-tab { + background-image: none; + box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2); + position: relative; + opacity: 1; + text-overflow: clip; + z-index: 1001; +} + +.librarySlot { + -webkit-box-flex: 1; + overflow: auto; + background-color: #474747; + + color: #FFF; + + position: relative; + z-index: 1000; +} \ No newline at end of file diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html new file mode 100644 index 00000000..38de2a6d --- /dev/null +++ b/js/panels/presets/content.reel/content.html @@ -0,0 +1,66 @@ + + + +
+ + + + +
+