[web] Migrate to Bulma 1.0.2

web-src/src/components/ControlMainVolume.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
-      <a class="button is-white is-small" @click="toggle">
+      <a class="button is-small" @click="toggle">
         <mdicon class="icon" :name="icon" />
       </a>
     </div>

web-src/src/components/ControlOutputVolume.vue

@@ -2,7 +2,7 @@
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
       <a
-        class="button is-white is-small"
+        class="button is-small"
         :class="{ 'has-text-grey-light': !output.selected }"
         @click="toggle"
       >

web-src/src/components/ControlStreamVolume.vue

@@ -2,7 +2,7 @@
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
       <a
-        class="button is-white is-small"
+        class="button is-small"
         :class="{
           'has-text-grey-light': !playing && !loading,
           'is-loading': loading

web-src/src/components/ControlSwitch.vue

@@ -1,14 +1,22 @@
 <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>
+  <div class="field">
+    <label class="toggle">
+      <div class="control is-flex is-align-content-center">
+        <input
+          :checked="modelValue"
+          type="checkbox"
+          class="toggle-checkbox"
+          @change="$emit('update:modelValue', !modelValue)"
+        />
+        <div class="toggle-switch" />
+        <slot name="label" />
+        <slot name="info" />
+      </div>
+    </label>
+    <p v-if="$slots['help']" class="help notification">
+      <slot name="help" />
+    </p>
+  </div>
 </template>
 
 <script>
