From 6ca277a21d6e0dd4c9159ecfeaff159e53635b90 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 23 Oct 2024 17:11:41 -0500
Subject: [PATCH] Update:Library settings tab settings in 2 columns and cleanup

---
 .../modals/libraries/LibrarySettings.vue      | 130 +++++++++---------
 client/components/ui/TextInput.vue            |   4 +-
 client/components/ui/ToggleSwitch.vue         |  17 ++-
 3 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/client/components/modals/libraries/LibrarySettings.vue b/client/components/modals/libraries/LibrarySettings.vue
index 508f3b81..896a6837 100644
--- a/client/components/modals/libraries/LibrarySettings.vue
+++ b/client/components/modals/libraries/LibrarySettings.vue
@@ -1,78 +1,80 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-3">
-      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsSquareBookCovers }}
-          <span class="material-symbols icon-text text-sm">info</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" @input="formUpdated" />
-        <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
-      </div>
-      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
-    </div>
-    <div v-if="isBookLibrary" class="flex items-center py-3">
-      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsAudiobooksOnly }}
-          <span class="material-symbols icon-text text-sm">info</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsHideSingleBookSeries }}
+    <div class="flex flex-wrap">
+      <div class="flex items-center p-2 w-full md:w-1/2">
+        <ui-toggle-switch v-model="useSquareBookCovers" size="sm" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
+          <p class="pl-4 text-sm">
+            {{ $strings.LabelSettingsSquareBookCovers }}
             <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+      <div class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" size="sm" @input="formUpdated" />
+          <ui-toggle-switch v-else disabled size="sm" :value="false" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
+        </div>
+        <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
+      </div>
+      <div v-if="isBookLibrary" class="flex items-center p-2 w-full md:w-1/2">
+        <ui-toggle-switch v-model="audiobooksOnly" size="sm" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
+          <p class="pl-4 text-sm">
+            {{ $strings.LabelSettingsAudiobooksOnly }}
             <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="epubsAllowScriptedContent" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
-            <span class="material-symbols icon-text text-sm">info</span>
-          </p>
-        </ui-tooltip>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="skipMatchingMediaWithAsin" size="sm" @input="formUpdated" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" size="sm" @input="formUpdated" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="hideSingleBookSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsHideSingleBookSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="epubsAllowScriptedContent" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isPodcastLibrary" class="p-2 w-full md:w-1/2">
+        <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
       </div>
-    </div>
-    <div v-if="isPodcastLibrary" class="py-3">
-      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
     </div>
   </div>
 </template>
diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
index 7329ec09..6935a1dd 100644
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -57,7 +57,8 @@ export default {
     inputName: String,
     showCopy: Boolean,
     step: [String, Number],
-    min: [String, Number]
+    min: [String, Number],
+    customInputClass: String
   },
   data() {
     return {
@@ -82,6 +83,7 @@ export default {
       _list.push(`py-${this.paddingY}`)
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
+      if (this.customInputClass) _list.push(this.customInputClass)
       return _list.join(' ')
     },
     actualType() {
diff --git a/client/components/ui/ToggleSwitch.vue b/client/components/ui/ToggleSwitch.vue
index b5511d96..aabaa00f 100644
--- a/client/components/ui/ToggleSwitch.vue
+++ b/client/components/ui/ToggleSwitch.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
-      <span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
+    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer justify-start" :style="{ width: buttonWidth + 'px' }" :aria-checked="toggleValue" :class="className" @click="clickToggle">
+      <span class="rounded-full border border-black-50 shadow transform transition-transform duration-100" :style="{ width: cursorHeightWidth + 'px', height: cursorHeightWidth + 'px' }" :class="switchClassName"></span>
     </button>
   </div>
 </template>
@@ -19,7 +19,11 @@ export default {
       default: 'primary'
     },
     disabled: Boolean,
-    labeledBy: String
+    labeledBy: String,
+    size: {
+      type: String,
+      default: 'md'
+    }
   },
   computed: {
     toggleValue: {
@@ -37,6 +41,13 @@ export default {
     switchClassName() {
       var bgColor = this.disabled ? 'bg-gray-300' : 'bg-white'
       return this.toggleValue ? 'translate-x-5 ' + bgColor : bgColor
+    },
+    cursorHeightWidth() {
+      if (this.size === 'sm') return 16
+      return 20
+    },
+    buttonWidth() {
+      return this.cursorHeightWidth * 2
     }
   },
   methods: {