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

1 files changed, 46 insertions, 1 deletions

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;