UI enhancements for 379 and 914

Resources/EditorData/AtomicEditor/editor/skin/skin.tb.txt

@@ -12,6 +12,28 @@ elements
 		cut 16
 		expand 12
 		padding 0
+
+	Checkerboard
+		type StretchBox
+		bitmap checkerboard.png
+	HSVSkin
+		type StretchBox
+		bitmap HSV21.png
+	AccentColor1
+		text-color #D4FB79
+	AccentColor2
+		text-color #76D6FF
+	AccentColor3
+		text-color #9A7DA1
+	AccentColor4
+		text-color #AAAAAA
+	AccentColorWarn
+		text-color #ffff66
+	AccentColorError
+		text-color #ff3333
+	AccentColorSuccess
+		text-color #33ff33
+
 	Folder
 		text-color #aaaaaa
 	Folder.selected

Resources/EditorData/AtomicEditor/editor/skin_light/skin.tb.txt

@@ -12,6 +12,28 @@ elements
 		cut 16
 		expand 12
 		padding 0
+
+	Checkerboard
+		type StretchBox
+		bitmap checkerboard.png
+	HSVSkin
+		type StretchBox
+		bitmap HSV21.png
+	AccentColor1
+		text-color #224444
+	AccentColor2
+		text-color #113333
+	AccentColor3
+		text-color #002222
+	AccentColor4
+		text-color #001111
+	AccentColorWarn
+		text-color #ffff66
+	AccentColorError
+		text-color #ff6666
+	AccentColorSuccess
+		text-color #66ff66
+
 	Folder
 		text-color #2c2c2c
 	Folder.selected

Resources/EditorData/AtomicEditor/editor/ui/mainframe.tb.txt

@@ -37,11 +37,11 @@ TBLayout: distribution: gravity, axis: y
                             TBWidget
             TBLayout: distribution: gravity, position: top
                 TBLayout: distribution: gravity, axis: y, position: left, gravity: top bottom
-                    TBEditField: text: "<color #AAAAAA>Project</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+                    TBEditField: text: "Project", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor4
                         font: size: 11
                     TBLayout: distribution: gravity, id: projectviewcontainer
                     TBSeparator: gravity: left right, skin: AESeparator
-                    TBEditField: text: "<color #AAAAAA>Hierarchy</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+                    TBEditField: text: "Hierarchy", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor4
                         font: size: 11
                     TBLayout: distribution: gravity, id: hierarchycontainer
                         TBWidget: gravity: top bottom
@@ -53,7 +53,7 @@ TBLayout: distribution: gravity, axis: y
                         TBEditField: multiline: 1, styling: 1, gravity: left right, id: consoletext
                             text: "Hello World!"
                 TBLayout: distribution: gravity, axis: y, position: left, gravity: top bottom, id: inspectorlayout
-                    TBEditField: text: "<color #AAAAAA>Inspector</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+                    TBEditField: text: "Inspector", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor4
                         font: size: 11
                     TBLayout: distribution: gravity, id: inspectorcontainer
 

Resources/EditorData/AtomicEditor/editor/ui/maintoolbar.tb.txt

@@ -22,15 +22,19 @@ TBLayout: distribution: gravity, spacing: 4
 		@include definitions>menubutton
 		TBSkinImage: skin: 3DTranslateBitmap
 		id 3d_translate
+		tooltip Translate
 	TBButton: toggle-mode: 1
 		@include definitions>menubutton
 		TBSkinImage: skin: 3DRotateBitmap
 		id 3d_rotate
+		tooltip Rotate
 	TBButton: toggle-mode: 1
 		@include definitions>menubutton
 		TBSkinImage: skin: 3DScaleBitmap
 		id 3d_scale
+		tooltip Scale
 	TBButton: toggle-mode: 1
 		lp: width: 64
 		text: "Local"
 		id 3d_axismode
+		tooltip Effect world or local object

Resources/EditorData/AtomicEditor/editor/ui/welcomeframe.tb.txt

@@ -8,10 +8,10 @@ TBLayout: distribution: gravity, size: available, axis: y, id: welcomelayout, po
                 TBButton: id: new project
                     text New Project
             TBLayout: distribution: gravity, axis: y, position: left, id: recentprojects
