- Stroke: -

+ Stroke: +

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 @@ } } - + -

Stroke:

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 @@ Size: -

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 2f21eb37a4e7afb4ba3273b3ec50964717448b2f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 17:16:04 -0700 Subject: Removing more id and changing the appropriate CSS for them Signed-off-by: Valerio Virgillito --- js/components/tools-properties/pen-properties.reel/pen-properties.html | 2 +- .../selection-properties.reel/selection-properties.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'js/components/tools-properties') 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 b3221456..68ab85f6 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -38,7 +38,7 @@

Stroke:

diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html index 728ffb0a..b93aacd0 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.html +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html @@ -26,7 +26,7 @@

- Transform Controls + Transform Controls

-- cgit v1.2.3 From dc93269cfa7c315d22d85c8217e2412749643f28 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:51:10 -0700 Subject: Removing unused components references Signed-off-by: Valerio Virgillito --- .../tools-properties/text-properties.reel/text-properties.html | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/components/tools-properties') 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 1e96d349..7fbec1da 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -21,13 +21,10 @@ "fontSelection": {"@": "fontSelection"}, "fontSettings": {"@": "fontSettings"}, "fontSize": {"@": "fontSize"}, - "fontColor": {"@": "fontColor"}, "btnBold": {"@": "btnBold"}, "btnItalic": {"@": "btnItalic"}, "btnUnderline": {"@": "btnUnderline"}, "btnStrikethrough": {"@": "btnStrikethrough"}, - "txtLink": {"@": "txtLink"}, - "linkTarget": {"@": "linkTarget"}, "alignLeft": {"@": "alignLeft"}, "alignCenter": {"@": "alignCenter"}, "alignRight": {"@": "alignRight"}, -- 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 --- .../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 ++++++++++++++++++++- 14 files changed, 172 insertions(+), 92 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/tools-properties') 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 @@ } } } - + -

- Width: -

- Hardness: -

- Smoothing -

- Calligraphic - Angle: -

- -

+ Width: +

+ Hardness: +

+ Smoothing +

+ Calligraphic + Angle: +

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, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + } + } + }, + _subPrepare: { value: function() { this.handleChange(null); @@ -37,6 +76,13 @@ exports.BrushProperties = Montage.create(ToolProperties, { } }, + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, + strokeSize: { get: function() { return this._strokeSize; } }, diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index b81b09ba..6532907e 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -35,7 +35,7 @@

- Use WebGL +