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. --- .../shape-properties.reel/shape-properties.css | 22 +++- .../shape-properties.reel/shape-properties.html | 14 ++- .../shape-properties.reel/shape-properties.js | 125 +++++++++++++++++---- 3 files changed, 136 insertions(+), 25 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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); + } + } }); -- 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 --- .../tools-properties/shape-properties.reel/shape-properties.css | 7 +++++-- .../tools-properties/shape-properties.reel/shape-properties.html | 8 ++++---- 2 files changed, 9 insertions(+), 6 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 6efa615c..1100bc70 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -5,7 +5,7 @@ */ .optionsShapeTool { - padding: 6px; + padding: 4px; } .optionsShapeTool > * { @@ -16,10 +16,13 @@ width: 20px; height: 18px; margin: 2px 6px; + border: 1px black solid; } .optionsShapeTool .colorCtrlIcon { width: 20px; height: 20px; - background-color: rgb(54, 54, 54); + margin-top: 2px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); } \ 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 d3faab75..3c492e6e 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -136,11 +136,11 @@
-
-
- +
+
+
 
@@ -149,7 +149,7 @@
- +
-- cgit v1.2.3 From 33bb9b7e97e9ec3bd664b3e1c3e7297ba8d07ede Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 15:44:18 -0700 Subject: more work on making subtool styling/layout consistent --- .../tools-properties/shape-properties.reel/shape-properties.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 3c492e6e..cc3534f2 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -149,7 +149,7 @@
- +
-- cgit v1.2.3 From 9f0754eb0c619e9e33df707f24eed1dd6ae95096 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 14:48:28 -0700 Subject: implemented proper styling for shape, inkbottle and fill tools make all icons for fill and stroke use the proper classes/images --- .../tools-properties/shape-properties.reel/shape-properties.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 e84f8092..9363365e 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -152,12 +152,12 @@ -
+
-
+
-- cgit v1.2.3 From 7dd942b6e19d2d7a779bc50e7bf4c8f8780b8f3a Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 14:19:14 -0700 Subject: Correct layout and styling for the shape tool and its sub tools --- .../shape-properties.reel/shape-properties.css | 19 ++++++++++++++++--- .../shape-properties.reel/shape-properties.html | 3 ++- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 1100bc70..4dc64d66 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -5,17 +5,26 @@ */ .optionsShapeTool { - padding: 4px; + padding: 6px; } .optionsShapeTool > * { float:left; } +.optionsShapeTool select.nj-skinned { + margin-top: 2px; +} + +.optionsShapeTool .shapeCustomProps { + margin-top: -3px; + margin-left: -31px; +} + .optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl { width: 20px; height: 18px; - margin: 2px 6px; + margin: 1px 6px; border: 1px black solid; } @@ -25,4 +34,8 @@ margin-top: 2px; -webkit-transform: scale(0.8); background-color: rgb(40, 40, 40); -} \ No newline at end of file +} + +.optionsShapeTool checkbox { + padding: 6px; +} 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 9363365e..c54f8b25 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -136,6 +136,7 @@
+
 
@@ -143,7 +144,7 @@
 
-
+
-- cgit v1.2.3 From 18370abcf406c6ab36d5c5f2613cb79e756ff6d2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 18:07:32 -0700 Subject: -Consolidated many redundant css classes used in the tool options bars --- .../shape-properties.reel/shape-properties.css | 23 ---------------------- .../shape-properties.reel/shape-properties.html | 14 ++++++------- .../shape-properties.reel/shape-properties.js | 1 - 3 files changed, 7 insertions(+), 31 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 4dc64d66..c1f8a8ce 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -4,14 +4,6 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - .optionsShapeTool { - padding: 6px; -} - - .optionsShapeTool > * { - float:left; -} - .optionsShapeTool select.nj-skinned { margin-top: 2px; } @@ -21,21 +13,6 @@ margin-left: -31px; } - .optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl { - width: 20px; - height: 18px; - margin: 1px 6px; - border: 1px black solid; -} - - .optionsShapeTool .colorCtrlIcon { - width: 20px; - height: 20px; - margin-top: 2px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} - .optionsShapeTool checkbox { padding: 6px; } 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 c54f8b25..c6aa0c94 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -132,15 +132,15 @@ -
+
 
-
-
-
-
+
+
+
+
 
@@ -153,12 +153,12 @@ -
+
-
+
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 74875544..23158493 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -16,7 +16,6 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { _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: { -- cgit v1.2.3 From 3be15e2076f2d3d46862bbc0ea078b9bf2e161fe Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 10 May 2012 11:17:42 -0700 Subject: -moved sel tool images to proper folder -finished styling shape tool options -added new icons for shape tool --- .../shape-properties.reel/shape-properties.css | 9 +++++++-- .../shape-properties.reel/shape-properties.html | 10 +++++----- .../tools-properties/shape-properties.reel/shape-properties.js | 2 ++ 3 files changed, 14 insertions(+), 7 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 c1f8a8ce..70a0e780 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -9,10 +9,15 @@ } .optionsShapeTool .shapeCustomProps { - margin-top: -3px; - margin-left: -31px; + margin-top: 0px; + margin-left: -7px; } .optionsShapeTool checkbox { padding: 6px; + margin-left: 4px; } + +.optionsShapeTool .hottextunit { + /*width: 46px;*/ +} \ 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 c6aa0c94..9b523a3f 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -118,6 +118,8 @@ "rectProperties": {"@": "rectProperties1"}, "lineProperties": {"@": "lineProperties1"}, + "endDivider": {"#": "endDivider"}, + "components": [ {"@": "repetition1"} ] @@ -144,14 +146,14 @@
 
+
 
- +
 
-
@@ -160,9 +162,7 @@
- - +
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 23158493..bd0cf8cf 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -112,11 +112,13 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { this._fillColorCtrl.visible = false; this._fillColorCtrlIcon.style["display"] = "none"; this._fillColorCtrlIcon.visible = false; + this.endDivider.style["display"] = "none"; } else { this._fillColorCtrl.style["display"] = ""; this._fillColorCtrl.visible = true; this._fillColorCtrlIcon.style["display"] = ""; this._fillColorCtrlIcon.visible = true; + this.endDivider.style["display"] = ""; } if (this._useWebGL.checked) { -- cgit v1.2.3 From d32cf39a8ef1e2d2fb50f1183c5546fdac83b396 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 10 May 2012 11:18:10 -0700 Subject: removed unnecessary css class --- .../tools-properties/shape-properties.reel/shape-properties.css | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel') 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 70a0e780..49d0c778 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -16,8 +16,4 @@ .optionsShapeTool checkbox { padding: 6px; margin-left: 4px; -} - -.optionsShapeTool .hottextunit { - /*width: 46px;*/ } \ No newline at end of file -- cgit v1.2.3