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.
  </copyright> */
 
+ 
+ .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"}
                 }
             }
     	}
-	    </script>
+        </script>
        
     </head>
 
     <body>
-    <div data-montage-id="penProperties" class="subToolHolderPanel">
-        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
-            <label class="label"> Stroke:</label>
-            <div id="strokeSize" class="label"></div>
-        </div>
+    <div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
+        <div class="colorCtrlIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+        <div class="colorCtrlIcon PencilTool"></div>
+        <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
+        <label class="label"> Stroke:</label>
+        <div id="strokeSize" class="label"></div>
     </div>
     </body>
 
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.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
\ No newline at end of file
+ </copyright> */
+ 
+ .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 @@
 
             }
     	}
-	    </script>
+        </script>
 
      
     </head>
 
     <body>
-        <div id="shapeProperties" class="subToolHolderPanel">
+        <div id="shapeProperties" class="subToolHolderPanel optionsShapeTool">
             <div id="shapeToolsList">
                 <div id="toolbutton"></div>
             </div>
+            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="colorCtrlIcon PencilTool"></div>
+            <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
 
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
-
             <div id="customProperties">
                 <div id="ovalProperties" class="label"></div>
                 <div id="rectProperties" class="label"></div>
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 @@
             <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <select id="fontSize" class="nj-skinned"></select>
-            <div class="fontColor"></div>
+            <div data-montage-id="fontColorCtrl" class="fontColor"></div>
             <div class="btnGroup">
                 <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
                 <button id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
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.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
+ 
+ .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 @@
                 }
             }
     	}
-	    </script>
+        </script>
 
     </head>
 
     <body>
-        <div data-montage-id="brushProperties" class="subToolHolderPanel">
-            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
-                <label class="label"> Width:</label>
-                <div id="strokeSize" class="label"></div>
-                <label class="label"> Hardness:</label>
-                <div id="strokeHardness" class="label"></div>
-                <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
-                <div id="smoothingAmount" class="label"></div>
-                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
-                <label class="label" id="angleLabel"> Angle:</label>
-                <div id="strokeAngle" class="label"></div>
-
-            </div>
+        <div data-montage-id="brushProperties" class="subToolHolderPanel optionsBrushTool">
+            <div class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
+            <label class="label"> Width:</label>
+            <div id="strokeSize" class="label"></div>
+            <label class="label"> Hardness:</label>
+            <div id="strokeHardness" class="label"></div>
+            <input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
+            <div id="smoothingAmount" class="label"></div>
+            <input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
+            <label class="label" id="angleLabel">Angle:</label>
+            <div id="strokeAngle" class="label"></div>
         </div>
     </body>
 
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 @@
 
     <body>
         <div id="fillProperties" class="subToolHolderPanel">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>
+            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
 
             <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
                 <label class="label"> Materials:</label>
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.
  </copyright> */
 
- 
  .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 @@
 
     <body>
     <div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
-        <div class="colorCtrlIcon FillTool"></div>
-        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
         <div class="colorCtrlIcon PencilTool"></div>
         <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
+        <div class="colorCtrlIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+        <div class="nj-divider divider-vertical">&nbsp;</div>
         <label class="label"> Stroke:</label>
         <div id="strokeSize" class="label"></div>
     </div>
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 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
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 @@
-<!DOCTYPE HTML>
-<!-- <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> -->
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-        <link rel="stylesheet" type="text/css" href="pencil-properties.css">
-
-        <script type="text/montage-serialization">
-        {
-
-            "owner": {
-                "prototype": "js/components/tools-properties/pencil-properties.reel",
-                "properties": {
-                    "element": {"#": "pencilProperties"}
-                }
-            }
-    	}
-	    </script>
-       
-    </head>
-
-    <body>
-        <div id="pencilProperties" class="subToolHolderPanel">
-        </div>
-    </body>
-
-</html>
\ 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 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-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 @@
  </copyright> */
  
  .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 @@
             <div id="shapeToolsList">
                 <div id="toolbutton"></div>
             </div>
-            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
-            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
             <div class="colorCtrlIcon PencilTool"></div>
             <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
-
+            <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
             <div id="customProperties">
@@ -149,7 +149,7 @@
                 <div id="lineProperties" class="label"></div>
             </div>
 
-            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label>
+            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
             <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
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.
  </copyright> */
 
+ .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 @@
                 }
             }
     	}
-	    </script>
+        </script>
        
     </head>
 
     <body>
         <div id="tagProperties" class="subToolHolderPanel">
             <div id="tagToolContainer" class="tagRadioButtons">
+                <div class="leftLabel colorCtrlIcon FillTool"></div>
+                <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
+                <div class="nj-divider divider-vertical">&nbsp;</div>
+
                 <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
                 <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
                 <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
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.
  </copyright> */
 
+.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 @@
     </head>
 
     <body>
-        <div id="fillProperties" class="subToolHolderPanel">
-            <label class="label subOption"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> Use WebGL</label>
-
+        <div id="fillProperties" class="subToolHolderPanel optionsFillTool">
+            <input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
             <div id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
                 <label class="label"> Materials:</label>
                 <div id="fillIcon" class="bucketToolUp" style="float: left;"></div>
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.
  </copyright> */
 
-.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 @@
     </head>
 
     <body>
