9 files changed, 358 insertions, 215 deletions

diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss
index 8a743174..a800610d 100644
--- a/_scss/imports/scss/_Base.scss
+++ b/_scss/imports/scss/_Base.scss
@@ -134,7 +134,7 @@ button.nj-skinned {
         cursor: pointer;
         text-shadow: 1px 1px 1px $color-app-shadow
 }
-button.nj-skinned:active {
+button.nj-skinned:active, button.nj-skinned.active {
         background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%); 
 }
 button.nj-skinned:hover {
diff --git a/_scss/ninja.scss b/_scss/ninja.scss
index 11c04afb..4cc7301f 100755
--- a/_scss/ninja.scss
+++ b/_scss/ninja.scss
@@ -36,6 +36,7 @@ body {
     
 }
 
+
 // Codemirror
 //@import "imports/codemirror/_codemirror";
 //@import "imports/codemirror/_javascript";
diff --git a/css/ninja.css b/css/ninja.css
index 8ce60a10..3776b1d5 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -36,7 +36,7 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "
 
 button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
 
-button.nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); }
+button.nj-skinned:active, button.nj-skinned.active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); }
 
 button.nj-skinned:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; }
 
@@ -212,6 +212,10 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
+.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
+
+.montage-editor { padding: 0px; word-wrap: normal; }
+
 .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; }
 
 .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; }
diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js
index ce5ac1af..2d26c8b4 100644
--- a/js/components/button.reel/button.js
+++ b/js/components/button.reel/button.js
@@ -179,7 +179,7 @@ var Button = exports.Button = Montage.create(Component, {
         value: function() {
             if(this.isToggleButton)
             {
-                if(this._value)
+                if(this._value === true)
                 {
                     this.element.classList.remove(this.offState);
                     this.element.classList.add(this.onState);
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 2eb608d3..6aa61812 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,31 +5,33 @@
  </copyright> */
 
 .optionsTextTool {
-    display: -webkit-box;
-    -webkit-box-orient:horizontal;
-    -webkit-box-align: stretch;
-    padding: 5px;
+    padding: 6px;
 }
 
-
-.optionsTextTool > * {
-    -webkit-box-flex:0;
+.optionsTextTool .btnGroup {
+    padding: 0px 8px;
 }
 
-.optionsTextTool .button {
-    width: auto;
-
+.optionsTextTool > *, .optionsTextTool .btnGroup > * {
+    float:left;
 }
 
-.optionsTextTool .hottextunit {
-    padding-top:5px;
+.optionsTextTool button {
+    width: auto;
+    padding: 4px 8px !important;
+    margin-left:4px;
 }
 
 .optionsTextTool .label, .optionsTextTool .hottextunit {
-    float:none;
     font-size:11px;
 }
 
 .optionsTextTool .fontSelection {
     width:100px;
+}
+
+.optionsTextTool .fontColor {
+    width: 20px;
+    height: 18px;
+    margin: 2px 6px;
 }
\ 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 14123b12..7ded1236 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -77,41 +77,30 @@
             },
 
             "fontSize": {
-                "module": "js/components/hottextunit.reel",
-                "name": "HotTextUnit",
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
                 "properties": {
                     "element": {"#": "fontSize"},
-                    "value": 12,
                     "identifier": "fontSize"
                 },
                 "listeners": [
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
-                    },
-                    {
-                        "type": "changing",
-                        "listener": {"@": "owner"}
                     }
                 ]
 
             },
-
-          "fontColor": {
-               "module" : "js/components/ui/color-chip.reel",
-               "name" : "ColorChip",
-               "properties" : {
-                   "element" : {"#": "fontColor"},
-                   "mode": "chip"
-               }
-           },
+        
             "btnBold": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnBold"},
-                    "_isToggleButton": true,
-                    "identifier": "btnBold"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnBold",
+                    "label": "B"
                 },
                 "listeners": [
                     {
@@ -121,12 +110,14 @@
                 ]
             },
             "btnItalic": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnItalic"},
-                    "_isToggleButton": true,
-                    "identifier": "btnItalic"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnItalic",
+                    "label": "I"