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.

---
 .../tools-properties/text-properties.reel/text-properties.html        | 4 ++--
 .../tools-properties/text-properties.reel/text-properties.js          | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'js/components/tools-properties/text-properties.reel')

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 18370abcf406c6ab36d5c5f2613cb79e756ff6d2 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Wed, 9 May 2012 18:07:32 -0700
Subject: -Consolidated many redundant css classes used in the tool options
 bars

---
 js/components/tools-properties/text-properties.reel/text-properties.css | 1 -
 1 file changed, 1 deletion(-)

(limited to 'js/components/tools-properties/text-properties.reel')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index f7bb8295..d34968e5 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,7 +5,6 @@
  </copyright> */
 
 .optionsTextTool {
-    padding: 6px;
 }
 
 .optionsTextTool .btnGroup {
-- 
cgit v1.2.3


From 67e39072da76ac79955e8c2c001e17b01311d313 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Tue, 15 May 2012 17:07:22 -0700
Subject: -added new images for the text tool options

-simplified text options CSS
-fixed styling to accommodate new images
---
 .../text-properties.reel/text-properties.css       | 27 ++++++-----
 .../text-properties.reel/text-properties.html      | 54 +++++++++++-----------
 2 files changed, 43 insertions(+), 38 deletions(-)

(limited to 'js/components/tools-properties/text-properties.reel')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index d34968e5..218105a7 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -7,6 +7,10 @@
 .optionsTextTool {
 }
 
+.optionsTextTool .overrideMargin{
+    margin-left: 0px;
+}
+
 .optionsTextTool .btnGroup {
     padding: 0px 8px;
 }
@@ -15,26 +19,27 @@
     margin: 2px;
 }
 
-.optionsTextTool > *, .optionsTextTool .btnGroup > * {
-    float:left;
+.optionsTextTool .btnGroup .textButton {
+    width: auto;
+    padding: 4px 8px;
+    margin-left: 0px;
 }
 
-.optionsTextTool button {
-    width: auto;
-    padding: 4px 8px !important;
-    margin-left:4px;
+.optionsTextTool .btnGroup .imageButton {
+    padding-top: 2px;
+    height: 22px;
 }
 
 .optionsTextTool .label, .optionsTextTool .hottextunit {
     font-size:11px;
+    margin-top: 1px;
 }
 
 .optionsTextTool .fontSelection {
-    width:100px;
+    width: 160px;
 }
 
-.optionsTextTool .fontColor {
-    width: 20px;
-    height: 18px;
-    margin: 2px 6px;
+.optionsTextTool .toolColorChipCtrl {
+    margin-left: 6px;
+    margin-right: 0px;
 }
\ No newline at end of file
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 8839ae94..725e1d22 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -160,8 +160,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignLeft",
-                    "pressedLabel": "Left",
-                    "unpressedLabel": "Left"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -177,8 +177,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignCenter",
-                    "pressedLabel": "Center",
-                    "unpressedLabel": "Center"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -194,8 +194,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignRight",
-                    "pressedLabel": "Right",
-                    "unpressedLabel": "Right"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -211,8 +211,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignJustify",
-                    "pressedLabel": "Justify",
-                    "unpressedLabel": "Justify"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -294,36 +294,36 @@
     </head>
 
     <body>
-        <div data-montage-id="textProperties" class="subToolHolderPanel optionsTextTool">
+        <div data-montage-id="textProperties" class="subToolHolderPanel optionsTextTool toolOptionsFloatChildren">
             <label class="label" style="display: none">Class:</label>
             <input data-montage-id="className" style="display: none" />
             <label class="label" style="display: none">Tag:</label>
             <select data-montage-id="tagType" style="display: none"></select>
-            <label class="label">Font:</label>
+            <label class="label overrideMargin">Font:</label>
             <select data-montage-id="fontSelection" class="nj-skinned fontSelection"></select>
             <button data-montage-id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <select data-montage-id="fontSize" class="nj-skinned"></select>
-            <div data-montage-id="fontColorCtrl" class="fontColor"></div>
-            <div class="btnGroup">
-                <button data-montage-id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
-                <button data-montage-id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
-                <button data-montage-id="btnUnderline" class="btnUnderline nj-skinned" style="text-decoration: underline;"></button>
-                <button data-montage-id="btnStrikethrough" class="btnStriketrough nj-skinned" style="text-decoration: line-through;"></button>
+            <div data-montage-id="fontColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="btnBold" class="btnBold nj-skinned textButton" style="font-weight:bold" title="Bold"></button>
+                <button data-montage-id="btnItalic" class="btnItalic nj-skinned textButton" style="font-style: italic;"></button>
+                <button data-montage-id="btnUnderline" class="btnUnderline nj-skinned textButton" style="text-decoration: underline;"></button>
+                <button data-montage-id="btnStrikethrough" class="btnStriketrough nj-skinned textButton" style="text-decoration: line-through;"></button>
             </div>
-            <div class="btnGroup">
-                <button data-montage-id="alignLeft" class="nj-skinned"></button>
-                <button data-montage-id="alignCenter" class="nj-skinned"></button>
-                <button data-montage-id="alignRight" class="nj-skinned"></button>
-                <button data-montage-id="alignJustify" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="alignLeft" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignLeft.png" class="unselectable"/></button>
+                <button data-montage-id="alignCenter" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignCenter.png"  class="unselectable"/></button>
+                <button data-montage-id="alignRight" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignRight.png"  class="unselectable"/></button>
+                <button data-montage-id="alignJustify" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignJustified.png"  class="unselectable"/></button>
             </div>
-            <div class="btnGroup">
-                <button data-montage-id="indent" class="nj-skinned"></button>
-                <button data-montage-id="outdent" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="indent" class="nj-skinned textButton"></button>
+                <button data-montage-id="outdent" class="nj-skinned textButton"></button>
             </div>
-            <div class="btnGroup">
-                <button data-montage-id="bulletedList" class="nj-skinned"></button>
-                <button data-montage-id="numberedList" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="bulletedList" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/BulletedList.png" /></button>
+                <button data-montage-id="numberedList" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/NumberedList.png" /></button>
             </div>
         </div>
     </body>
-- 
cgit v1.2.3