-        <div id="selectionProperties" class="subToolHolderPanel">
-            <label class="label subOption optionLabel"><input id="transformCheck" type="checkbox" name="transformControl" class="checkBoxAlign"/>Transform Controls</label>
+        <div id="selectionProperties" class="subToolHolderPanel optionsSelectionTool">
+            <input id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/><label class="label">Transform Controls&nbsp&nbsp</label>
             <div id="toolPropertiesPanel-selectionDivOptions">
                 <div class="subOption"><div id="topAlign" class="topAlignUp" title="Top Align"></div></div>
                 <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div>
-                <div class="subOption"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div>
-                <div class="subOption"><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div>
+                <div class="subOption subOptionSpacer"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div>
+                <div class="subOption "><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div>
                 <div class="subOption"><div id="vRight" class="verticalRightUp" title="Vertical Right"></div></div>
-                <div class="subOption"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div>
+                <div class="subOption subOptionSpacer"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div>
                 <div class="subOption"><div id="distTop" class="distTopUp" title="Distance Top"></div></div>
                 <div class="subOption"><div id="distCenter" class="distCenterUp" title="Distance Center"></div></div>
-                <div class="subOption"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div>
+                <div class="subOption subOptionSpacer"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div>
                 <div class="subOption"><div id="distLeft" class="distLeftUp" title="Distance Left"></div></div>
                 <div class="subOption"><div id="distVCenter" class="distVCenterUp" title="Distance Center"></div></div>
                 <div class="subOption"><div id="distRight" class="distRightUp" title="Distance Right"></div></div>
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 @@
                 <div id="lineProperties" class="label"></div>
             </div>
 
-            <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>Use WebGL</label>
+            <input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
             <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
-- 
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 @@
             <input data-montage-id="doSmoothing" type="checkbox" name="doSmoothingControl" class="nj-skinned"/><label class="label">Smoothing</label>
             <div data-montage-id="smoothingAmount" class="label"></div>
             <input data-montage-id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="nj-skinned"/><label class="label">Calligraphic</label>
-            <label data-montage-id="angleLabel class="label"">Angle:</label>
+            <label data-montage-id="angleLabel" class="label"">Angle:</label>
             <div data-montage-id="strokeAngle" class="label"></div>
         </div>
     </body>
-- 
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 @@
-<!DOCTYPE HTML>
-<!-- <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> -->
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
-        <!--<link rel="stylesheet" type="text/css" href="tools-properties.css">-->
-        <script type="text/montage-serialization">
-        {
-
-            "owner": {
-                "prototype": "js/components/tools-properties/subselection-properties.reel[SubSelectionProperties]",
-                "properties": {
-                    "element": {"#": "subSelectionProperties"}
-                }
-            }
-    	}
-	    </script>
-
-    </head>
-
-    <body>
-        <div data-montage-id="subSelectionProperties">
-            <div></div>
-        </div>
-    </body>
-
-</html>
\ 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 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-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 @@
 
     <body>
         <div data-montage-id="object3DProperties" class="subToolHolderPanel">
-            <div id="rotateObjectToolContainer" class="tagRadioButtons">
-                <input type="radio" data-montage-id="rotateLocally" id="rotateLocally" class="tag-type" title="Rotate Locally" name="rotateObject" checked/>
-                <input type="radio" data-montage-id="rotateGlobally" id="rotateGlobally" class="tag-type" title="Rotate Globally" name="rotateObject"/>
+            <div class="tagRadioButtons object3DToolContainer">
+                <input type="radio" data-montage-id="rotateLocally" class="tag-type rotateLocally" title="Rotate Locally" name="rotateObject" checked/>
+                <input type="radio" data-montage-id="rotateGlobally" class="tag-type rotateGlobally" title="Rotate Globally" name="rotateObject"/>
             </div>
         </div>
     </body>
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 @@
 
     <body>
         <div data-montage-id="tagProperties" class="subToolHolderPanel">
-            <div id="tagToolContainer" class="tagRadioButtons">
+            <div data-montage-id="tagToolContainer" class="tagRadioButtons">
                 <div class="leftLabel colorCtrlIcon FillTool"></div>
                 <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div>
                 <div class="nj-divider divider-vertical">&nbsp;</div>
 
-                <input type="radio" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
-                <input type="radio" data-montage-id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
-                <input type="radio" data-montage-id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
-                <input type="radio" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>
-                <input type="radio" data-montage-id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="divTool" class="tag-type divTool" title="Div Element" name="TagRadios" checked/>
+                <input type="radio" data-montage-id="imageTool" class="tag-type imageTool" title="Image Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="videoTool" class="tag-type videoTool" title="Video Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="canvasTool" class="tag-type canvasTool" title="Canvas Element" name="TagRadios"/>
+                <input type="radio" data-montage-id="customTool" class="tag-type customTool" title="Custom Element" name="TagRadios"/>
 
                 <div class="nj-divider divider-vertical">&nbsp;</div>
 
-- 
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.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-
- .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.
  </copyright> */
 
-.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 @@
 
     <body>
         <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool">
-            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
-            <div data-montage-id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
-                <label class="label"> Materials:</label>
-                <div data-montage-id="fillIcon" class="bucketToolUp" style="float: left;"></div