feat: Speed cards as pills with icon in first column and speed on top of the unit in second column (#169)

Co-authored-by: Ievgen Sobko <ievgensobko@cloud.upwork.com>

src/actions/index.js

@@ -0,0 +1,5 @@
+import { setDocumentTitle } from './setDocumentTitle'
+
+export {
+  setDocumentTitle
+}

src/actions/setDocumentTitle.js

@@ -0,0 +1,35 @@
+import { formatBytes } from '@/helpers'
+
+export class setDocumentTitle {
+  static setDefault() {
+    this.set('VueTorrent')
+  }
+
+  static setGlobalSpeed(speeds) {
+    if (!speeds || speeds.length !== 2) return
+    this.set(`[D: ${formatBytes(speeds[0])}/s, U: ${formatBytes(speeds[1])}/s] VueTorrent`)
+  }
+
+  static setFirstTorrentStatus(torrent) {
+    if (!torrent) return
+    this.set(`${torrent.state.toLowerCase()} - ${torrent.progress}% - ${torrent.name}`)
+  }
+
+  static updateTitle(mode, speeds, torrent) {
+    if (!mode || !speeds.length || !torrent) return
+    switch (mode) {
+      case 'Default':
+        return this.setDefault()
+      case 'Global Speed':
+        return this.setGlobalSpeed(speeds)
+      case 'First Torrent Status':
+        return this.setFirstTorrentStatus(torrent)
+      default:
+        return this.setDefault()
+    }
+  }
+
+  static set(title) {
+    document.title = title
+  }
+}

src/components/Core/SpeedCard.vue

@@ -1,29 +1,31 @@
 <template>
   <v-card
     flat
+    rounded="md"
     color="secondary"
     class="speedCard"
     data-testid="SpeedCard"
   >
-    <v-layout row :class="color + '--text'">
-      <v-flex v-if="icon" xs2>
-        <v-icon data-testid="SpeedCard-icon" :color="color" size="16px">
+    <v-layout row align-center :class="color + '--text'">
+      <v-flex v-if="icon" xs2 class="pl-1">
+        <v-icon data-testid="SpeedCard-icon" :color="color" size="20px">
           {{ icon }}
         </v-icon>
       </v-flex>
-      <v-flex xs6 class="text-center font-weight-bold robot-mono">
-        <span data-testid="SpeedCard-value">
-          {{ value | getSpeedValue }}
-        </span>
-      </v-flex>
-      <v-flex
-        xs4
-        class="caption robot-mono text-right mt-1"
-      >
-        <span data-testid="SpeedCard-unit">
-          {{ value | getDataUnit(1) }}/s
-        </span>
-      </v-flex>
+      <v-layout column xs10>
+        <v-flex class="text-center font-weight-bold robot-mono">
+          <span data-testid="SpeedCard-value">
+            {{ value | getSpeedValue }}
+          </span>
+        </v-flex>
+        <v-flex
+          class="caption robot-mono text-center mt-n1"
+        >
+          <span data-testid="SpeedCard-unit">
+            {{ value | getDataUnit(1) }}/s
+          </span>
+        </v-flex>
+      </v-layout>
     </v-layout>
   </v-card>
 </template>
@@ -47,7 +49,7 @@ export default {
 
 <style scoped>
 .speedCard {
-  padding: 32px 16px !important;
-  font-size: 1.05em;
+  padding: 20px 20px !important;
+  font-size: 1.10em;
 }
 </style>

src/components/Modals/SettingsModal/Tabs/Vuetorrent/General.vue

@@ -59,16 +59,6 @@
                   Show Tracker Filter
                 </template>
               </v-switch>
-              <v-switch
-                v-model="showSpeedInTitle"
-                class="v-input--reverse v-input--expand pa-0 ma-0"
-                inset
-                color="accent"
-              >
-                <template #label>
-                  Show Speed in Title
-                </template>
-              </v-switch>
               <v-switch
                 v-model="useDeviceDarkMode"
                 class="v-input--reverse v-input--expand pa-0 ma-0"
@@ -94,6 +84,21 @@
                   />
                 </v-col>
               </v-row>
+              <v-row dense>
+                <v-col cols="8" sm="8" md="10">
+                  <p class="subtitle-1">
+                    VueTorrent title:
+                  </p>
+                </v-col>
+                <v-col cols="4" sm="4" md="2">
+                  <v-select
+                    v-model="title"
+                    class="pa-0 ma-0"
+                    color="accent"
+                    :items="titleOptions"
+                  />
+                </v-col>
+              </v-row>
               <v-row dense>
                 <v-col cols="10" sm="10" md="11">
                   <p class="subtitle-1">
@@ -136,6 +141,7 @@ export default {
   data() {
     return {
       paginationSizes: [5, 15, 30, 50],
+      titleOptions: ['Default', 'Global Speed', 'First Torrent Status'],
       Qbitversion: 0
     }
   },
@@ -190,15 +196,6 @@ export default {
         this.webuiSettings.useDeviceDarkMode = val
       }
     },
-    showSpeedInTitle: {
-      get() {
-        return this.webuiSettings.showSpeedInTitle
-      },
-      set(val) {
-        this.webuiSettings.showSpeedInTitle = val
-        document.title = 'VueTorrent'
-      }
-    },
     paginationSize: {
       get() {
         return this.webuiSettings.paginationSize
@@ -207,6 +204,14 @@ export default {
         this.webuiSettings.paginationSize = val
       }
     },
+    title: {
+      get() {
+        return this.webuiSettings.title
+      },
+      set(val) {
+        this.webuiSettings.title = val
+      }
+    },
     version() {
       return this.getAppVersion()
     }

src/store/index.js

@@ -57,6 +57,7 @@ export default new Vuex.Store({
       showCurrentSpeed: true,
       showTrackerFilter: false,
       showSpeedInTitle: false,
+      title: 'Default',
       useDeviceDarkMode: true,
       paginationSize: 15,
       busyTorrentProperties: [

src/store/mutations.js

@@ -1,7 +1,8 @@
 import Torrent from '../models/Torrent'
 import Status from '../models/Status'
 import qbit from '../services/qbit'
-import { formatBytes, getHostName } from '@/helpers'
+import { getHostName } from '@/helpers'
+import { setDocumentTitle } from '@/actions'
 
 export default {
   SET_APP_VERSION(state, version) {
@@ -79,21 +80,22 @@ export default {
       }
     }
 
-    // torrent speed in title
-    if (state.webuiSettings.showSpeedInTitle) {
-      // eslint-disable-next-line max-len
-      document.title = `[D: ${formatBytes(state.status.dlspeed)}/s, U: ${formatBytes(state.status.upspeed)}/s] VueTorrent`
-    }
-
     // torrents
     state.torrents = data.map(t => new Torrent(t))
+
+    // update document title
+    setDocumentTitle.updateTitle(
+      state.webuiSettings.title,
+      [state.status.dlspeed, state.status.upspeed],
+      state.torrents ? state.torrents[0] : null
+    )
   },
   FETCH_SETTINGS: async state => {
     const { data } = await qbit.getAppPreferences()
     state.settings = data
   },
   UPDATE_SORT_OPTIONS: (state, {
-    hashes = [], 
+    hashes = [],
     filter = null,
     category = null,
     tracker = null

tests/helpers.js

@@ -10,4 +10,4 @@ export function setup(component, propsData) {
     vuetify,
     propsData
   })
-}
+}