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') 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 ec862af55e5c3d564b37eac2744a1a6815f81f4d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 12 Mar 2012 15:28:40 -0700 Subject: Tree Node Component - Added method for handling source object set --- js/components/treeview/tree-node.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/components') diff --git a/js/components/treeview/tree-node.js b/js/components/treeview/tree-node.js index d7b864b5..fa6e1ba4 100644 --- a/js/components/treeview/tree-node.js +++ b/js/components/treeview/tree-node.js @@ -52,6 +52,10 @@ exports.TreeNode = Montage.create(Component, { }, this); } this._sourceObject = object; + + if(this.handleSourceObjectSet) { + this.handleSourceObjectSet(); + } } }, childNodes : { -- 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') 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 7246efab402664c75bd0de226c0b9a91b384839b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 11 Apr 2012 16:45:23 -0700 Subject: CSS Style - Add disabled UI state. Added Hintable and editable UI state. --- js/components/editable.reel/editable.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/components') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 9c8946c4..ef4096fd 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -122,7 +122,7 @@ exports.Editable = Montage.create(Component, { if(this.stopOnBlur) { console.log('adding mousedown event listener'); ///// Simulate blur on editable node by listening to the doc - document.addEventListener('mouseup', this, false); + document.addEventListener('mousedown', this, false); } this._sendEvent('start'); @@ -179,7 +179,7 @@ exports.Editable = Montage.create(Component, { this.accept(); } this.stop(); - document.removeEventListener('mouseup', this, false); + document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } }, @@ -202,7 +202,7 @@ exports.Editable = Montage.create(Component, { this._sendEvent('input'); } }, - handleMouseup : { + handleMousedown : { value : function(e) { console.log('handle mouse down'); ///// Listen for simulated blur event -- cgit v1.2.3 From 0e1f95945434475adbf33b2073b6f8d7240aca91 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 11:46:14 -0700 Subject: Editable - Pass event data with stop event --- js/components/editable.reel/editable.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'js/components') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index ef4096fd..1ebe33f1 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -131,11 +131,11 @@ exports.Editable = Montage.create(Component, { } }, stop : { - value: function() { + value: function(eventData) { this._isEditable = this._element.contentEditable = false; this._element.classList.remove(this.editingClass); - this._sendEvent('stop'); + this._sendEvent('stop', eventData); ///// if value is different than pre-edit val, call onchange method if(this._preEditValue !== this.value) { @@ -174,11 +174,11 @@ exports.Editable = Montage.create(Component, { } }, blur : { - value : function() { + value : function(eventData) { if(this._hint) { this.accept(); } - this.stop(); + this.stop(eventData); document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } @@ -207,7 +207,10 @@ exports.Editable = Montage.create(Component, { console.log('handle mouse down'); ///// Listen for simulated blur event if(this.stopOnBlur && e._event.target !== this._element) { - this.blur(); + this.blur({ + "originalEventType": "mousedown", + "originalEvent": e + }); } } }, @@ -221,9 +224,9 @@ exports.Editable = Montage.create(Component, { } }, _sendEvent : { - value : function(type) { + value : function(type, data) { var evt = document.createEvent("CustomEvent"); - evt.initCustomEvent(type, true, true); + evt.initCustomEvent(type, true, true, data); this.dispatchEvent(evt); } }, -- 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') 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 76e4821c207736f9f0d88de91246e2cf08f5f6c0 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:47:23 -0700 Subject: Editable - Add paste event handling/dispatching --- js/components/editable.reel/editable.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'js/components') diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 1ebe33f1..f2cf0e5d 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js @@ -39,7 +39,9 @@ exports.Editable = Montage.create(Component, { this._element = el; this._element.addEventListener('keydown', this, false); this._element.addEventListener('input', this, false); - + this._element.addEventListener('paste', this, false); + + if(this.startOnEvent) { this._element.addEventListener(this.startOnEvent, this, false); } @@ -136,7 +138,9 @@ exports.Editable = Montage.create(Component, { this._element.classList.remove(this.editingClass); this._sendEvent('stop', eventData); - + + document.removeEventListener('mousedown', this, false); + ///// if value is different than pre-edit val, call onchange method if(this._preEditValue !== this.value) { this._sendEvent('change'); @@ -179,7 +183,6 @@ exports.Editable = Montage.create(Component, { this.accept(); } this.stop(eventData); - document.removeEventListener('mousedown', this, false); this._sendEvent('blur'); } }, @@ -214,6 +217,11 @@ exports.Editable = Montage.create(Component, { } } }, + handlePaste : { + value: function(e) { + this._sendEvent('paste', e); + } + }, handleEvent : { value : function(e) { console.log("event type : " + e._event.type); -- cgit v1.2.3 From ae94b22c27b9b155e94bf140631e7faf8f55c6c0 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:47:42 -0700 Subject: Tree Controller -Delegate getter/setter --- js/components/controllers/tree-controller.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/components') diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js index 1e9222fd..cb95ca1d 100644 --- a/js/components/controllers/tree-controller.js +++ b/js/components/controllers/tree-controller.js @@ -23,6 +23,16 @@ var Montage = require("montage").Montage, */ var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { + _delegate : { value: null }, + delegate : { + get: function() { + return this._delegate; + }, + set: function(value) { + this._delegate = value; + } + }, + rootKey : { value: null }, -- cgit v1.2.3 From ce8fdcdb864c552d0d18c0fb5a1b03bc36522b43 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 15:41:08 -0700 Subject: Fixing bindings to new model --- js/components/layout/documents-tab.reel/documents-tab.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/components') diff --git a/js/components/layout/documents-tab.reel/documents-tab.html b/js/components/layout/documents-tab.reel/documents-tab.html index 1516a8ce..a2070471 100755 --- a/js/components/layout/documents-tab.reel/documents-tab.html +++ b/js/components/layout/documents-tab.reel/documents-tab.html @@ -33,17 +33,17 @@ }, "name": { "boundObject": {"@": "repetition1"}, - "boundObjectPropertyPath": "objectAtCurrentIteration.name", + "boundObjectPropertyPath": "objectAtCurrentIteration.model.file.name", "oneway": true }, "saveFlag": { "boundObject": {"@": "repetition1"}, - "boundObjectPropertyPath": "objectAtCurrentIteration.needsSave", + "boundObjectPropertyPath": "objectAtCurrentIteration.model.needsSave", "oneway": true }, "active": { "boundObject": {"@": "repetition1"}, - "boundObjectPropertyPath": "objectAtCurrentIteration.isActive", + "boundObjectPropertyPath": "objectAtCurrentIteration.model.isActive", "oneway": true } } -- cgit v1.2.3 From 8bea1e0807f36595d762592c030d4810396ada85 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 15:30:27 -0700 Subject: CSS Panel - Add focus management to styles view delegate --- js/components/treeview/treeview.reel/treeview.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/components') diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js index ebbfe685..9f78d36d 100644 --- a/js/components/treeview/treeview.reel/treeview.js +++ b/js/components/treeview/treeview.reel/treeview.js @@ -11,6 +11,7 @@ exports.Treeview = Montage.create(Component, { substitution : { value : null }, data : { value : null }, + rootBranch : { value : null }, _hasBeenDeserialized: { value: false, @@ -54,6 +55,8 @@ exports.Treeview = Montage.create(Component, { this.slot.content = rootBranch; rootBranch.sourceObject = this.contentController.root; rootBranch.needsDraw = true; + this.rootBranch = rootBranch; + this.needsDraw = true; } @@ -85,6 +88,8 @@ exports.Treeview = Montage.create(Component, { if (this._contentController) { +//this._initializeRootBranch(); + // And bind what we need from the new contentController var selectedIndexesBindingDescriptor; -- 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') 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 1a759361b82127f9d5c1428dc889fffdf2daaf86 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 3 May 2012 15:11:56 -0700 Subject: First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools. --- .../brush-properties.reel/brush-properties.js | 1 + .../line-properties.reel/line-properties.js | 8 ++ .../oval-properties.reel/oval-properties.js | 8 ++ .../pen-properties.reel/pen-properties.css | 20 ++++ .../pen-properties.reel/pen-properties.html | 16 ++- .../pen-properties.reel/pen-properties.js | 83 +++++++++++++- .../rect-properties.reel/rect-properties.js | 10 +- .../shape-properties.reel/shape-properties.css | 22 +++- .../shape-properties.reel/shape-properties.html | 14 ++- .../shape-properties.reel/shape-properties.js | 125 +++++++++++++++++---- .../text-properties.reel/text-properties.html | 4 +- .../text-properties.reel/text-properties.js | 1 - 12 files changed, 274 insertions(+), 38 deletions(-) (limited to 'js/components') diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js index fdcd50f8..677cd2d9 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js @@ -36,6 +36,7 @@ exports.BrushProperties = Montage.create(ToolProperties, { } } }, + strokeSize: { get: function() { return this._strokeSize; } }, diff --git a/js/components/tools-properties/line-properties.reel/line-properties.js b/js/components/tools-properties/line-properties.reel/line-properties.js index e1ecf790..ce8c0494 100755 --- a/js/components/tools-properties/line-properties.reel/line-properties.js +++ b/js/components/tools-properties/line-properties.reel/line-properties.js @@ -24,6 +24,14 @@ exports.LineProperties = Montage.create(ToolProperties, { }, // Public API + fill: { + get: function () { return this.base.fill; } + }, + + stroke: { + get: function () { return this.base.stroke; } + }, + use3D: { get: function() { return this.base._use3D; } }, diff --git a/js/components/tools-properties/oval-properties.reel/oval-properties.js b/js/components/tools-properties/oval-properties.reel/oval-properties.js index ddeb64ee..3edd9214 100755 --- a/js/components/tools-properties/oval-properties.reel/oval-properties.js +++ b/js/components/tools-properties/oval-properties.reel/oval-properties.js @@ -24,6 +24,14 @@ exports.OvalProperties = Montage.create(ToolProperties, { }, // Public API + fill: { + get: function () { return this.base.fill; } + }, + + stroke: { + get: function () { return this.base.stroke; } + }, + use3D: { get: function() { return this.base._use3D; } }, diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css index 7f1b0f7f..01a0ca1f 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.css +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css @@ -4,3 +4,23 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + + .optionsPenTool { + padding: 6px; +} + + .optionsPenTool > * { + float:left; +} + + .optionsPenTool .fillColorCtrl, .optionsPenTool .strokeColorCtrl { + width: 20px; + height: 18px; + margin: 2px 6px; +} + + .optionsPenTool .colorCtrlIcon { + width: 20px; + height: 20px; + background-color: rgb(54, 54, 54); +} \ No newline at end of file diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index e835f69d..176663df 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -28,20 +28,24 @@ "prototype": "js/components/tools-properties/pen-properties.reel", "properties": { "element": {"#": "penProperties"}, + "_fillColorCtrl": {"#": "fillColorCtrl"}, + "_strokeColorCtrl": {"#": "strokeColorCtrl"}, "_strokeSize": {"@": "strokeSizeHT"} } } } - + -
-
- -
-
+
+
+
+
+
+ +
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js index b57f9a6f..cd205e07 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js @@ -7,8 +7,87 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage; var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; -exports.PenProperties = Montage.create(ToolProperties, { +var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { + addedColorChips: { value: false }, + + _fill: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } + }, + + _stroke: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] } + }, + + stroke: { + enumerable: true, + get: function () { + return this._stroke; + }, + set: function (value) { + if (value !== this._stroke) { + this._stroke = value; + } + } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + strokeSize: { - get: function() { return this._strokeSize; } + get: function () { + return this._strokeSize; + } + }, + + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(PenProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + // setup fill color + this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); + + // setup stroke color + this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + } + } + }, + + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, + + handleStrokeColorChange: { + value: function (e) { + this.stroke = e._event; + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } } }); \ No newline at end of file diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index f023f4bb..c1cb3945 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js @@ -42,6 +42,14 @@ exports.RectProperties = Montage.create(ToolProperties, { }, // Public API + fill: { + get: function () { return this.base.fill; } + }, + + stroke: { + get: function () { return this.base.stroke; } + }, + use3D: { get: function() { return this.base._use3D; } }, @@ -125,6 +133,4 @@ exports.RectProperties = Montage.create(ToolProperties, { } } - - }); \ No newline at end of file diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css index 0441c1cf..6efa615c 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -2,4 +2,24 @@ 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 + */ + + .optionsShapeTool { + padding: 6px; +} + + .optionsShapeTool > * { + float:left; +} + + .optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl { + width: 20px; + height: 18px; + margin: 2px 6px; +} + + .optionsShapeTool .colorCtrlIcon { + width: 20px; + height: 20px; + background-color: rgb(54, 54, 54); +} \ No newline at end of file diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index 117664a3..d3faab75 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -36,6 +36,7 @@ } }, + "_strokeSize1": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { @@ -108,6 +109,10 @@ "_materialLabel": {"#": "materialLabel"}, "_strokeIcon": {"#": "strokeIcon"}, + "_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"}, + "_fillColorCtrl": {"#": "fillColorCtrl"}, + "_strokeColorCtrl": {"#": "strokeColorCtrl"}, + "_strokeSize": {"@": "_strokeSize1"}, "ovalProperties": {"@": "ovalProperties1"}, "rectProperties": {"@": "rectProperties1"}, @@ -121,20 +126,23 @@ } } - + -
+
+
+
+
+
-
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 79567453..74875544 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -8,12 +8,75 @@ var Montage = require("montage/core/core").Montage, ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; -exports.ShapeProperties = Montage.create(ToolProperties, { +var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { toolsData: { value: null }, - _use3D: { value: false }, + _use3D: { value: false }, + addedColorChips: { value: false }, + + _fill: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } + //this._fillColorCtrl.color('nocolor', null); + }, + + _stroke: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] } + }, + + stroke: { + enumerable: true, + get: function () { + return this._stroke; + }, + set: function (value) { + if (value !== this._stroke) { + this._stroke = value; + } + } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(ShapeProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + // setup fill color + this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); + + // setup stroke color + this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + } + } + }, _subPrepare: { - value: function() { + value: function () { this.rectProperties.visible = true; Object.defineBinding(this._strokeMaterial, "items", { @@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, { } }, - _selectedSubTool: { value: null, enumerable: false}, + _selectedSubTool: { value: null, enumerable: false }, - selectedSubTool : { - get: function() { return this._selectedSubTool;}, - set: function(value) { - if(value) { + selectedSubTool: { + get: function () { return this._selectedSubTool; }, + set: function (value) { + if (value) { - this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; + this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; this._selectedSubTool = value; this[this._selectedSubTool.properties].visible = true; - if(this._useWebGL.checked) - { - if(this._selectedSubTool.id === "LineTool") { + if (this._selectedSubTool.id === "LineTool") { + this._fillColorCtrl.style["display"] = "none"; + this._fillColorCtrl.visible = false; + this._fillColorCtrlIcon.style["display"] = "none"; + this._fillColorCtrlIcon.visible = false; + } else { + this._fillColorCtrl.style["display"] = ""; + this._fillColorCtrl.visible = true; + this._fillColorCtrlIcon.style["display"] = ""; + this._fillColorCtrlIcon.visible = true; + } + + if (this._useWebGL.checked) { + if (this._selectedSubTool.id === "LineTool") { this._fillIcon.style["display"] = "none"; this._fillMaterial.visible = false; } else { @@ -55,27 +129,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, { this._fillMaterial.visible = true; } } - } } }, handleChange: { - value: function(event) { - if(this._useWebGL.checked) - { + value: function (event) { + if (this._useWebGL.checked) { this._use3D = true; this._materialLabel.style["display"] = ""; this._strokeIcon.style["display"] = ""; this._strokeMaterial.visible = true; - if(this.selectedSubTool.id !== "LineTool") - { + if (this.selectedSubTool.id !== "LineTool") { this._fillIcon.style["display"] = ""; this._fillMaterial.visible = true; } } - else - { + else { this._use3D = false; this._materialLabel.style["display"] = "none"; this._strokeIcon.style["display"] = "none"; @@ -84,6 +154,19 @@ exports.ShapeProperties = Montage.create(ToolProperties, { this._fillMaterial.visible = false; } } - } + }, + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, + + handleStrokeColorChange: { + value: function (e) { + this.stroke = e._event; + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + } }); diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index 03786d76..23de2bca 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -21,7 +21,7 @@ "fontSelection": {"@": "fontSelection"}, "fontSettings": {"@": "fontSettings"}, "fontSize": {"@": "fontSize"}, - "fontColor": {"@": "fontColor"}, + "fontColor": {"#": "fontColorCtrl"}, "btnBold": {"@": "btnBold"}, "btnItalic": {"@": "btnItalic"}, "btnUnderline": {"@": "btnUnderline"}, @@ -306,7 +306,7 @@ -
+
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index 88d38ffe..fa2ec066 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -202,7 +202,6 @@ exports.TextProperties = Montage.create(ToolProperties, { if (!this.initialized) { //Setup Font Selection tool - this.fontColor = this.element.getElementsByClassName("fontColor")[0]; this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; this.application.ninja.colorController.addButton("chip", this.fontColor); this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); -- cgit v1.2.3 From 29ad6355ef60cfb3b3fc7f780504f3ed30845883 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 14:30:47 -0700 Subject: More implementation of moving color chips to the individual subtools. Removed the tool color bar Added new icons for inkbottle Removed Pencil tool Removed Inkbottle tool Added chips to the pen, brush and tag tools Aligned controls in several subtools --- .../layout/tools-list.reel/tools-list.html | 10 ----- js/components/layout/tools-list.reel/tools-list.js | 4 -- .../tools-properties.reel/tools-properties.html | 16 -------- .../brush-properties.reel/brush-properties.css | 22 ++++++++++ .../brush-properties.reel/brush-properties.html | 29 ++++++------- .../brush-properties.reel/brush-properties.js | 48 +++++++++++++++++++++- .../fill-properties.reel/fill-properties.html | 2 +- .../pen-properties.reel/pen-properties.css | 8 ++-- .../pen-properties.reel/pen-properties.html | 5 ++- .../pencil-properties.reel/pencil-properties.css | 6 --- .../pencil-properties.reel/pencil-properties.html | 31 -------------- .../pencil-properties.reel/pencil-properties.js | 25 ----------- .../shape-properties.reel/shape-properties.css | 7 +++- .../shape-properties.reel/shape-properties.html | 8 ++-- .../tag-properties.reel/tag-properties.css | 16 ++++++++ .../tag-properties.reel/tag-properties.html | 10 ++++- .../tag-properties.reel/tag-properties.js | 47 ++++++++++++++++++++- js/components/ui/color-chip.reel/color-chip.css | 10 ----- 18 files changed, 172 insertions(+), 132 deletions(-) delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.css delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.html delete mode 100755 js/components/tools-properties/pencil-properties.reel/pencil-properties.js (limited to 'js/components') diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html index acee20b2..f559e748 100755 --- a/js/components/layout/tools-list.reel/tools-list.html +++ b/js/components/layout/tools-list.reel/tools-list.html @@ -85,9 +85,6 @@ "LineTool1": { "prototype": "js/tools/LineTool" }, - "PencilTool1": { - "prototype": "js/tools/PencilTool" - }, "BrushTool1": { "prototype": "js/tools/BrushTool" }, @@ -97,9 +94,6 @@ "InkBottleTool1": { "prototype": "js/tools/InkBottleTool" }, - "EyedropperTool1": { - "prototype": "js/tools/EyedropperTool" - }, "EraserTool1": { "prototype": "js/tools/EraserTool" }, @@ -142,11 +136,9 @@ "OvalTool": {"@": "OvalTool1"}, "RectTool": {"@": "RectTool1"}, "LineTool": {"@": "LineTool1"}, - "PencilTool": {"@": "PencilTool1"}, "BrushTool": {"@": "BrushTool1"}, "FillTool": {"@": "FillTool1"}, "InkBottleTool": {"@": "InkBottleTool1"}, - "EyedropperTool": {"@": "EyedropperTool1"}, "EraserTool": {"@": "EraserTool1"}, "RotateStageTool3D": {"@": "RotateStageTool3D1"}, "PanTool": {"@": "PanTool1"}, @@ -169,8 +161,6 @@
- -
diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js index d68e8a56..ed4ee45f 100755 --- a/js/components/layout/tools-list.reel/tools-list.js +++ b/js/components/layout/tools-list.reel/tools-list.js @@ -20,11 +20,9 @@ exports.ToolsList = Montage.create(Component, { OvalTool: { value: null }, RectTool: { value: null }, LineTool: { value: null }, - PencilTool: { value: null }, BrushTool: { value: null }, FillTool: { value: null }, InkBottleTool: { value: null }, - EyedropperTool: { value: null }, EraserTool: { value: null }, RotateStageTool3D: { value: null }, PanTool: { value: null }, @@ -68,10 +66,8 @@ exports.ToolsList = Montage.create(Component, { this.OvalTool.options = this.application.ninja.toolsProperties.shapeProperties.ovalProperties; this.RectTool.options = this.application.ninja.toolsProperties.shapeProperties.rectProperties; this.LineTool.options = this.application.ninja.toolsProperties.shapeProperties.lineProperties; - this.PencilTool.options = this.application.ninja.toolsProperties.pencilProperties; this.BrushTool.options = this.application.ninja.toolsProperties.brushProperties; - this.EyedropperTool.options = this.application.ninja.toolsProperties.eyedropperProperties; this.EraserTool.options = this.application.ninja.toolsProperties.eraserProperties; this.RotateStageTool3D.options = this.application.ninja.toolsProperties.rotateStageProperties; this.PanTool.options = this.application.ninja.toolsProperties.panProperties; diff --git a/js/components/layout/tools-properties.reel/tools-properties.html b/js/components/layout/tools-properties.reel/tools-properties.html index 8dd0f713..c51ab27d 100755 --- a/js/components/layout/tools-properties.reel/tools-properties.html +++ b/js/components/layout/tools-properties.reel/tools-properties.html @@ -66,12 +66,6 @@ } } }, - "pencilProperties1": { - "prototype": "js/components/tools-properties/pencil-properties.reel", - "properties": { - "element": {"#": "pencilProperties"} - } - }, "brushProperties1": { "prototype": "js/components/tools-properties/brush-properties.reel", "properties": { @@ -90,12 +84,6 @@ "element": {"#": "inkbottleProperties"} } }, - "eyedropperProperties1": { - "prototype": "js/components/tools-properties/eyedropper-properties.reel", - "properties": { - "element": {"#": "eyedropperProperties"} - } - }, "eraserProperties1": { "prototype": "js/components/tools-properties/eraser-properties.reel", "properties": { @@ -147,11 +135,9 @@ "penProperties": {"@": "penProperties1"}, "textProperties": {"@": "textProperties1"}, "shapeProperties": {"@": "shapeProperties1"}, - "pencilProperties": {"@": "pencilProperties1"}, "brushProperties": {"@": "brushProperties1"}, "fillProperties": {"@": "fillProperties1"}, "inkbottleProperties": {"@": "inkbottleProperties1"}, - "eyedropperProperties": {"@": "eyedropperProperties1"}, "eraserProperties": {"@": "eraserProperties1"}, "rotateStageProperties": {"@": "rotateStageProperties1"}, "panProperties": {"@": "panProperties1"}, @@ -179,11 +165,9 @@
-
-
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.css b/js/components/tools-properties/brush-properties.reel/brush-properties.css index 7f1b0f7f..0912dd7e 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.css +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.css @@ -3,4 +3,26 @@ 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. */ + + .optionsBrushTool { + padding: 6px; +} + .optionsBrushTool > * { + float:left; +} + + .optionsBrushTool .fillColorCtrl { + width: 20px; + height: 18px; + margin-left: 3px; + margin-right: 8px; + border: 1px black solid; +} + + .optionsBrushTool .colorCtrlIcon { + width: 20px; + height: 20px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); +} \ No newline at end of file diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index b0c02734..e4cd69b8 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -64,6 +64,7 @@ "prototype": "js/components/tools-properties/brush-properties.reel", "properties": { "element": {"#": "brushProperties"}, + "_fillColorCtrl": {"#": "fillColorCtrl"}, "_strokeSize": {"@": "strokeSizeHT"}, "_strokeHardness": {"@": "strokeHardnessHT"}, "_doSmoothing": {"#": "doSmoothing"}, @@ -74,24 +75,24 @@ } } } - + -
-
- -
- -
- -
- - -
- -
+
+
+
+
 
+ +
+ +
+ +
+ + +
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js index 677cd2d9..7a0d21f1 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js @@ -8,7 +8,46 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; -exports.BrushProperties = Montage.create(ToolProperties, { +var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, { + addedColorChips: { value: false }, + + _fill: { + enumerable: false, + value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(BrushProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true,