Add tabs to profile & account settings

The settings are getting quite long, so let's "fix" that by separating them into categorical settings.
redstrate · Jul 29, 2024 · e32a61e · e32a61e
1 parent a8190da
commit e32a61e
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 35 deletions.
diff --git a/launcher/ui/Settings/AccountSettings.qml b/launcher/ui/Settings/AccountSettings.qml
@@ -36,12 +36,32 @@ FormCard.FormCardPage {
         }
     ]
 
-    FormCard.FormHeader {
-        title: i18n("General")
+    header: Kirigami.NavigationTabBar {
+        width: parent.width
+
+        actions: [
+            Kirigami.Action {
+                id: generalAction
+                text: i18n("General")
+            },
+            Kirigami.Action {
+                id: accountAction
+                text: i18n("Account")
+            },
+            Kirigami.Action {
+                id: loginAction
+                text: i18n("Login")
+            }
+        ]
+
+        Component.onCompleted: actions[0].checked = true
     }
 
     FormCard.FormCard {
+        visible: generalAction.checked
+
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormTextFieldDelegate {
             id: usernameDelegate
@@ -81,15 +101,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Square Enix")
-        visible: !page.account.isSapphire
-    }
-
     FormCard.FormCard {
-        visible: !page.account.isSapphire
+        visible: accountAction.checked && !page.account.isSapphire
 
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormComboBoxDelegate {
             id: licenseField
@@ -158,15 +174,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Sapphire")
-        visible: page.account.isSapphire
-    }
-
     FormCard.FormCard {
-        visible: page.account.isSapphire
+        visible: accountAction.checked && page.account.isSapphire
 
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormTextFieldDelegate {
             id: lobbyURLDelegate
@@ -179,12 +191,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Login")
-    }
-
     FormCard.FormCard {
+        visible: loginAction.checked
+
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormCheckDelegate {
             id: rememberPasswordDelegate

diff --git a/launcher/ui/Settings/ProfileSettings.qml b/launcher/ui/Settings/ProfileSettings.qml
@@ -31,12 +31,38 @@ FormCard.FormCardPage {
         }
     ]
 
-    FormCard.FormHeader {
-        title: i18n("General")
+    header: Kirigami.NavigationTabBar {
+        width: parent.width
+
+        actions: [
+            Kirigami.Action {
+                id: generalAction
+                text: i18n("General")
+            },
+            Kirigami.Action {
+                id: wineAction
+                text: i18n("Wine")
+                visible: !LauncherCore.isWindows
+            },
+            Kirigami.Action {
+                id: toolsAction
+                text: i18n("Tools")
+                visible: !LauncherCore.isWindows
+            },
+            Kirigami.Action {
+                id: dalamudAction
+                text: i18n("Dalamud")
+            }
+        ]
+
+        Component.onCompleted: actions[0].checked = true
     }
 
     FormCard.FormCard {
+        visible: generalAction.checked
+
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormTextFieldDelegate {
             id: nameDelegate
@@ -85,14 +111,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Wine")
-    }
-
     FormCard.FormCard {
-        visible: !LauncherCore.isWindows
+        visible: wineAction.checked
 
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormComboBoxDelegate {
             id: wineTypeDelegate
@@ -139,15 +162,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Tools")
-        visible: !LauncherCore.isWindows
-    }
-
     FormCard.FormCard {
-        visible: !LauncherCore.isWindows
+        visible: toolsAction.checked
 
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormCheckDelegate {
             text: i18n("Enable Gamescope")
@@ -213,12 +232,11 @@ FormCard.FormCardPage {
         }
     }
 
-    FormCard.FormHeader {
-        title: i18n("Dalamud")
-    }
-
     FormCard.FormCard {
+        visible: dalamudAction.checked
+
         Layout.fillWidth: true
+        Layout.topMargin: Kirigami.Units.largeSpacing
 
         FormCard.FormCheckDelegate {
             id: enableDalamudDelegate