diff options
| author | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
|---|---|---|
| committer | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
| commit | c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (patch) | |
| tree | 01be4d0fe4c96de8270411a32bb76378769d5b2d /js/components/tools-properties | |
| parent | 27f4cacb39de1c2e3910748dadc9fc16d0655480 (diff) | |
| parent | 26c4d00b3e5d39c1c313d48433abebd06f386a85 (diff) | |
| download | ninja-c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac.tar.gz | |
Merge pull request #239 from mayhewinator/WorkingBranch
Tool Options styling and Icon update
Diffstat (limited to 'js/components/tools-properties')
38 files changed, 701 insertions, 315 deletions
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..102a79db 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,5 @@ | |||
| 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
| 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
| 5 | </copyright> */ | 5 | </copyright> */ |
| 6 | |||
| 6 | 7 | ||
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 e7aaf0e8..7d99a42a 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 @@ | |||
| 64 | "prototype": "js/components/tools-properties/brush-properties.reel", | 64 | "prototype": "js/components/tools-properties/brush-properties.reel", |
| 65 | "properties": { | 65 | "properties": { |
| 66 | "element": {"#": "brushProperties"}, | 66 | "element": {"#": "brushProperties"}, |
| 67 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | ||
| 67 | "_strokeSize": {"@": "strokeSizeHT"}, | 68 | "_strokeSize": {"@": "strokeSizeHT"}, |
| 68 | "_strokeHardness": {"@": "strokeHardnessHT"}, | 69 | "_strokeHardness": {"@": "strokeHardnessHT"}, |
| 69 | "_doSmoothing": {"#": "doSmoothing"}, | 70 | "_doSmoothing": {"#": "doSmoothing"}, |
| @@ -79,19 +80,19 @@ | |||
| 79 | </head> | 80 | </head> |
| 80 | 81 | ||
| 81 | <body> | 82 | <body> |
| 82 | <div data-montage-id="brushProperties" class="subToolHolderPanel"> | 83 | <div data-montage-id="brushProperties" class="subToolHolderPanel toolOptionsFloatChildren"> |
| 83 | <div data-montage-id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> | 84 | <div class="toolColorChipIcon FillTool"></div> |
| 84 | <label class="label"> Width:</label> | 85 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> |
| 85 | <div data-montage-id="strokeSize" class="label"></div> | 86 | <div class="nj-divider divider-vertical"> </div> |
| 86 | <label class="label"> Hardness:</label> | 87 | <label class="label"> Width:</label> |
| 87 | <div data-montage-id="strokeHardness" class="label"></div> | 88 | <div data-montage-id="strokeSize" class="label"></div> |
| 88 | <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label> | 89 | <label class="label"> Hardness:</label> |
| 89 | <div data-montage-id="smoothingAmount" class="label"></div> | 90 | <div data-montage-id="strokeHardness" class="label"></div> |
| 90 | <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label> | 91 | <input data-montage-id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label> |
| 91 | <label class="label" id="angleLabel"> Angle:</label> | 92 | <div data-montage-id="smoothingAmount" class="label"></div> |
| 92 | <div data-montage-id="strokeAngle" class="label"></div> | 93 | <input data-montage-id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label> |
| 93 | 94 | <label data-montage-id="angleLabel" class="label"">Angle:</label> | |
| 94 | </div> | 95 | <div data-montage-id="strokeAngle" class="label"></div> |
| 95 | </div> | 96 | </div> |
| 96 | </body> | 97 | </body> |
| 97 | 98 | ||
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..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; | |||
| 8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
| 9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
| 10 | 10 | ||
| 11 | exports.BrushProperties = Montage.create(ToolProperties, { | 11 | var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, { |
| 12 | addedColorChips: { value: false }, | ||
| 13 | |||
| 14 | _fill: { | ||
| 15 | enumerable: false, | ||
| 16 | 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] } | ||
| 17 | }, | ||
| 18 | |||
| 19 | fill: { | ||
| 20 | enumerable: true, | ||
| 21 | get: function () { | ||
| 22 | return this._fill; | ||
| 23 | }, | ||
| 24 | set: function (value) { | ||
| 25 | if (value !== this._fill) { | ||
| 26 | this._fill = value; | ||
| 27 | } | ||
| 28 | } | ||
| 29 | }, | ||
| 30 | |||
| 31 | draw: { | ||
| 32 | enumerable: false, | ||
| 33 | value: function () { | ||
| 34 | Object.getPrototypeOf(BrushProperties).draw.call(this); | ||
| 35 | |||
| 36 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
| 37 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
| 38 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
| 39 | |||
| 40 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
| 41 | |||
| 42 | this.addedColorChips = true; | ||
| 43 | } | ||
| 44 | |||
| 45 | if (this.addedColorChips) { | ||
| 46 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
| 47 | } | ||
| 48 | } | ||
| 49 | }, | ||
| 50 | |||
| 12 | _subPrepare: { | 51 | _subPrepare: { |
| 13 | value: function() { | 52 | value: function() { |
| 14 | this.handleChange(null); | 53 | this.handleChange(null); |
| @@ -36,6 +75,14 @@ exports.BrushProperties = Montage.create(ToolProperties, { | |||
| 36 | } | 75 | } |
| 37 | } | 76 | } |
| 38 | }, | 77 | }, |
| 78 | |||
| 79 | handleFillColorChange: { | ||
| 80 | value: function (e) { | ||
| 81 | this.fill = e._event; | ||
| 82 | |||