Fixed Color on text edit. Also Fixed Indent & Outdent button. toggle bullet and numbered now bound to text tool

4 files changed, 104 insertions, 25 deletions

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 6aa61812..f7bb8295 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -12,6 +12,10 @@
     padding: 0px 8px;
 }
 
+.optionsTextTool select {
+    margin: 2px;
+}
+
 .optionsTextTool > *, .optionsTextTool .btnGroup > * {
     float:left;
 }
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 7ded1236..a7d2af10 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -236,7 +236,7 @@
                     "element": {"#": "indent"},
                     "pressedClass": "active",
                     "preventFocus": true,
-                    "identifier": "outdent",
+                    "identifier": "indent",
                     "label": ">>"
                 },
                 "listeners": [
@@ -253,7 +253,7 @@
                     "element": {"#": "outdent"},
                     "pressedClass": "active",
                     "preventFocus": true,
-                    "identifier": "<<",
+                    "identifier": "outdent",
                     "label": "<<"
                 },
                 "listeners": [
@@ -310,10 +310,10 @@
             <label class="label" style="display: none">Tag:</label>
             <select id="tagType" style="display: none"></select>
             <label class="label">Font:</label>
-            <select id="fontSelection" class="fontSelection"></select>
+            <select id="fontSelection" class="nj-skinned fontSelection"></select>
             <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
-            <input id="fontSize"/>
+            <select id="fontSize" class="nj-skinned"></select>
             <div class="fontColor"></div>
             <div class="btnGroup">
                 <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></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 55274322..7ae0cfda 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ArrayController = require("montage/ui/controller/array-controller").ArrayController;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.TextProperties = Montage.create(ToolProperties, {
@@ -29,18 +30,57 @@ exports.TextProperties = Montage.create(ToolProperties, {
     outdent: {value: null},
     numberedList: {value: null},
     bulletedList: {value: null},
+    fontTypes: {value: null},
+    fontSizes: {value: null},
 
     prepareForDraw: {
         value: function() {
+            // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component
+//            this.fontTypes = Montage.create(ArrayController);
+//            this.fontTypes.content = [
+//                { value: "Arial", text: "Arial" },
+//                { value: "Arial Black", text: "Arial Black" },
+//                { value: "Courier New", text: "Courier New" },
+//                { value: "Garamond", text: "Garamond" },
+//                { value: "Georgia", text: "Georgia" },
+//                { value: "Open Sans", text: "Open Sans" },
+//                { value: "Tahoma", text: "Tahoma" },
+//                { value: "Times New Roman", text: "Times New Roman" },
+//                { value: "Trebuchet MS", text: "Trebuchet MS" },
+//                { value: "Verdana", text: "Verdana" }
+//            ];
+
+            //this.fontSelection.contentController = this.fontTypes;
+//
+//            this.fontSizes = Montage.create(ArrayController);
+//            this.fontSizes.content = [
+//                { value: 1, text: "8pt" },
+//                { value: 2, text: "10pt" },
+//                { value: 3, text: "12pt" },
+//                { value: 4, text: "14pt" },
+//                { value: 5, text: "18pt" },
+//                { value: 6, text: "24pt" },
+//                { value: 7, text: "36pt" }
+//            ];
+//            this.fontSize.contentController = this.fontSizes;
+            
             this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
-            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
             this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
+            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
         }
     },
 
     handleEditorSelect: {
         value: function(e) {
             this.application.ninja.stage.textTool.updateStates();
+//            this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname;
+//
+//            for( var i = 0; i < this.fontSize.items.length; i++) {
+//                if (this.application.ninja.stage.textTool.states.fontsize == i + 1) {
+//                    this.fontSize.value = this.fontSize.items[i]
+//                    break;
+//                }
+//            }
         }
     },
 
@@ -133,6 +173,18 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
+    handleBulletedListAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("insertunorderedlist");
+        }
+    },
+
+    handleNumberedListAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("insertorderedlist");
+        }
+    },
+
     handleFontSizeChange: {
         value: function(e) {
             //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
@@ -214,6 +266,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
                   oneway: true
                 });
 
+                Object.defineBinding(this.numberedList, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.insertorderedlist",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.bulletedList, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.insertunorderedlist",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.fontSelection, "value", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.fontname",
+                  boundValueMutator: this.validateFont,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.fontSize, "value", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.fontsize",
+                  boundValueMutator: this.validateFontSize.bind(this),
+                  oneway: true
+                });