-added new images for the text tool options

-simplified text options CSS
-fixed styling to accommodate new images

8 files changed, 43 insertions, 38 deletions

diff --git a/images/optionsbar/text/AlignCenter.png b/images/optionsbar/text/AlignCenter.png
new file mode 100644
index 00000000..6c95a9a6
--- /dev/null
+++ b/images/optionsbar/text/AlignCenter.png
diff --git a/images/optionsbar/text/AlignJustified.png b/images/optionsbar/text/AlignJustified.png
new file mode 100644
index 00000000..7248a8f7
--- /dev/null
+++ b/images/optionsbar/text/AlignJustified.png
diff --git a/images/optionsbar/text/AlignLeft.png b/images/optionsbar/text/AlignLeft.png
new file mode 100644
index 00000000..07f964f9
--- /dev/null
+++ b/images/optionsbar/text/AlignLeft.png
diff --git a/images/optionsbar/text/AlignRight.png b/images/optionsbar/text/AlignRight.png
new file mode 100644
index 00000000..9ecec819
--- /dev/null
+++ b/images/optionsbar/text/AlignRight.png
diff --git a/images/optionsbar/text/BulletedList.png b/images/optionsbar/text/BulletedList.png
new file mode 100644
index 00000000..ed6dbab7
--- /dev/null
+++ b/images/optionsbar/text/BulletedList.png
diff --git a/images/optionsbar/text/NumberedList.png b/images/optionsbar/text/NumberedList.png
new file mode 100644
index 00000000..43a8cbc0
--- /dev/null
+++ b/images/optionsbar/text/NumberedList.png
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>