@@ -29,10 +37,11 @@ export default {
 
 .toggle-switch {
   display: inline-block;
-  background: var(--bulma-grey-light);
+  background: var(--bulma-grey-lighter);
   border-radius: 1rem;
-  width: 2.75rem;
-  height: 1.5rem;
+  min-width: 2.5rem;
+  width: 2.5rem;
+  height: 1.25rem;
   position: relative;
   vertical-align: middle;
   transition: background 0.25s;
@@ -49,18 +58,18 @@ export default {
   width: 1rem;
   height: 1rem;
   position: absolute;
-  top: 0.25rem;
-  left: 0.25rem;
+  top: 0.125rem;
+  left: 0.125rem;
   transition: left 0.25s;
 }
 .toggle:hover .toggle-switch:before {
   background: var(--bulma-white);
 }
 .toggle-checkbox:checked + .toggle-switch {
-  background: var(--bulma-primary);
+  background: var(--bulma-dark);
 }
 .toggle-checkbox:checked + .toggle-switch:before {
-  left: 1.5rem;
+  left: 1.375rem;
 }
 
 .toggle-checkbox {

web-src/src/components/ListAlbums.vue

@@ -3,7 +3,7 @@
     <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>

web-src/src/components/ListArtists.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListComposers.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListGenres.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListTracks.vue

@@ -3,7 +3,7 @@
     <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>

web-src/src/components/ModalDialog.vue

@@ -11,17 +11,13 @@
       </a>
       <a
         v-if="delete_action"
-        class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
+        class="card-footer-item has-background-danger"
         @click="$emit('delete')"
       >
         <mdicon class="icon" name="delete" size="16" />
         <span class="is-size-7" v-text="delete_action" />
       </a>
-      <a
-        v-if="ok_action"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-        @click="$emit('ok')"
-      >
+      <a v-if="ok_action" class="card-footer-item" @click="$emit('ok')">
         <mdicon class="icon" name="check" size="16" />
         <span class="is-size-7" v-text="ok_action" />
       </a>

web-src/src/components/ModalDialogAddRss.vue

@@ -7,7 +7,7 @@
           <input
             ref="url_field"
             v-model="url"
-            class="input is-shadowless"
+            class="input"
             type="url"
             pattern="http[s]?://.+"
             required
@@ -33,7 +33,7 @@
       </a>
       <a
         :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
+        class="card-footer-item"
         @click="add_stream"
       >
         <mdicon class="icon" name="playlist-plus" size="16" />

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -8,7 +8,7 @@
             <input
               ref="url_field"
               v-model="url"
-              class="input is-shadowless"
+              class="input"
               type="url"
               pattern="http[s]?://.+"
               required

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -8,7 +8,7 @@
             <input
               ref="playlist_name_field"
               v-model="playlist_name"
-              class="input is-shadowless"
+              class="input"
               type="text"
               pattern=".+"
               required
@@ -34,7 +34,7 @@
       </a>
       <a
         :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
+        class="card-footer-item has-text-weight-bold"
         @click="save"
       >
         <mdicon class="icon" name="content-save" size="16" />

web-src/src/components/ModalDialogRemotePairing.vue

@@ -23,10 +23,7 @@
         <mdicon class="icon" name="cancel" size="16" />
         <span class="is-size-7" v-text="$t('dialog.remote-pairing.cancel')" />
       </a>
-      <a
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-        @click="kickoff_pairing"
-      >
+      <a class="card-footer-item" @click="kickoff_pairing">
         <mdicon class="icon" name="cellphone" size="16" />
         <span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
       </a>

web-src/src/components/ModalDialogUpdate.vue

@@ -9,8 +9,8 @@
   >
     <template #modal-content>
       <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">
+          <label class="label" v-text="$t('dialog.update.info')" />
           <div class="control">
             <div class="select is-small">
               <select v-model="libraryStore.update_dialog_scan_kind">
@@ -30,13 +30,11 @@
             </div>
           </div>
         </div>
-        <div class="field">
-          <control-switch v-model="rescan_metadata">
-            <template #label>
-              <span v-text="$t('dialog.update.rescan-metadata')" />
-            </template>
-          </control-switch>
-        </div>
+        <control-switch v-model="rescan_metadata">
+          <template #label>
+            <span v-text="$t('dialog.update.rescan-metadata')" />
+          </template>
+        </control-switch>
       </div>
       <div v-else>
         <p class="mb-3" v-text="$t('dialog.update.progress')" />

web-src/src/components/NavbarBottom.vue

@@ -18,9 +18,9 @@
         <control-link
           :to="{ name: 'now-playing' }"
           exact
-          class="navbar-item is-expanded is-clipped is-size-7"
+          class="navbar-item is-justify-content-flex-start is-expanded is-clipped is-size-7"
         >
-          <div class="fd-is-text-clipped">
+          <div class="is-text-clipped">
             <strong v-text="current.title" />
             <br />
             <span v-text="current.artist" />
@@ -134,3 +134,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.is-text-clipped {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

web-src/src/components/SettingsCheckbox.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="field">
-    <control-switch
-      :id="setting.name"
-      v-model="setting.value"
-      @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 }"
-      v-text="info"
-    />
-    <p v-if="$slots['info']" class="help">
-      <slot name="info" />
-    </p>
-  </div>
+  <control-switch v-model="setting.value" @update:model-value="update">
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #info>
+      <mdicon
+        v-if="isSuccess"
+        class="icon has-text-info"
+        name="check"
+        size="16"
+      />
+      <mdicon
+        v-if="isError"
+        class="icon has-text-danger"
+        name="close"
+        size="16"
+      />
+    </template>
+  </control-switch>
 </template>
 
 <script>
@@ -48,18 +48,10 @@ export default {
   },
 
   computed: {
-    info() {
-      if (this.is_success) {
-        return this.$t('setting.saved')
-      } else if (this.is_error) {
-        return this.$t('setting.not-saved')
-      }
-      return ''
-    },
-    is_error() {
+    isError() {
       return this.statusUpdate === 'error'
     },
-    is_success() {
+    isSuccess() {
       return this.statusUpdate === 'success'
     },
     setting() {
@@ -76,13 +68,13 @@ export default {
   },
 
   methods: {
-    clear_status() {
+    clearStatus() {
       if (this.is_error) {
         this.setting.value = !this.setting.value
       }
       this.statusUpdate = ''
     },
-    update_setting() {
+    update() {
       this.timerId = -1
       const setting = {
         category: this.category,
@@ -99,7 +91,7 @@ export default {
           this.statusUpdate = 'error'
         })
         .finally(() => {
-          this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
+          this.timerId = window.setTimeout(this.clearStatus, this.timerDelay)
         })
     }
   }