From f28cfa5c62e3756278b74cac5a51d39634cd4ac8 Mon Sep 17 00:00:00 2001
From: CzBiX <CzBiX@users.noreply.github.com>
Date: Fri, 7 Oct 2022 16:42:30 +0800
Subject: [PATCH] Tweak settings UI

---
 .../settingsDialog/DownloadSettings.vue       |   7 ++
 .../dialogs/settingsDialog/PreferenceRow.vue  |  19 ++-
 .../dialogs/settingsDialog/SettingsDialog.vue | 113 +++++++++---------
 3 files changed, 77 insertions(+), 62 deletions(-)

diff --git a/src/components/dialogs/settingsDialog/DownloadSettings.vue b/src/components/dialogs/settingsDialog/DownloadSettings.vue
index b8cd2fc..81eff4d 100644
--- a/src/components/dialogs/settingsDialog/DownloadSettings.vue
+++ b/src/components/dialogs/settingsDialog/DownloadSettings.vue
@@ -46,6 +46,7 @@
     >
       <preference-row i18n-key="auto_tmm_enabled">
         <v-select
+          dense
           :items="torrentMode"
           :value="preferences.auto_tmm_enabled ? torrentMode[0] : torrentMode[1]"
           @change="changeSettings('auto_tmm_enabled', $event == torrentMode[0])"
@@ -53,6 +54,7 @@
       </preference-row>
       <preference-row i18n-key="torrent_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('torrent_changed_tmm_enabled', $event == torrentAction[1])"
@@ -60,6 +62,7 @@
       </preference-row>
       <preference-row i18n-key="save_path_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('save_path_changed_tmm_enabled', $event == torrentAction[1])"
@@ -67,6 +70,7 @@
       </preference-row>
       <preference-row i18n-key="category_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('category_changed_tmm_enabled', $event == torrentAction[1])"
@@ -74,6 +78,7 @@
       </preference-row>
       <preference-row i18n-key="save_path">
         <v-text-field
+          dense
           :value="preferences.save_path"
           @change="changeSettings('save_path', $event)"
           lazy
@@ -82,6 +87,7 @@
       <preference-row i18n-key="temp_path">
         <template v-slot:header>
           <v-checkbox
+            dense
             :value="preferences.temp_path_enabled"
             @change="changeSettings('temp_path_enabled', $event)"
           />
@@ -91,6 +97,7 @@
           :value="preferences.temp_path"
           @change="changeSettings('temp_path', $event)"
           lazy
+          dense
         />
       </preference-row>
       <preference-row
diff --git a/src/components/dialogs/settingsDialog/PreferenceRow.vue b/src/components/dialogs/settingsDialog/PreferenceRow.vue
index 04f6728..13e2d03 100644
--- a/src/components/dialogs/settingsDialog/PreferenceRow.vue
+++ b/src/components/dialogs/settingsDialog/PreferenceRow.vue
@@ -3,18 +3,19 @@
     align="center"
     dense
   >
-    <v-col cols="3">
-      <v-subheader v-text="$t('preferences.' + this.$props.i18nKey)" />
-    </v-col>
-    <v-col cols="4">
-      <slot />
-    </v-col>
     <v-col
       cols="auto"
       v-if="$slots.header"
+      class="header"
     >
       <slot name="header" />
     </v-col>
+    <v-col>
+      <span v-text="$t('preferences.' + this.$props.i18nKey)" />
+    </v-col>
+    <v-col>
+      <slot />
+    </v-col>
   </v-row>
 </template>
 
@@ -28,3 +29,9 @@ export default class PreferenceRow extends Vue {
   readonly i18nKey?: string
 }
 </script>
+
+<style lang="scss" scoped>
+.header {
+  height: 48px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/dialogs/settingsDialog/SettingsDialog.vue b/src/components/dialogs/settingsDialog/SettingsDialog.vue
index a602aeb..b744374 100644
--- a/src/components/dialogs/settingsDialog/SettingsDialog.vue
+++ b/src/components/dialogs/settingsDialog/SettingsDialog.vue
@@ -1,61 +1,59 @@
 <template>
-  <div>
-    <v-dialog
-      :value="value"
-      @input="$emit('input', $event)"
-      scrollable
-      persistent
-      max-width="720px"
-    >
-      <v-card>
-        <v-card-title class="headline">
-          <v-icon class="mr-2">mdi-cog</v-icon>
-          <span v-text="$t('settings')" />
-          <v-spacer />
-          <v-btn
-            icon
-            @click="closeDialog"
+  <v-dialog
+    :value="value"
+    @input="$emit('input', $event)"
+    scrollable
+    persistent
+    max-width="720px"
+  >
+    <v-card>
+      <v-card-title class="headline">
+        <v-icon class="mr-2">mdi-cog</v-icon>
+        <span v-text="$t('settings')" />
+        <v-spacer />
+        <v-btn
+          icon
+          @click="closeDialog"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-tabs v-model="tab">
+          <v-tab
+            v-for="item of tabList"
+            :key="item"
           >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
-        <v-card-text>
-          <v-tabs v-model="tab">
-            <v-tab
-              v-for="item of tabList"
-              :key="item"
-            >
-              {{ $t('preferences.' + item) }}
-            </v-tab>
-          </v-tabs>
-          <v-fade-transition>
-            <v-alert
-              dense
-              text
-              type="success"
-              v-show="preferenceUpdated"
-            >
-              {{ $t('preferences.change_applied') }}
-            </v-alert>
-          </v-fade-transition>
-          <v-tabs-items v-model="tab">
-            <v-tab-item key="downloads">
-              <download-settings />
-            </v-tab-item>
-            <v-tab-item key="speed">
-              <speed-settings />
-            </v-tab-item>
-            <v-tab-item key="rss">
-              <rss-settings />
-            </v-tab-item>
-            <v-tab-item key="webui">
-              <web-u-i-settings />
-            </v-tab-item>
-          </v-tabs-items>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
+            {{ $t('preferences.' + item) }}
+          </v-tab>
+        </v-tabs>
+        <v-fade-transition>
+          <v-alert
+            dense
+            text
+            type="success"
+            v-show="preferenceUpdated"
+          >
+            {{ $t('preferences.change_applied') }}
+          </v-alert>
+        </v-fade-transition>
+        <v-tabs-items v-model="tab">
+          <v-tab-item key="downloads">
+            <download-settings />
+          </v-tab-item>
+          <v-tab-item key="speed">
+            <speed-settings />
+          </v-tab-item>
+          <v-tab-item key="rss">
+            <rss-settings />
+          </v-tab-item>
+          <v-tab-item key="webui">
+            <web-u-i-settings />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
@@ -114,4 +112,7 @@ export default class SettingsDialog extends Vue {
 @import "~@/assets/styles.scss";
 
 @include dialog-title;
+
+::v-deep .v-card__text {
+}
 </style>