-                TBEditField: text: "<color #76D6FF>Recent Projects:</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+                TBEditField: text: "Recent Projects:", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor2
     TBLayout: distribution: gravity, size: available
         TBLayout: distribution: gravity, axis: y, position: left
-            TBEditField: text: "<color #76D6FF>Welcome:</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+            TBEditField: text: "Welcome:", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor2
             TBImageWidget: filename: "AtomicEditor/editor/images/earlyaccess_header.png"
                 lp: width: 420, height: 137
             TBEditField: multiline: 1, styling: 1, gravity: all, id: welcome_text, readonly: 1, adapt-to-content: 0
@@ -33,7 +33,7 @@ TBLayout: distribution: gravity, size: available, axis: y, id: welcomelayout, po
             TBLayout: distribution: gravity, size: available
                 TBContainer: gravity: left right
                     TBLayout: distribution: gravity
-                        TBEditField: text: "<color #76D6FF>More Examples:</color>", styling: 1, readonly: 1, adapt-to-content: 1, skin: 0
+                        TBEditField: text: "More Examples:", styling: 1, readonly: 1, adapt-to-content: 1, skin: AccentColor2
                         TBButton: id: 'examples_github' text: "https://github.com/AtomicGameEngine/AtomicExamples", skin: TBButton.link
                         TBWidget: gravity: left right
             TBScrollContainer: scroll-mode: auto

Script/AtomicEditor/ui/frames/inspector/AttributeInfoEdit.ts

@@ -24,6 +24,7 @@ import EditorUI = require("ui/EditorUI");
 import InspectorUtils = require("./InspectorUtils");
 import SerializableEditType = require("./SerializableEditType");
 import EditorEvents = require("editor/EditorEvents");
