Implementation of Nils' UI work for updated theming, functionality and style for the editors suite

Templates/BaseGame/game/tools/materialEditor/gui/Profiles.ed.tscript

@@ -31,8 +31,8 @@ singleton GuiControlProfile (GuiMatEdSliderProfile)
 singleton GuiControlProfile (GuiMatEdRightJustifyProfile)
 {
    // font
-   fontType = "Arial";
-   fontSize = 14;
+   fontType = $Gui::fontTypeRegular;
+   fontSize = 16;
    fontCharset = ANSI;
 
    fontColor = "0 0 0";

Templates/BaseGame/game/tools/materialEditor/gui/guiMaterialPreviewWindow.ed.gui

@@ -22,10 +22,10 @@ $guiContent = new GuiControl() {
       Profile = "ToolsGuiWindowProfile";
       HorizSizing = "windowRelative";
       VertSizing = "windowRelative";
-      Extent = "210 251 ";
-      MinExtent = "210 150";
-      Position = getWord($pref::Video::mode, 0) - 209 
-         SPC getWord(EditorGuiToolbar.extent, 1)-1;
+      Position = getWord($pref::Video::mode, 0) - 360
+         SPC getWord(EditorGuiToolbar.extent, 1) + 6;
+      Extent = "360 300";
+      MinExtent = "300 150";
       canSave = "1";
       Visible = "1";
       hovertime = "1000";
@@ -44,7 +44,7 @@ $guiContent = new GuiControl() {
       closeCommand = "MaterialEditorPreviewWindow.setVisible(false);";
       minSize = "50 50";
       EdgeSnap = "1";
-      text = "Material Preview";
+      text = "::  Material Editor - Preview";
       
       /*new GuiContainer(MaterialEditorPreviewPane) {
          canSaveDynamicFields = "0";
@@ -76,7 +76,7 @@ $guiContent = new GuiControl() {
             HorizSizing = "width";
             VertSizing = "height";
             position = "4 45";
-            Extent = "202 202";
+            Extent = "300 300";
             MinExtent = "8 2";
             canSave = "1";
             Visible = "1";
@@ -93,7 +93,7 @@ $guiContent = new GuiControl() {
                HorizSizing = "width";
                VertSizing = "height";
                position = "-1 -1";
-               Extent = "204 204";
+               Extent = "302 302";
                MinExtent = "8 2";
                canSave = "1";
                Visible = "1";
@@ -106,7 +106,7 @@ $guiContent = new GuiControl() {
                HorizSizing = "width";
                VertSizing = "height";
                Position = "-1 -1";
-               Extent = "204 204";
+               Extent = "302 302";
             };
             new GuiMaterialPreview(matEd_previewObjectView) {
                canSaveDynamicFields = "0";
@@ -116,7 +116,7 @@ $guiContent = new GuiControl() {
                HorizSizing = "width";
                VertSizing = "height";
                position = "1 1";
-               Extent = "199 199";
+               Extent = "299 299";
                MinExtent = "8 2";
                canSave = "1";
                Visible = "1";
@@ -168,17 +168,19 @@ $guiContent = new GuiControl() {
          Profile = "GuiInspectorSwatchButtonProfile";
          HorizSizing = "left";
          VertSizing = "top";
-         position = "189 229";
-         Extent = "14 14";
+         position = "330 270";
+         Extent = "20 20";
          MinExtent = "8 2";
          canSave = "1";
          Visible = "1";
          Command = "getColorF($thisControl.color, \"MaterialEditorGui.updatePreviewBackground\");"; 
-         color = "0 0 0 .8";
+         color = "0 0 0 .7";
          hovertime = "1000";
          groupNum = "-1";
          buttonType = "PushButton";
          useMouseEvents = "0";
+         ToolTip ="Change Background Color (preview)";
+         tooltipprofile = "ToolsGuiToolTipProfile";
       };
       
       // Ambient light color picker
@@ -199,6 +201,7 @@ $guiContent = new GuiControl() {
          hovertime = "1000";
          groupNum = "-1";
          ToolTip ="Change Ambient Light Color";
+         tooltipprofile = "ToolsGuiToolTipProfile";
          buttonType = "PushButton";
          useMouseEvents = "0";
       };
@@ -220,19 +223,115 @@ $guiContent = new GuiControl() {
          hovertime = "1000";
          groupNum = "-1";
          ToolTip ="Change Normal Light Color";
+         tooltipprofile = "ToolsGuiToolTipProfile";
          buttonType = "PushButton";
          useMouseEvents = "0";
       };
       
       new GuiCheckboxCtrl(){
-         position = "108 25";
+         position = "254 25";
          Extent = "98 18";
          HorizSizing = "left";
          profile = "ToolsGuiCheckBoxProfile";
          Variable = "MaterialEditorGui.livePreview";
          Command = "MaterialEditorGui.updateLivePreview($ThisControl.getValue());";
-         text ="Preview in World";
+         text = "Preview in World";
       };
+      // window / panel buttons
+      new GuiBitmapButtonCtrl(MaterialEditorGui_UnDockBtn) {
+         canSaveDynamicFields = "0";
+         internalName = "";
+         Enabled = "1";
+         isContainer = "0";
+         Profile = "ToolsGuiButtonProfile";
+         HorizSizing = "left";
+         VertSizing = "bottom";
+         Position = "330 1";
+         Extent = "18 18";
+         MinExtent = "8 8";
+         canSave = "1";
+         Visible = "0";
+         Command = "MaterialEditorGui.releaseSidePanel();";
+         tooltipprofile = "ToolsGuiToolTipProfile";
+         ToolTip = "Detach Sidepanel";
+         hovertime = "1000";
+         bitmapAsset = "ToolsModule:panel_undock_n_image";
+         text = "";
+         groupNum = "-1";
+         buttonType = "PushButton";
+         useMouseEvents = "0";
+      };
+      
+      new GuiBitmapButtonCtrl(MaterialEditorGui_DockBtn) {
+         canSaveDynamicFields = "0";
+         internalName = "";
+         Enabled = "1";
+         isContainer = "0";
+         Profile = "ToolsGuiButtonProfile";
+         HorizSizing = "left";
+         VertSizing = "bottom";
+         Position = "330 1";
+         Extent = "18 18";
+         MinExtent = "8 8";
+         canSave = "1";
+         Visible = "0";
+         Command = "MaterialEditorGui.dockSidePanel();";
+         tooltipprofile = "ToolsGuiToolTipProfile";
+         ToolTip = "Dock Sidepanel";
+         hovertime = "1000";
+         bitmapAsset = "ToolsModule:panel_dock_n_image";
+         text = "";
+         groupNum = "-1";
+         buttonType = "PushButton";
+         useMouseEvents = "0";
+      };
+      new GuiBitmapButtonCtrl(MaterialEditorGui_HideBtn) {
+         canSaveDynamicFields = "0";
+         internalName = "";
+         Enabled = "1";
+         isContainer = "0";
+         Profile = "ToolsGuiButtonProfile";
+         HorizSizing = "left";
+         VertSizing = "bottom";
+         Position = "312 1";
+         Extent = "18 18";
+         MinExtent = "8 8";
+         canSave = "1";
+         Visible = "1";
+         Command = "MaterialEditorGui.hideSidePanel();";
+         tooltipprofile = "ToolsGuiToolTipProfile";
+         ToolTip = "Hide Sidepanel";
+         hovertime = "1000";
+         bitmapAsset = "ToolsModule:panel_hide_n_image";
+         text = "";
+         groupNum = "-1";
+         buttonType = "PushButton";
+         useMouseEvents = "0";
+      };
+      new GuiBitmapButtonCtrl(MaterialEditorGui_ShowBtn) {
+         canSaveDynamicFields = "0";
+         internalName = "";
+         Enabled = "1";
+         isContainer = "0";
+         Profile = "ToolsGuiButtonProfile";
+         HorizSizing = "right";
+         VertSizing = "bottom";
+         Position = "4 1";
+         Extent = "18 18";
+         MinExtent = "8 8";
+         canSave = "1";
+         Visible = "1";
+         Command = "MaterialEditorGui.showSidePanel();";
+         tooltipprofile = "ToolsGuiToolTipProfile";
+         ToolTip = "Show Sidepanel";
+         hovertime = "1000";
+         bitmapAsset = "ToolsModule:panel_show_n_image";
+         text = "";
+         groupNum = "-1";
+         buttonType = "PushButton";
+         useMouseEvents = "0";
+      };       
+      
    };
 
    new GuiWindowCtrl(matEd_addCubemapWindow) {

Templates/BaseGame/game/tools/materialEditor/main.tscript

@@ -140,6 +140,9 @@ function MaterialEditorPlugin::onActivated( %this )
    MaterialEditorGui.open();
    %this.map.push();
    
+   // Do resize the windows at start
+   MaterialEditorGui.onWake();
+   
    Parent::onActivated(%this);
 }
 

Templates/BaseGame/game/tools/materialEditor/scripts/materialEditor.ed.tscript

@@ -21,6 +21,7 @@
 //-----------------------------------------------------------------------------
 
 // Material Editor originally created by Dave Calabrese and Travis Vroman of Gaslight Studios
+
 $MaterialEditor::emptyMaterialImage = "ToolsModule:unknownImage_image";
 
 function MaterialEditorGui::establishMaterials(%this)
@@ -249,6 +250,266 @@ function MaterialEditorGui::selectMaterialAsset(%this, %assetId)
    AssetBrowser.editAsset(%assetId);
 }
 
+//-----------------------------------------------------------------------------
+
+function MaterialEditorGui::onWake(%this)
+{   
+   %fixedWindow = MaterialEditorPreviewWindow;
+   %fluidWindow = MaterialEditorPropertiesWindow;
+   
+   if(EditorSettings.value( "WorldEditor/forceSidebarToSide" ) == 1)
+   {
+      // Let's dock the side panel to the right side
+      %this.docked = false;
+      %this.resizing = true;
+      %this.dockSidePanel();
+   }
+   else
+   {
+      // Let's release the side panel so it can be moved
+      %this.docked = true;
+      %this.resizing = false;
+      %this.releaseSidePanel();
+   }
+}
+
+function MaterialEditorGui::maxSize(%this, %window)
+{      
+   // Resize the windows to the max height
+   // and force these to the right side if set
+   if(EditorSettings.value( "WorldEditor/forceSidebarToSide" ) == 1 && %this.resizing == true)
+   {  
+      // prevent onResize after a resize
+      %this.resizing = false;
+      
+      %fixedWindow = MaterialEditorPreviewWindow;
+      %fluidWindow = MaterialEditorPropertiesWindow;
+      %top = EditorGuiToolbar.extent.y + 6;
+      %bottom = %top + 65 - 6;
+      %maxHeight = Canvas.extent.y - %top - %bottom;
+      
+      // --- Fixed window (top) ------------------------------------------------
+      // put it back if it moved
+      %fixedWindow.position.x = Canvas.extent.x - %fixedWindow.extent.x;
+      %fixedWindow.position.y = %top;
+      
+      // don't go beyond the canvas
+      if(%fixedWindow.extent.y > %maxHeight)
+         %fixedWindow.extent.y = %maxHeight - %fluidWindow.extent.y;
+
+      %position = %fixedWindow.position.x SPC %fixedWindow.position.y;
+      %extent = %window.extent.x SPC %fixedWindow.extent.y;
+      %fixedWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+      
+      // --- Fluid window (bottom) ---------------------------------------------
+      // position is relative to the top window
+      %position = %fixedWindow.position.x SPC %fixedWindow.extent.y + %top;
+      %extent = %window.extent.x SPC Canvas.extent.y - %fixedWindow.extent.y - %bottom;
+      %fluidWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+      
+      // --- AssetBrowser window  ----------------------------------------------
+      if(isObject(AssetBrowserWindow))
+      {
+         // Only resize the AssetBrowser if it's docked
+         if(AssetBrowserWindow.docked == true)
+         {
+            // The width is relative to the sidepanel
+            %browserWidth = Canvas.extent.x - %extent.x;
+            %browserHeight = AssetBrowserWindow.extent.y;
+            %browserPosY = Canvas.extent.y - AssetBrowserWindow.extent.y - 33;
+            AssetBrowserWindow.resize(0, %browserPosY, %browserWidth, %browserHeight);
+         }
+      }
+      // --- Windowed Console --------------------------------------------------
+      if(isObject(windowConsoleControl))
+      {
+         // Only resize the AssetBrowser if it's docked
+         if(windowConsoleControl.docked == true)
+         {
+            // The width is relative to the sidepanel
+            %consoleWidth = Canvas.extent.x - %extent.x;
+            %consoleHeight = windowConsoleControl.extent.y;
+            %consolePosY = Canvas.extent.y - windowConsoleControl.extent.y - 33;
+            windowConsoleControl.resize(0, %consolePosY, %consoleWidth, %consoleHeight);
+         }
+      }
+   }
+}
+
+function MaterialEditorPreviewWindow::onMouseDragged(%this)
+{
+   %parent = MaterialEditorGui;
+   
+   if(%parent.panelHidden == true)
+   {
+      %parent.showSidePanel();
+   }
+   
+   if(%parent.resizing == false && %parent.docked == true)
+   {
+      %parent.resizing = true;
+      %parent.maxSize(%this);
+   }
+}
+
+function MaterialEditorPropertiesWindow::onMouseDragged(%this)
+{
+   %parent = MaterialEditorGui;
+   
+   if(%parent.panelHidden == true)
+   {
+      %parent.showSidePanel();
+   }
+   
+   if(%parent.resizing == false && %parent.docked == true)
+   {
+      %parent.resizing = true;
+      %parent.maxSize(%this);
+   }
+}
+
+function MaterialEditorGui::onResize(%this, %newPosition, %newExtent)
+{
+   // Window to focus on (mostly the fluid window)
+   %window = MaterialEditorPreviewWindow;
+   
+   if(%window.panelHidden == true)
+   {
+      %window.showSidePanel();
+   }
+   
+   if(%this.resizing == false && %this.docked == true)
+   {  
+      // Only resize once
+      %this.resizing = true;
+      %this.maxSize(%window);
+   }
+}
+
+function MaterialEditorGui::dockSidePanel()
+{
+   %parent = MaterialEditorGui;
+   %fixedWindow = MaterialEditorPreviewWindow;
+   %fluidWindow = MaterialEditorPropertiesWindow;
+   
+   if(%parent.docked == true)
+      return;
+   
+   // Move and resize the window(s)
+   %parent.resizing = true;
+   %parent.maxSize(%fluidWindow);
+      
+   %parent.docked = true;
+   %fluidWindow.onMouseDragged();
+
+   // Lock the windows in place
+   %fixedWindow.canCollapse = "0";
+   %fixedWindow.canMove = "0";
+   
+   %fluidWindow.canCollapse = "0";
+   %fluidWindow.canMove = "0";
+   
+   MaterialEditorGui_UnDockBtn.Visible = "1";
+   MaterialEditorGui_DockBtn.Visible = "0";
+   
+   MaterialEditorGui_showBtn.Visible = "0";
+   MaterialEditorGui_hideBtn.Visible = "1";
+}
+
+function MaterialEditorGui::releaseSidePanel()
+{      
+   %parent = MaterialEditorGui;
+   %fixedWindow = MaterialEditorPreviewWindow;
+   %fluidWindow = MaterialEditorPropertiesWindow;
+   
+   if(%parent.docked == false)
+      return;
+   
+   // Unlock the windows so that be moved
+   %fixedWindow.canCollapse = "1";
+   %fixedWindow.canMove = "1";
+   
+   %fluidWindow.canCollapse = "1";
+   %fluidWindow.canMove = "1";
+   
+   MaterialEditorGui_UnDockBtn.Visible = "0";
+   MaterialEditorGui_DockBtn.Visible = "1";
+   
+   MaterialEditorGui_showBtn.Visible = "0";
+   MaterialEditorGui_hideBtn.Visible = "0";
+   
+   // Let's do a small resize so it's visually clear we're undocking
+   %position = %fixedWindow.position.x - 6 SPC %fixedWindow.position.y + 6;
+   %extent = %fixedWindow.extent.x SPC %fixedWindow.extent.y;
+   %fixedWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+
+   %position =  %fluidWindow.position.x - 6 SPC  %fluidWindow.position.y + 6;
+   %extent = %fluidWindow.extent.x SPC %fluidWindow.extent.y - 12;
+   %fluidWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+   
+   %parent.docked = false;
+   %parent.resizing = false;
+}
+
+function MaterialEditorGui::hideSidePanel()
+{
+   %parent = MaterialEditorGui;
+   %fixedWindow = MaterialEditorPreviewWindow;
+   %fluidWindow = MaterialEditorPropertiesWindow;
+   
+   MaterialEditorGui_showBtn.Visible = "1";
+   MaterialEditorGui_hideBtn.Visible = "0";
+   
+   // hide the content of the panels
+   %fixedWindow.titleText = %fixedWindow.text;
+   %fluidWindow.titleText = %fluidWindow.text;
+   
+   %fixedWindow.text = "";
+   matEd_previewPanel.Visible = "0";
+   matEd_quickPreview_Popup.Visible = "0";
+   
+   %fluidWindow.text = "";
+   MaterialEditorGuiContent.Visible = "0";
+   
+   // Let's do a resize so that the panel is collapsed to the side
+   %position = Canvas.extent.x - 24 SPC %fixedWindow.position.y;
+   %extent = %fixedWindow.extent.x SPC %fixedWindow.extent.y;
+   %fixedWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+
+   %position =  Canvas.extent.x - 24 SPC  %fluidWindow.position.y;
+   %extent = %fluidWindow.extent.x SPC %fluidWindow.extent.y;
+   %fluidWindow.resize(%position.x, %position.y, %extent.x, %extent.y);
+   
+   %parent.panelHidden = true;
+}
+
+function MaterialEditorGui::showSidePanel()
+{
+   %parent = MaterialEditorGui;
+   %fixedWindow = MaterialEditorPreviewWindow;
+   %fluidWindow = MaterialEditorPropertiesWindow;
+   
+   MaterialEditorGui_showBtn.Visible = "0";
+   MaterialEditorGui_hideBtn.Visible = "1";
+   
+   // show the content of the panels
+   // hide the content of the panels
+   %fixedWindow.text = %fixedWindow.titleText;
+   matEd_previewPanel.Visible = "1";
+   matEd_quickPreview_Popup.Visible = "1";
+   
+   %fluidWindow.text = %fluidWindow.titleText;
+   MaterialEditorGuiContent.Visible = "1";
+   
+   %parent.resizing = true;
+   %parent.maxSize(%fluidWindow);
+   
+   %parent.panelHidden = false;
+}
+
+//-----------------------------------------------------------------------------
+
+
 //==============================================================================
 // SubMaterial(Material Target) -- Supports different ways to grab the 
 // material from the dropdown list. We're here either because-
@@ -522,8 +783,8 @@ function MaterialEditorGui::isMatEditorMaterial(%this, %material)
 
 function MaterialEditorGui::setMaterialNotDirty(%this)
 {
-   %propertyText = "Material Properties";
-   %previewText = "Material Preview";
+   %propertyText = "::  Material Editor - Properties";
+   %previewText = "::  Material Editor - Preview";
    MaterialEditorPropertiesWindow.text = %propertyText;
    MaterialEditorPreviewWindow.text = %previewText;
    
@@ -533,8 +794,8 @@ function MaterialEditorGui::setMaterialNotDirty(%this)
 
 function MaterialEditorGui::setMaterialDirty(%this)
 { 
-   %propertyText = "Material Properties *";
-   %previewText = "Material Preview *";
+   %propertyText = "::  Material Editor - Properties *";
+   %previewText = "::  Material Editor - Preview *";
    MaterialEditorPropertiesWindow.text = %propertyText;
    MaterialEditorPreviewWindow.text = %previewText;