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