+import ColorChooser = require ("./ColorChooser" );
 
 class AttributeInfoEdit extends Atomic.UILayout {
 
@@ -184,7 +185,7 @@ class BoolAttributeEdit extends AttributeInfoEdit {
 
         if (uniform) {
             var object = this.editType.getFirstObject();
-            this.editWidget.skinBg = "TBGreyCheckBox";
+            this.editWidget.skinBg = "TBCheckBox";
             if (object) {
                 var value = object.getAttribute(this.attrInfo.name);
                 this.editWidget.value = (value ? 1 : 0);
@@ -192,7 +193,7 @@ class BoolAttributeEdit extends AttributeInfoEdit {
 
         } else {
 
-            this.editWidget.skinBg = "TBGreyCheckBoxNonUniform";
+            this.editWidget.skinBg = "TBCheckBoxNonUniform";
             this.editWidget.value = 1;
 
         }
@@ -629,6 +630,59 @@ class ColorAttributeEdit extends NumberArrayAttributeEdit {
 
     }
 
+    createLayout() {
+
+        this.createEditWidget();
+
+        this.editWidget.subscribeToEvent(this.editWidget, "WidgetEvent", (data) => this.handleWidgetEvent(data));
+
+        var attr = this.attrInfo;
+        var attrNameLP = AttributeInfoEdit.attrNameLP;
+
+        this.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+
+        if ( attr.type == Atomic.VAR_COLOR) {
+            this.axis = Atomic.UI_AXIS_Y;
+            this.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
+            this.skinBg = "InspectorVectorAttrLayout";
+        }
+
+        if (!this.hideName) {
+
+            var name = new Atomic.UITextField();
+            name.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
+            name.skinBg = "InspectorTextAttrName";
+            name.layoutParams = attrNameLP;
+            var bname = attr.name;
+
+            if (bname == "Is Enabled")
+                bname = "Enabled";
+
+            if (this.nameOverride)
+                name.text = this.nameOverride;
+            else
+                name.text = bname;
+
+            name.fontDescription = AttributeInfoEdit.fontDesc;
+
+            this.addChild(name);
+
+            var selectButton = new Atomic.UIButton();
+            selectButton.text = "...";
+            selectButton.fontDescription = AttributeInfoEdit.fontDesc;
+            this.addChild(selectButton);
+
+            selectButton.onClick = () => {
+                new ColorChooser( this.selects[0], this.selects[1], this.selects[2], this.selects[3] );
+            };
+
+         }
+
+        this.addChild(this.editWidget);
+
+    }
+
+
 }
 
 class ResourceRefAttributeEdit extends AttributeInfoEdit {

Script/AtomicEditor/ui/frames/inspector/ComponentAttributeUI.ts

@@ -337,7 +337,7 @@ class SubmeshAttributeEdit extends AttributeInfoEdit {
 
         } else {
 
-            this.enabledCheckBox.skinBg = "TBGreyCheckBox";
+            this.enabledCheckBox.skinBg = "TBCheckBox";
             this.enabledCheckBox.value = enabled ? 1 : 0;
 
         }

Script/AtomicEditor/ui/frames/inspector/InspectorWidget.ts

@@ -117,7 +117,7 @@ class InspectorWidget extends ScriptWidget {
       attrLayout.addChild(_name);
 
       var box = new Atomic.UICheckBox();
-      box.skinBg = "TBGreyCheckBox";
+      box.skinBg = "TBCheckBox";
       attrLayout.addChild(box);
       parent.addChild(attrLayout);
 

Script/Packages/Atomic/UI.json

@@ -8,8 +8,8 @@
 								"UIImageWidget", "UIClickLabel", "UICheckBox", "UIMenuItem", "UIMenuItemSource",
 								"UISelectList", "UIListView", "UIMessageWindow", "UILayoutParams", "UIFontDescription",
 								"UISkinImage", "UITabContainer", "UISceneView", "UIPreferredSize", "UIDragObject",
-								"UIContainer", "UISection", "UIInlineSelect", "UITextureWidget",
-								"UIScrollContainer", "UISeparator", "UIDimmer", "UISelectDropdown"],
+								"UIContainer", "UISection", "UIInlineSelect", "UITextureWidget", "UIColorWidget", "UIColorWheel",
+								"UIScrollContainer", "UISeparator", "UIDimmer", "UISelectDropdown", "UISlider"],
 	"overloads" : {
 	},
 	"typescript_decl" : {

Source/Atomic/UI/UI.cpp

@@ -39,6 +39,7 @@
 #include <TurboBadger/tb_menu_window.h>
 #include <TurboBadger/tb_popup_window.h>
 #include <TurboBadger/image/tb_image_widget.h>
+#include <TurboBadger/tb_atomic_widgets.h>
 
 void register_tbbf_font_renderer();
 void register_stb_font_renderer();
@@ -83,6 +84,9 @@ using namespace tb;
 #include "UISelectDropdown.h"
 #include "UIMenuWindow.h"
 #include "UIPopupWindow.h"
+#include "UISlider.h"
+#include "UIColorWidget.h"
+#include "UIColorWheel.h"
 
 #include "SystemUI/SystemUI.h"
 #include "SystemUI/SystemUIEvents.h"
@@ -674,6 +678,30 @@ UIWidget* UI::WrapWidget(tb::TBWidget* widget)
         return select;
     }
 
+    if (widget->IsOfType<TBSlider>())
+    {
+        UISlider* select = new UISlider(context_, false);
+        select->SetWidget(widget);
+        widgetWrap_[widget] = select;
+        return select;
+    }
+
+    if (widget->IsOfType<TBColorWidget>())
+    {
+        UIColorWidget* select = new UIColorWidget(context_, false);
+        select->SetWidget(widget);
+        widgetWrap_[widget] = select;
+        return select;
+    }
+
+    if (widget->IsOfType<TBColorWheel>())
+    {
+        UIColorWheel* select = new UIColorWheel(context_, false);
+        select->SetWidget(widget);
+        widgetWrap_[widget] = select;
+        return select;
+    }
+
     if (widget->IsOfType<TBSection>())
     {
         UISection* section = new UISection(context_, false);

Source/AtomicJS/Javascript/JSUI.cpp

@@ -83,6 +83,9 @@ JSUI::JSUI(Context* context) : Object(context),
     uiTypes_["UIDimmer"] = true;
     uiTypes_["UISelectDropdown"] = true;
     uiTypes_["UIPopupWindow"] = true;
+    uiTypes_["UISlider"] = true;
+    uiTypes_["UIColorWidget"] = true;
+    uiTypes_["UIColorWheel"] = true;
 
 }