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 ++++++++++++++++++++++++++ 3 files changed, 75 insertions(+) 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 (limited to 'js/components/toolbar.reel') 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 -- cgit v1.2.3 From 30e3f3d6c19025c37694127ac148146277681994 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 3 Apr 2012 14:43:52 -0700 Subject: CSS Panel - Stylesheet edit mode --- js/components/toolbar.reel/toolbar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html index 8ccce126..69eba194 100644 --- a/js/components/toolbar.reel/toolbar.html +++ b/js/components/toolbar.reel/toolbar.html @@ -18,7 +18,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } }, "button": { - "module": "js/components/button.reel", + "module": "montage/ui/button.reel", "name": "Button", "properties": { -- cgit v1.2.3 From 4cefebd99813f05713deb2f72bba0a035dfcb508 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 11:46:54 -0700 Subject: Toolbar - Add buttons to toolbar component --- js/components/toolbar.reel/toolbar.css | 39 ++++++++++++++++++++++++++++++ js/components/toolbar.reel/toolbar.html | 43 +++++++++++++++++++++++++++++++-- js/components/toolbar.reel/toolbar.js | 40 ++++++++++++++++++++++++++---- 3 files changed, 115 insertions(+), 7 deletions(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css index 1ffae912..e63b043e 100644 --- a/js/components/toolbar.reel/toolbar.css +++ b/js/components/toolbar.reel/toolbar.css @@ -3,12 +3,51 @@ 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 +-----------------------*/ + .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; + overflow: hidden; width: 100%; -webkit-box-flex: 0; +} +.toolbar-container ul, .toolbar-container li { + margin: 0; + padding: 0; +} + +/*--------------------- + Button Types +-----------------------*/ + +.toolbar-add-button { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D); +} + +/*--------------------- + Generic button styles +-----------------------*/ + +.toolbar-container .toolbar-button { + background-color: transparent; + background-repeat: no-repeat; + border-style: none; + border-radius: 4px; + height: 16px; + margin: 3px 5px 0 0; + padding: 0 2px; + opacity: .85; + text-indent: -9999999px; + width: 16px; + float: right; +} +.left-button { + float: left; } \ No newline at end of file diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html index 69eba194..53c6627a 100644 --- a/js/components/toolbar.reel/toolbar.html +++ b/js/components/toolbar.reel/toolbar.html @@ -14,14 +14,50 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/style-sheet.reel", "name" : "StyleSheet", "properties" : { - "element" : {"#" : "toolbar-container"} + "element" : {"#" : "toolbar-container"}, + "repetition": {"@": "buttonList" } } }, + + "buttonList": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "repetition"} + }, + "bindings": { + "objects" : { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "buttons", + "oneway": true + } + + } + }, + "button": { "module": "montage/ui/button.reel", "name": "Button", "properties": { - + "element": {"#": "button" }, + "label": " " + }, + "bindings": { + "label" : { + "boundObject": {"@": "buttonList"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.title", + "oneway": true + }, + "identifier": { + "boundObject": {"@": "buttonList"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.identifier", + "oneway": true + }, + "sourceObject": { + "boundObject": {"@": "buttonList"}, + "boundObjectPropertyPath": "objectAtCurrentIteration", + "oneway": true + } } } } @@ -29,6 +65,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot \ No newline at end of file diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index 79e7ff1f..03edf477 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js @@ -8,20 +8,50 @@ 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"); + _needsButtonProperties : { + value: null + }, + _buttons : { value: null }, + buttons : { + get: function() { + return this._buttons; + }, + set: function(btns) { + this._buttons = btns; + this._needsButtonProperties = true; + console.log("buttons set"); } }, prepareForDraw : { value: function() { console.log("toolbar - prepare for draw"); + if(this._needsButtonProperties) { + this.repetition.childComponents.forEach(function(button) { + button.identifier = button.sourceObject.identifier; + button.addEventListener('action', this.delegate, false); + }, this); + } } }, draw : { value: function() { - console.log("toolbar - draw"); + console.log("toolbar - draw - repetition ", this.repetition); + if(this._needsClass) { + + this.repetition.childComponents.forEach(function(button) { + button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button'); + }, this); + } + + if(this._needsButtonProperties) { + this._needsClass = this.needsDraw = true; + this._needsButtonProperties = false; + } + + } + }, + _needsClass : { + value: null } }); \ No newline at end of file -- cgit v1.2.3 From fc104084e964023263332dbf2d916bf00d525e8b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 3 May 2012 11:48:46 -0700 Subject: Panel Toolbar - Support hiding and showing of buttons --- js/components/toolbar.reel/toolbar.css | 13 ++++++-- js/components/toolbar.reel/toolbar.js | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 2 deletions(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css index e63b043e..b765f636 100644 --- a/js/components/toolbar.reel/toolbar.css +++ b/js/components/toolbar.reel/toolbar.css @@ -18,7 +18,13 @@ width: 100%; -webkit-box-flex: 0; } -.toolbar-container ul, .toolbar-container li { +.toolbar-container ul { + padding: 0 5px; + margin: 0; +} +.toolbar-container li { + display: inline-block; + float: right; margin: 0; padding: 0; } @@ -48,6 +54,9 @@ width: 16px; float: right; } -.left-button { +.toolbar-container .left-button { float: left; +} +.toolbar-container .hide-button { + display: none; } \ No newline at end of file diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index 03edf477..dbff2db6 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js @@ -11,6 +11,8 @@ exports.Toolbar = Montage.create(Component, { _needsButtonProperties : { value: null }, + leftAlignClass : { value: "left-button" }, + hideButtonClass : { value: "hide-button" }, _buttons : { value: null }, buttons : { get: function() { @@ -22,6 +24,44 @@ exports.Toolbar = Montage.create(Component, { console.log("buttons set"); } }, + + _buttonToHide : { + value: null + }, + _buttonToShow : { + value: null + }, + getButton : { + value: function(identifier) { + var buttons = this.repetition.childComponents, + buttonIds = buttons.map(function(component) { + return component.sourceObject.identifier; + }); + + return buttons[buttonIds.indexOf(identifier)]; + } + }, + hideButton : { + value: function(identifier) { + var button = this.getButton(identifier); + + if(button) { + this._buttonToHide = button; + this.needsDraw = true; + } + } + }, + showButton : { + value: function(identifier) { + var button = this.getButton(identifier); + + if(button) { + this._buttonToShow = button; + this.needsDraw = true; + } + } + }, + prepareForDraw : { value: function() { console.log("toolbar - prepare for draw"); @@ -40,7 +80,14 @@ exports.Toolbar = Montage.create(Component, { this.repetition.childComponents.forEach(function(button) { button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button'); + + ///// add left align class if specified in serialization + if(button.sourceObject.leftAlign) { + button.element.parentElement.classList.add(this.leftAlignClass); + } }, this); + + this._needsClass = false; } if(this._needsButtonProperties) { @@ -48,6 +95,14 @@ exports.Toolbar = Montage.create(Component, { this._needsButtonProperties = false; } + if(this._buttonToHide) { + this._buttonToHide.element.classList.add(this.hideButtonClass); + this._buttonToHide = null; + } + if(this._buttonToShow) { + this._buttonToShow.element.classList.remove(this.hideButtonClass); + this._buttonToShow = null; + } } }, -- cgit v1.2.3 From b52222a0e165825bf507b4f69b33d51c84eb85d4 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 15:11:40 -0700 Subject: CSS Panel - Fix errors from new Montage and remove logs. --- js/components/toolbar.reel/toolbar.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index dbff2db6..bc3cbd08 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js @@ -21,7 +21,6 @@ exports.Toolbar = Montage.create(Component, { set: function(btns) { this._buttons = btns; this._needsButtonProperties = true; - console.log("buttons set"); } }, @@ -64,7 +63,6 @@ exports.Toolbar = Montage.create(Component, { prepareForDraw : { value: function() { - console.log("toolbar - prepare for draw"); if(this._needsButtonProperties) { this.repetition.childComponents.forEach(function(button) { button.identifier = button.sourceObject.identifier; @@ -75,7 +73,6 @@ exports.Toolbar = Montage.create(Component, { }, draw : { value: function() { - console.log("toolbar - draw - repetition ", this.repetition); if(this._needsClass) { this.repetition.childComponents.forEach(function(button) { -- cgit v1.2.3 From a8e97144c832e355de7f8177ce38644119248e87 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 09:30:24 -0700 Subject: Style sheets view - Fixed drawing of toolbar and "no sheets" message --- js/components/toolbar.reel/toolbar.html | 8 +++----- js/components/toolbar.reel/toolbar.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html index 53c6627a..b33c4665 100644 --- a/js/components/toolbar.reel/toolbar.html +++ b/js/components/toolbar.reel/toolbar.html @@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -

diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index bc3cbd08..8f93aa2b 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js @@ -20,7 +20,7 @@ exports.Toolbar = Montage.create(Component, { }, set: function(btns) { this._buttons = btns; - this._needsButtonProperties = true; + this._needsButtonProperties = this.needsDraw = true;; } }, -- 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 --- js/components/toolbar.reel/toolbar.html | 24 +++--------------------- js/components/toolbar.reel/toolbar.js | 20 +++++++++++++++++--- 2 files changed, 20 insertions(+), 24 deletions(-) (limited to 'js/components/toolbar.reel') diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html index b33c4665..d2c5972a 100644 --- a/js/components/toolbar.reel/toolbar.html +++ b/js/components/toolbar.reel/toolbar.html @@ -25,12 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element": {"#": "repetition"} }, "bindings": { - "objects" : { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "buttons", - "oneway": true - } - + "objects": {"<-": "@owner.buttons"} } }, @@ -41,21 +36,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "label": " " }, "bindings": { - "label" : { - "boundObject": {"@": "buttonList"}, - "boundObjectPropertyPath": "objectAtCurrentIteration.title", - "oneway": true - }, - "identifier": { - "boundObject": {"@": "buttonList"}, - "boundObjectPropertyPath": "objectAtCurrentIteration.identifier", - "oneway": true - }, - "sourceObject": { - "boundObject": {"@": "buttonList"}, - "boundObjectPropertyPath": "objectAtCurrentIteration", - "oneway": true - } + "label": {"<-": "@buttonList.objectAtCurrentIteration.title"}, + "sourceObject": {"<-": "@buttonList.objectAtCurrentIteration"} } } } diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js index 8f93aa2b..2ccdb2c5 100644 --- a/js/components/toolbar.reel/toolbar.js +++ b/js/components/toolbar.reel/toolbar.js @@ -11,17 +11,31 @@ exports.Toolbar = Montage.create(Component, { _needsButtonProperties : { value: null }, + _sourceObject : { + value: null + }, + sourceObject : { + get: function() { + return this._sourceObject; + }, + set: function(value) { + if(value === this._sourceObject) { return; } + this._sourceObject = value; + }, + serializable: true + }, leftAlignClass : { value: "left-button" }, hideButtonClass : { value: "hide-button" }, - _buttons : { value: null }, + _buttons : { value: [], distinct: true }, buttons : { get: function() { return this._buttons; }, set: function(btns) { this._buttons = btns; - this._needsButtonProperties = this.needsDraw = true;; - } + this._needsButtonProperties = this.needsDraw = true; + }, + serializable: true }, _buttonToHide : { -- cgit v1.2.3