fix: show selected tab when welcome screen is opened (#628)

* fix tint on tab button * move styling to uss, enable styles in c#
MirageNet · Feb 20, 2021 · f6cae98 · f6cae98
1 parent 7c59e47
commit f6cae98
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uss b/Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uss
@@ -98,3 +98,19 @@ Button {
     flex-direction: column;
     justify-content: space-between;
 }
+
+.dark-selected-tab {
+    background-color: rgba(53, 53, 53, 255);
+    border-left-color: rgba(36, 36, 36, 255);
+    border-right-color: rgba(36, 36, 36, 255);
+    border-top-color: rgba(36, 36, 36, 255);
+    border-bottom-color: rgba(36, 36, 36, 255);
+}
+
+.light-selected-tab {
+    background-color: rgba(177, 177, 177, 255);
+    border-left-color: rgba(147, 147, 147, 255);
+    border-right-color: rgba(147, 147, 147, 255);
+    border-top-color: rgba(147, 147, 147, 255);
+    border-bottom-color: rgba(147, 147, 147, 255);
+}
diff --git a/Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uxml b/Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uxml
@@ -7,13 +7,13 @@
     <ui:Label name="Title" text="Welcome to Mirage!" />
     <ui:Box name="ColumnContainer">
         <ui:VisualElement name="LeftColumnBox">
-            <ui:Button name="WelcomeButton" text="Welcome" />
-            <ui:Button name="QuickStartButton" text="Quick Start Guide" />
-            <ui:Button name="FaqButton" text="FAQ" />
-            <ui:Button name="BestPracticesButton" text="Best Practices" />
-            <ui:Button name="ChangeLogButton" text="Change Log" />
+            <ui:Button name="WelcomeButton" text="Welcome" class="light-selected-tab dark-selected-tab" />
+            <ui:Button name="QuickStartButton" text="Quick Start Guide" class="light-selected-tab dark-selected-tab" />
+            <ui:Button name="FaqButton" text="FAQ" class="light-selected-tab dark-selected-tab" />
+            <ui:Button name="BestPracticesButton" text="Best Practices" class="light-selected-tab dark-selected-tab" />
+            <ui:Button name="ChangeLogButton" text="Change Log" class="light-selected-tab dark-selected-tab" />
             <ui:Button name="SponsorButton" text="Sponsor Us" style="display: none;" />
-            <ui:Button name="DiscordButton" text="Discord" />
+            <ui:Button name="DiscordButton" text="Discord" class="light-selected-tab dark-selected-tab" />
         </ui:VisualElement>
         <ui:VisualElement name="Spacer" />
         <ui:VisualElement name="RightColumnBox">

diff --git a/Assets/Mirage/Editor/WelcomeWindow/WelcomeWindow.cs b/Assets/Mirage/Editor/WelcomeWindow/WelcomeWindow.cs
@@ -36,6 +36,7 @@ public class WelcomeWindow : EditorWindow
 
         //window size of the welcome screen
         private static Vector2 windowSize = new Vector2(500, 415);
+        private static string screenToOpenKey = "MirageScreenToOpen";
 
         //editorprefs keys
         private static string firstStartUpKey = string.Empty;
@@ -78,6 +79,8 @@ private static void ShowWindowOnFirstStart()
 
             if ((!EditorPrefs.GetBool(firstTimeMirageKey, false) || !EditorPrefs.GetBool(firstStartUpKey, false)) && firstStartUpKey != "MirageUnknown")
             {
+                EditorPrefs.SetString(screenToOpenKey, ShowChangeLog ? "ChangeLog" : "Welcome");
+
                 OpenWindow();
             }
         }
@@ -132,7 +135,12 @@ private void OnEnable()
             ConfigureTab("SponsorButton", "Sponsor", SponsorUrl);
             ConfigureTab("DiscordButton", "Discord", DiscordInviteUrl);
 
-            ShowTab(ShowChangeLog ? "ChangeLog" : "Welcome");
+            ShowTab(EditorPrefs.GetString(screenToOpenKey, "Welcome"));
+
+            //set the screen's button to be tinted when welcome window is opened
+            Button openedButton = rootVisualElement.Q<Button>(EditorPrefs.GetString(screenToOpenKey, "Welcome") + "Button");
+            ToggleMenuButtonColor(openedButton, true);
+            lastClickedTab = openedButton;
 
             #endregion
         }
@@ -148,12 +156,17 @@ private void OnDisable()
         private void ConfigureTab(string tabButtonName, string tab, string url)
         {
             Button tabButton = rootVisualElement.Q<Button>(tabButtonName);
+
+            tabButton.EnableInClassList("dark-selected-tab", false);
+            tabButton.EnableInClassList("light-selected-tab", false);
+
             tabButton.clicked += () => 
             {
                 ToggleMenuButtonColor(tabButton, true);
                 ToggleMenuButtonColor(lastClickedTab, false);
                 ShowTab(tab);
                 lastClickedTab = tabButton;
+                EditorPrefs.SetString(screenToOpenKey, tab);
             };
 
             Button redirectButton = rootVisualElement.Q<VisualElement>(tab).Q<Button>("Redirect");
@@ -186,15 +199,15 @@ private void ToggleMenuButtonColor(Button button, bool toggle)
         {
             if(button == null) { return; }
 
-            if(toggle)
+            //dark mode
+            if (EditorGUIUtility.isProSkin)
             {
-                button.style.backgroundColor = button.resolvedStyle.backgroundColor;
-                button.style.borderBottomColor = button.style.borderTopColor = button.style.borderLeftColor = button.style.borderRightColor = button.resolvedStyle.borderBottomColor;
+                button.EnableInClassList("dark-selected-tab", toggle);
             }
+            //light mode
             else
             {
-                button.style.backgroundColor = defaultButtonBackgroundColor;
-                button.style.borderBottomColor = button.style.borderTopColor = button.style.borderLeftColor = button.style.borderRightColor = defaultButtonBorderColor;
+                button.EnableInClassList("light-selected-tab", toggle);
             }
         }