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/tools-properties') 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 --- .../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 @@ } } } - + -
-
- -
- -
- -
- - -
- -
+
+
+
+
 
+ +
+ +
+ +
+ + +
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 @@
- +
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 01a0ca1f..d08d0abd 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.css +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css @@ -4,7 +4,6 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - .optionsPenTool { padding: 6px; } @@ -16,11 +15,14 @@ .optionsPenTool .fillColorCtrl, .optionsPenTool .strokeColorCtrl { width: 20px; height: 18px; - margin: 2px 6px; + margin-left: 3px; + margin-right: 8px; + border: 1px black solid; } .optionsPenTool .colorCtrlIcon { width: 20px; height: 20px; - background-color: rgb(54, 54, 54); + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); } \ 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 176663df..9bae188e 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -40,10 +40,11 @@
-
-
+
+
+
 
diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.css b/js/components/tools-properties/pencil-properties.reel/pencil-properties.css deleted file mode 100755 index 7f1b0f7f..00000000 --- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.css +++ /dev/null @@ -1,6 +0,0 @@ -/* - 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. -
*/ - diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.html b/js/components/tools-properties/pencil-properties.reel/pencil-properties.html deleted file mode 100755 index fc5f541e..00000000 --- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - -
-
- - - \ No newline at end of file diff --git a/js/components/tools-properties/pencil-properties.reel/pencil-properties.js b/js/components/tools-properties/pencil-properties.reel/pencil-properties.js deleted file mode 100755 index e1be4b5e..00000000 --- a/js/components/tools-properties/pencil-properties.reel/pencil-properties.js +++ /dev/null @@ -1,25 +0,0 @@ -/* -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; -var Component = require("montage/ui/component").Component; -var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; - -exports.PencilProperties = Montage.create(ToolProperties, { - - - _subPrepare: { - value: function() { - //this.divElement.addEventListener("click", this, false); - } - }, - - handleClick: { - value: function(event) { - // this.selectedElement = event._event.target.id; - } - } -}); \ 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 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 @@
- +
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css index 7f1b0f7f..7969dff9 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css @@ -4,3 +4,19 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + .tagRadioButtons .fillColorCtrl { + width: 18px; + height: 18px; + margin-top: 6px; + margin-left: 3px; + margin-right: 8px; + border: 1px black solid; +} + + .tagRadioButtons .colorCtrlIcon { + width: 20px; + height: 20px; + margin-top: 6px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); +} \ No newline at end of file diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index c80ba36e..379c37a0 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -17,7 +17,9 @@ "properties": { "element": {"#": "tagProperties"}, - "divElement": {"#": "divTool"}, + "_fillColorCtrl": {"#": "fillColorCtrl"}, + + "divElement": {"#": "divTool"}, "imageElement": {"#": "imageTool"}, "videoElement": {"#": "videoTool"}, "canvasElement": {"#": "canvasTool"}, @@ -30,13 +32,17 @@ } } } - +
+
+
+
 
+ diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index 1caabc35..32063d9a 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js @@ -8,7 +8,7 @@ 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.TagProperties = Montage.create(ToolProperties, { +var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { divElement: { value: null, enumerable: false }, imageElement: { value: null, enumerable: false }, videoElement: { value: null, enumerable: false }, @@ -17,6 +17,24 @@ exports.TagProperties = Montage.create(ToolProperties, { classField: { value: null, enumerable: false }, customName: { value: null, enumerable: false }, customLabel: { value: null, enumerable: false }, + addedColorChips: { value: false }, + + _fill: { + enumerable: false, + value: { colorMode: 'nocolor', color: null, webGlColor: null } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, _subPrepare: { value: function() { @@ -31,6 +49,33 @@ exports.TagProperties = Montage.create(ToolProperties, { } }, + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(TagProperties).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); + } + } + }, + + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, + handleClick: { value: function(event) { this.selectedElement = event._event.target.id; -- 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 --- .../fill-properties.reel/fill-properties.css | 7 +++++++ .../fill-properties.reel/fill-properties.html | 5 ++--- .../selection-properties.reel/selection-properties.css | 8 ++++++-- .../selection-properties.reel/selection-properties.html | 12 ++++++------ .../shape-properties.reel/shape-properties.html | 2 +- 5 files changed, 22 insertions(+), 12 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.css b/js/components/tools-properties/fill-properties.reel/fill-properties.css index 7f1b0f7f..58b1c1e8 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.css +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css @@ -4,3 +4,10 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +.optionsFillTool { + padding: 6px; +} + + .optionsFillTool > * { + float:left; +} \ No newline at end of file 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 6532907e..abc2e843 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -34,9 +34,8 @@ -
- - +
+
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.css b/js/components/tools-properties/selection-properties.reel/selection-properties.css index e3fe1755..1d5eb513 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.css +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.css @@ -4,6 +4,10 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.selectionProperties { - margin-top: -6px; +.optionsSelectionTool { + padding: 6px; +} + + .optionsSelectionTool > * { + float:left; } \ No newline at end of file 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 f0b907af..3d2456c6 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.html +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html @@ -25,18 +25,18 @@ -
- +
+
-
-
+
+
-
+
-
+
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 1196fcee1c7e5e86edb387cdbc1b08d40926ca15 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 17:39:30 -0700 Subject: Fixed missing quote from last merge --- .../tools-properties/brush-properties.reel/brush-properties.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/tools-properties') 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 38b317e2..a820dd04 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -91,7 +91,7 @@
- +
-- cgit v1.2.3 From dd663d8fe9191cc57c9cebe6d425562cb45982c2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 07:25:09 -0700 Subject: Removed unused SubSelect Tool --- .../subselection-properties.html | 32 ---------------------- .../subselection-properties.js | 14 ---------- 2 files changed, 46 deletions(-) delete mode 100755 js/components/tools-properties/subselection-properties.reel/subselection-properties.html delete mode 100755 js/components/tools-properties/subselection-properties.reel/subselection-properties.js (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/subselection-properties.reel/subselection-properties.html b/js/components/tools-properties/subselection-properties.reel/subselection-properties.html deleted file mode 100755 index bde47659..00000000 --- a/js/components/tools-properties/subselection-properties.reel/subselection-properties.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - -
-
-
- - - \ No newline at end of file diff --git a/js/components/tools-properties/subselection-properties.reel/subselection-properties.js b/js/components/tools-properties/subselection-properties.reel/subselection-properties.js deleted file mode 100755 index bcd13642..00000000 --- a/js/components/tools-properties/subselection-properties.reel/subselection-properties.js +++ /dev/null @@ -1,14 +0,0 @@ -/* -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; -var Component = require("montage/ui/component").Component; -var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; - -exports.SubSelectionProperties = Montage.create(ToolProperties, { - - -}); \ No newline at end of file -- cgit v1.2.3 From 7dedf0735eec1d227b21291e1bb43dcdec93cbf3 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 09:55:02 -0700 Subject: -Removed id dependence of the tag tool options CSS -Separated the options3d CSS from the tag tool options css -Removed unused translateObjectToolContainer CSS class --- .../object3d-properties.reel/object3d-properties.html | 6 +++--- .../tools-properties/tag-properties.reel/tag-properties.html | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/object3d-properties.reel/object3d-properties.html b/js/components/tools-properties/object3d-properties.reel/object3d-properties.html index 1c9505a0..17bafacd 100755 --- a/js/components/tools-properties/object3d-properties.reel/object3d-properties.html +++ b/js/components/tools-properties/object3d-properties.reel/object3d-properties.html @@ -30,9 +30,9 @@
-
- - +
+ +
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index 9dbef6f6..bd4590ce 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -38,16 +38,16 @@
-
+
 
- - - - - + + + + +
 
-- cgit v1.2.3 From e973618155eeca6b3608c9d303669e20baeaf0ff Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 10:08:30 -0700 Subject: moved all tag tool css back into the scss file added extra padding before first input control --- .../tag-properties.reel/tag-properties.css | 17 ----------------- 1 file changed, 17 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css index 7969dff9..018448f1 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css @@ -3,20 +3,3 @@ 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. */ - - .tagRadioButtons .fillColorCtrl { - width: 18px; - height: 18px; - margin-top: 6px; - margin-left: 3px; - margin-right: 8px; - border: 1px black solid; -} - - .tagRadioButtons .colorCtrlIcon { - width: 20px; - height: 20px; - margin-top: 6px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} \ No newline at end of file -- cgit v1.2.3 From 3ae45590d320b4e13367f78f821b7abcd9dbc53a Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 14:47:41 -0700 Subject: removed unused classes form selection properties reel --- .../selection-properties.reel/selection-properties.css | 7 ------- 1 file changed, 7 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.css b/js/components/tools-properties/selection-properties.reel/selection-properties.css index 1d5eb513..7f1b0f7f 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.css +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.css @@ -4,10 +4,3 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.optionsSelectionTool { - padding: 6px; -} - - .optionsSelectionTool > * { - float:left; -} \ No newline at end of file -- 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 --- .../fill-properties.reel/fill-properties.css | 26 ++++++++++++++++-- .../fill-properties.reel/fill-properties.html | 9 ++++--- .../ink-bottle-properties.css | 31 ++++++++++++++++------ .../ink-bottle-properties.html | 24 +++++++---------- .../shape-properties.reel/shape-properties.html | 4 +-- 5 files changed, 64 insertions(+), 30 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.css b/js/components/tools-properties/fill-properties.reel/fill-properties.css index 58b1c1e8..fa2e75e6 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.css +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css @@ -7,7 +7,29 @@ .optionsFillTool { padding: 6px; } - - .optionsFillTool > * { +.optionsFillTool > * { + float:left; +} +.optionsFillTool > * > *{ float:left; +} + +.optionsFillTool label { + margin-right: 8px; +} +.optionsFillTool .colorCtrlIcon { + width: 20px; + height: 20px; + margin-top: 0px; + margin-left: 10px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); +} + +.materialsContainerOptions select { + margin-top: 2px; +} + +.materialsContainerOptions label { + margin-right: 0px; } \ No newline at end of file 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 fb59e2a8..9fb84a1b 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -35,10 +35,11 @@
- -
- -