[web] Replace switch control

web-src/src/components/ControlSwitch.vue

@@ -0,0 +1,70 @@
+<template>
+  <label class="toggle">
+    <input
+      :checked="modelValue"
+      type="checkbox"
+      class="toggle-checkbox is-rounded mr-2"
+      @change="$emit('update:modelValue', !modelValue)"
+    />
+    <div class="toggle-switch"></div>
+    <slot name="label" class="toggle-label" />
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'ControlSwitch',
+  props: {
+    modelValue: Boolean
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style scoped>
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.toggle-switch {
+  display: inline-block;
+  background: var(--bulma-grey-light);
+  border-radius: 1rem;
+  width: 2.75rem;
+  height: 1.5rem;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+  margin-right: 0.5rem;
+}
+.toggle-switch:before,
+.toggle-switch:after {
+  content: '';
+}
+.toggle-switch:before {
+  display: block;
+  background: var(--bulma-white);
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  transition: left 0.25s;
+}
+.toggle:hover .toggle-switch:before {
+  background: var(--bulma-white);
+}
+.toggle-checkbox:checked + .toggle-switch {
+  background: var(--bulma-primary);
+}
+.toggle-checkbox:checked + .toggle-switch:before {
+  left: 1.5rem;
+}
+
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+</style>

web-src/src/components/ModalDialogAlbum.vue

@@ -9,7 +9,7 @@
               :url="item.artwork_url"
               :artist="item.artist"
               :album="item.name"
-              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+              class="fd-has-shadow fd-cover fd-cover-normal-image"
             />
             <p class="title is-4">
               <a class="has-text-link" @click="open" v-text="item.name" />
@@ -184,5 +184,3 @@ export default {
   }
 }
 </script>
-
-<style></style>

web-src/src/components/ModalDialogPlaylist.vue

@@ -86,5 +86,3 @@ export default {
   }
 }
 </script>
-
-<style></style>

web-src/src/components/ModalDialogTrack.vue

@@ -87,13 +87,12 @@
               </p>
               <p>
                 <span class="heading" v-text="$t('dialog.track.type')" />
-                <span class="title is-6">
-                  <span
-                    v-text="
-                      `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-                    "
-                  />
-                </span>
+                <span
+                  class="title is-6"
+                  v-text="
+                    `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+                  "
+                />
               </p>
               <p v-if="item.samplerate">
                 <span class="heading" v-text="$t('dialog.track.quality')" />
@@ -296,5 +295,3 @@ export default {
   }
 }
 </script>
-
-<style></style>

web-src/src/components/ModalDialogUpdate.vue

@@ -2,18 +2,18 @@
   <modal-dialog
     :show="show"
     :title="$t('dialog.update.title')"
-    :ok_action="library.updating ? '' : $t('dialog.update.rescan')"
+    :ok_action="libraryStore.updating ? '' : $t('dialog.update.rescan')"
     :close_action="$t('dialog.update.cancel')"
     @ok="update_library"
     @close="close()"
   >
     <template #modal-content>
-      <div v-if="!library.updating">
+      <div v-if="!libraryStore.updating">
         <p class="mb-3" v-text="$t('dialog.update.info')" />
         <div v-if="spotify_enabled || rss.tracks > 0" class="field">
           <div class="control">
             <div class="select is-small">
-              <select v-model="update_dialog_scan_kind">
+              <select v-model="libraryStore.update_dialog_scan_kind">
                 <option value="" v-text="$t('dialog.update.all')" />
                 <option value="files" v-text="$t('dialog.update.local')" />
                 <option
@@ -31,13 +31,11 @@
           </div>
         </div>
         <div class="field">
-          <input
-            id="rescan"
-            v-model="rescan_metadata"
-            type="checkbox"
-            class="switch is-rounded is-small"
-          />
-          <label for="rescan" v-text="$t('dialog.update.rescan-metadata')" />
+          <control-switch v-model="rescan_metadata">
+            <template #label>
+              <span v-text="$t('dialog.update.rescan-metadata')" />
+            </template>
+          </control-switch>
         </div>
       </div>
       <div v-else>
@@ -48,6 +46,7 @@
 </template>
 
 <script>
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import { useLibraryStore } from '@/stores/library'
 import { useServicesStore } from '@/stores/services'
@@ -55,7 +54,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogUpdate',
-  components: { ModalDialog },
+  components: { ControlSwitch, ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -73,42 +72,26 @@ export default {
   },
 
   computed: {
-    library() {
-      return this.libraryStore.$state
-    },
-
     rss() {
       return this.libraryStore.rss
     },
-
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
-    },
-
-    update_dialog_scan_kind: {
-      get() {
-        return this.library.update_dialog_scan_kind
-      },
-      set(value) {
-        this.library.update_dialog_scan_kind = value
-      }
     }
   },
 
   methods: {
     close() {
-      this.update_dialog_scan_kind = ''
+      this.libraryStore.update_dialog_scan_kind = ''
       this.$emit('close')
     },
     update_library() {
       if (this.rescan_metadata) {
-        webapi.library_rescan(this.update_dialog_scan_kind)
+        webapi.library_rescan(this.libraryStore.update_dialog_scan_kind)
       } else {
-        webapi.library_update(this.update_dialog_scan_kind)
+        webapi.library_update(this.libraryStore.update_dialog_scan_kind)
       }
     }
   }
 }
 </script>
-
-<style></style>

web-src/src/components/SettingsCheckbox.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="field">
-    <input
+    <control-switch
       :id="setting.name"
       v-model="setting.value"
-      type="checkbox"
-      class="switch is-rounded mr-2"
-      @change="update_setting"
-    />
-    <label class="pt-0" :for="setting.name">
-      <slot name="label" />
-    </label>
+      @update:model-value="update_setting"
+    >
+      <template #label>
+        <slot name="label" />
+      </template>
+    </control-switch>
     <i
       class="is-size-7"
       :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
@@ -22,11 +21,13 @@
 </template>
 
 <script>
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
   name: 'SettingsCheckbox',
+  components: { ControlSwitch },
   props: {
     category: { required: true, type: String },
     name: { required: true, type: String }
@@ -104,5 +105,3 @@ export default {
   }
 }
 </script>
-
-<style></style>