0.4.9 (#94)

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.4.8",
+    "version": "0.4.9",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -2334,34 +2334,11 @@
             "dev": true
         },
         "axios": {
-            "version": "0.19.2",
+            "version": "0.21.1",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-            "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+            "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
             "requires": {
-                "follow-redirects": "1.5.10"
+                "follow-redirects": "^1.10.0"
-            },
-            "dependencies": {
-                "debug": {
-                    "version": "3.1.0",
-                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-                    "requires": {
-                        "ms": "2.0.0"
-                    }
-                },
-                "follow-redirects": {
-                    "version": "1.5.10",
-                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-                    "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-                    "requires": {
-                        "debug": "=3.1.0"
-                    }
-                },
-                "ms": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-                }
             }
         },
         "babel-eslint": {
@@ -5001,18 +4978,18 @@
             }
         },
         "eslint-plugin-prettier": {
-            "version": "3.3.0",
+            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz",
-            "integrity": "sha512-tMTwO8iUWlSRZIwS9k7/E4vrTsfvsrcM5p1eftyuqWH25nKsz/o6/54I7jwQ/3zobISyC7wMy9ZsFwgTxOcOpQ==",
+            "integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==",
             "dev": true,
             "requires": {
                 "prettier-linter-helpers": "^1.0.0"
             }
         },
         "eslint-plugin-vue": {
-            "version": "7.4.0",
+            "version": "7.4.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.4.0.tgz",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.4.1.tgz",
-            "integrity": "sha512-bYJV3nHSGV5IL40Ti1231vlY8I2DzjDHYyDjRv9Z1koEI7qyV2RR3+uKMafHdOioXYH9W3e1+iwe4wy7FIBNCQ==",
+            "integrity": "sha512-W/xPNHYIkGJphLUM2UIYYGKbRw3BcDoMIPY9lu1TTa2YLiZoxurddfnmOP+UOVywxb5vi438ejzwvKdZqydtIw==",
             "dev": true,
             "requires": {
                 "eslint-utils": "^2.1.0",
@@ -5659,7 +5636,6 @@
             "version": "1.11.0",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
             "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==",
-            "dev": true,
             "requires": {
                 "debug": "^3.0.0"
             },
@@ -5668,7 +5644,6 @@
                     "version": "3.2.6",
                     "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
                     "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-                    "dev": true,
                     "requires": {
                         "ms": "^2.1.1"
                     }
@@ -7806,8 +7781,7 @@
         "ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-            "dev": true
         },
         "multicast-dns": {
             "version": "6.2.3",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.4.8",
+    "version": "0.4.9",
     "private": true,
     "scripts": {
         "start": "npm run serve",
@@ -11,7 +11,7 @@
     "dependencies": {
         "@babel/polyfill": "^7.12.1",
         "apexcharts": "^3.23.1",
-        "axios": "^0.19.2",
+        "axios": "^0.21.1",
         "core-js": "^3.8.2",
         "dayjs": "^1.10.1",
         "fuse.js": "^6.4.5",
@@ -39,8 +39,8 @@
         "babel-eslint": "^10.1.0",
         "eslint": "^7.17.0",
         "eslint-config-google": "^0.14.0",
-        "eslint-plugin-prettier": "^3.3.0",
+        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-vue": "^7.4.0",
+        "eslint-plugin-vue": "^7.4.1",
         "fibers": "^5.0.0",
         "node-sass": "^4.14.1",
         "sass": "^1.32.0",

public/img/icons/safari-pinned-tab.svg

@@ -1,67 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M915 1919 c4 -10 -3 -14 -27 -13 -18 0 -39 -4 -45 -9 -9 -6 -13 -5
--13 4 0 12 -2 12 -9 0 -5 -7 -14 -10 -20 -7 -6 4 -11 2 -11 -4 0 -7 -8 -9 -21
--5 -16 6 -20 4 -13 -6 6 -10 3 -10 -11 1 -11 9 -16 10 -11 3 4 -7 2 -14 -3
--14 -12 -2 -26 -5 -38 -9 -5 -1 -11 -2 -15 -1 -5 0 -8 -4 -8 -11 0 -6 -3 -8
--7 -5 -3 4 -13 1 -21 -6 -13 -10 -15 -9 -8 3 4 9 2 8 -7 -2 -8 -10 -17 -15
--20 -11 -4 3 -9 -2 -13 -11 -3 -9 -10 -14 -14 -11 -5 3 -11 1 -15 -5 -4 -6
--11 -8 -16 -5 -5 4 -9 1 -9 -4 0 -6 -7 -11 -15 -11 -8 0 -15 -5 -15 -11 0 -6
--9 -9 -19 -6 -14 3 -18 1 -14 -9 3 -8 -3 -17 -13 -21 -11 -3 -28 -16 -40 -27
--38 -39 -65 -57 -74 -51 -6 3 -7 -1 -4 -9 3 -9 -2 -17 -15 -21 -13 -4 -18 -13
--16 -25 2 -11 -1 -20 -6 -20 -16 0 -39 -27 -31 -35 4 -5 -1 -5 -11 -2 -10 4
--16 3 -12 -2 5 -8 -26 -64 -54 -97 -6 -7 -7 -15 -4 -18 4 -3 1 -6 -5 -6 -7 0
--11 -3 -11 -7 3 -21 -3 -24 -18 -12 -15 11 -14 10 1 -9 11 -12 14 -22 9 -22
--6 0 -14 -11 -17 -25 -4 -14 -10 -24 -14 -21 -4 3 -14 0 -22 -6 -12 -8 -12 -9
-2 -4 19 6 36 -13 21 -23 -11 -7 -25 -44 -29 -79 -1 -13 -8 -30 -15 -38 -10
--13 -10 -17 2 -25 8 -5 9 -9 3 -9 -7 0 -11 -14 -10 -35 1 -19 -1 -35 -5 -35
--3 0 -4 -16 -2 -36 3 -27 1 -34 -9 -28 -10 6 -11 5 -1 -7 7 -9 11 -32 10 -52
--2 -21 1 -37 7 -37 6 0 5 -4 -3 -9 -10 -6 -10 -10 -1 -16 7 -4 9 -17 6 -31 -4
--13 -2 -24 3 -24 5 0 8 -8 6 -17 -1 -10 2 -26 7 -35 5 -12 5 -18 -2 -18 -5 0
-0 -10 12 -22 14 -14 17 -23 10 -26 -8 -2 -7 -10 3 -26 8 -12 12 -26 8 -29 -3
--4 -1 -7 6 -7 7 0 10 -4 6 -9 -3 -5 -1 -12 5 -16 5 -3 10 -15 10 -26 0 -11 5
--17 10 -14 6 3 10 -3 10 -13 0 -11 7 -25 15 -32 9 -7 13 -15 11 -17 -5 -5 -1
--12 39 -57 13 -16 22 -32 20 -36 -3 -4 2 -11 11 -14 8 -3 12 -11 9 -16 -4 -6
--1 -9 7 -8 7 2 12 -4 10 -12 -2 -8 -1 -12 3 -8 4 4 14 0 23 -8 13 -14 13 -17
-1 -25 -9 -5 -10 -9 -2 -9 6 0 15 5 19 11 4 8 11 3 20 -12 7 -13 15 -22 17 -19
-3 3 19 -10 36 -27 17 -18 31 -30 31 -28 0 3 10 -3 22 -14 11 -11 24 -18 28
--16 3 2 12 -4 20 -15 7 -10 19 -16 27 -13 7 3 13 0 13 -7 0 -6 4 -9 9 -6 5 4
-11 1 13 -4 2 -6 13 -12 25 -13 12 0 20 -4 18 -8 -3 -3 7 -11 22 -18 25 -11 25
--11 12 6 -13 17 -13 17 7 1 11 -10 30 -18 42 -18 11 0 24 -5 27 -10 3 -6 22
--10 41 -10 19 0 33 -4 30 -9 -3 -5 9 -8 27 -7 23 1 31 -3 29 -14 -2 -12 1 -11
-11 2 8 10 16 15 19 13 3 -3 22 -6 42 -7 20 -1 36 -6 36 -12 0 -6 4 -4 10 4 5
-8 12 11 16 8 4 -4 15 -3 25 2 11 7 20 7 24 0 3 -5 16 -6 28 -2 12 4 31 7 42 7
-11 -1 26 3 33 8 11 9 17 -2 13 -26 -1 -5 3 -6 8 -2 6 3 8 12 4 20 -3 10 1 15
-14 15 11 0 23 3 27 7 11 12 36 12 36 0 0 -6 6 -2 14 8 8 11 19 16 30 12 9 -4
-15 -3 12 2 -7 11 22 23 35 15 5 -3 9 -1 9 3 0 5 24 20 54 33 30 13 52 28 49
-33 -3 6 -1 7 5 3 6 -3 14 -1 17 5 4 5 14 8 22 5 8 -3 12 -2 9 2 -3 5 7 17 22
-28 15 10 40 33 56 49 16 17 25 23 22 15 -4 -8 2 -4 14 10 11 14 33 36 48 49
-15 13 20 20 12 16 -8 -3 -6 2 6 12 12 10 26 29 33 41 6 12 19 22 27 22 8 0 12
-4 9 10 -7 11 25 70 38 70 4 0 5 5 2 10 -3 6 -2 10 4 10 6 0 7 8 4 17 -5 12 -2
-15 10 10 9 -3 19 -1 23 5 4 7 3 8 -4 4 -13 -8 -17 6 -5 18 7 6 11 24 15 59 1
-9 6 17 10 17 4 0 8 11 8 25 0 14 4 25 10 25 5 0 9 3 8 8 -5 21 15 112 25 112
-7 0 5 4 -3 10 -13 8 -12 11 5 25 11 9 15 14 8 11 -8 -5 -11 8 -10 43 0 32 5
-48 11 43 6 -3 5 2 -2 11 -8 9 -12 22 -9 29 2 7 0 23 -4 36 -6 14 -5 22 2 22 8
-0 8 4 0 14 -6 7 -9 21 -5 30 3 9 2 16 -3 16 -5 0 -10 10 -10 23 -2 30 -7 49
--17 66 -7 10 -5 12 5 6 10 -6 10 -3 -2 11 -8 10 -15 26 -14 34 0 8 -6 21 -13
-29 -11 12 -11 15 0 22 10 7 9 9 -4 9 -16 0 -22 13 -21 47 1 7 -3 10 -8 7 -5
--3 -9 1 -9 10 0 8 -4 16 -8 18 -4 2 -20 24 -35 50 -15 26 -33 53 -40 60 -8 7
--19 24 -26 36 -7 12 -16 20 -22 17 -9 -6 -14 9 -9 30 1 5 -1 7 -5 3 -4 -4 -22
-8 -41 25 -65 61 -84 78 -84 72 0 -3 -15 5 -33 19 -19 15 -39 26 -45 26 -7 0
--12 5 -12 11 0 5 -4 7 -10 4 -5 -3 -10 -1 -10 5 0 6 -3 9 -7 7 -5 -3 -14 1
--21 9 -10 10 -10 14 -1 14 7 0 9 3 6 6 -4 4 -13 1 -22 -6 -10 -8 -15 -9 -15
--1 0 6 -9 11 -20 11 -11 0 -20 4 -20 9 0 5 -7 12 -16 15 -10 4 -13 2 -8 -6 5
--8 2 -9 -12 -4 -10 5 -25 9 -31 9 -8 0 -9 4 -3 12 6 8 -1 10 -27 7 -28 -4 -34
--2 -27 9 7 12 5 12 -9 0 -9 -7 -17 -10 -17 -5 0 5 -12 10 -27 10 -112 6 -133
-8 -133 18 0 7 -3 7 -8 1 -10 -14 -74 -16 -89 -3 -10 8 -12 7 -8 -3z"/>
-</g>
-</svg>

src/components/Modals/AddModal.vue

@@ -195,8 +195,15 @@ export default {
     this.$store.commit('FETCH_SETTINGS')
     this.$store.commit('FETCH_CATEGORIES')
     this.urls = this.initialMagnet
+    this.setSettings()
   },
   methods: {
+    setSettings() {
+      const settings = this.getSettings()
+      this.start = !settings.start_paused_enabled
+      this.autoTMM = settings.auto_tmm_enabled
+      this.root_folder = settings.create_subfolder_enabled
+    },
     addDropFile(e) {
       this.files.push(...Array.from(e.dataTransfer.files))
     },

src/components/Modals/SettingsModal/Tabs/Downloads.vue

@@ -1,69 +1,81 @@
 <template>
   <v-container>
     <v-card flat>
-      <v-card-text :style="{ minHeight: phoneLayout ? '' : '70vh'}">
+      <perfect-scrollbar>
-        <h3>When adding a torrent</h3>
+        <v-card-text :style="{ minHeight: phoneLayout ? '' : '70vh', maxHeight: '70vh'}">
-        <div class="settings_content ml-5 mr-5">
+          <h3>When adding a torrent</h3>
+          <div class="settings_content ml-5 mr-5">
+            <v-checkbox
+              v-model="settings.create_subfolder_enabled"
+              dense
+              :label="`Create subfolder for torrents with multiple files`"
+            />
+            <v-checkbox
+              v-model="settings.start_paused_enabled"
+              dense
+              :label="`Do not start the download automatically`"
+            />
+          </div>
+
           <v-checkbox
-            v-model="settings.create_subfolder_enabled"
+            v-model="settings.preallocate_all"
             dense
-            :label="`Create subfolder for torrents with multiple files`"
+            :label="`Pre-allocate disk space for all files`"
           />
           <v-checkbox
-            v-model="settings.start_paused_enabled"
+            v-model="settings.incomplete_files_ext"
             dense
-            :label="`Do not start the download automatically`"
+            :label="` Append .!qB extension to incomplete files`"
           />
-        </div>
 
-        <v-checkbox
+          <h3>Saving Management</h3>
-          v-model="settings.preallocate_all"
+          <div class="settings_content ml-5 mr-5">
-          dense
+            <v-checkbox
-          :label="`Pre-allocate disk space for all files`"
+              v-model="settings.auto_tmm_enabled"
-        />
+              dense
-        <v-checkbox
+              label="Automatic Torrent Management "
-          v-model="settings.incomplete_files_ext"
+            />
-          dense
+            <v-checkbox
-          :label="` Append .!qB extension to incomplete files`"
+              v-model="settings.save_path_changed_tmm_enabled"
-        />
+              dense
-
+              label="Relocate Torrent when category changes"
-        <h3>Saving Management</h3>
+            />
-        <div class="settings_content ml-5 mr-5">
+            <v-row dense>
-          <v-row dense>
+              <v-col cols="5" class="d-flex align-center">
-            <v-col cols="5" class="d-flex align-center">
+                <h4>Default Save Path</h4>
-              <h4>Default Save Path</h4>
+              </v-col>
-            </v-col>
+              <v-col>
-            <v-col>
+                <v-text-field
-              <v-text-field
+                  v-model="settings.save_path"
-                v-model="settings.save_path"
+                  class="mb-2"
-                class="mb-2"
+                  outlined
-                outlined
+                  dense
-                dense
+                  hide-details
-                hide-details
+                />
-              />
+              </v-col>
-            </v-col>
+            </v-row>
-          </v-row>
+            <v-row dense>
-          <v-row dense>
+              <v-col cols="5">
-            <v-col cols="5">
+                <v-checkbox
-              <v-checkbox
+                  v-model="settings.temp_path_enabled"
-                v-model="settings.temp_path_enabled"
+                  dense
-                dense
+                  :label="`Keep incomplete torrents in:`"
-                :label="`Keep incomplete torrents in:`"
+                />
-              />
+              </v-col>
-            </v-col>
+              <v-col>
-            <v-col>
+                <v-text-field
-              <v-text-field
+                  v-model="settings.temp_path"
-                v-model="settings.temp_path"
+                  class="mb-2"
-                class="mb-2"
+                  outlined
-                outlined
+                  dense
-                dense
+                  hide-details
-                hide-details
+                  :disabled="!settings.temp_path_enabled"
-                :disabled="!settings.temp_path_enabled"
+                />
-              />
+              </v-col>
-            </v-col>
+            </v-row>
-          </v-row>
+          </div>
-        </div>
+        </v-card-text>
-      </v-card-text>
+      </perfect-scrollbar>
     </v-card>
   </v-container>
 </template>

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

@@ -66,7 +66,7 @@
                 color="green_accent"
               >
                 <template #label>
-                  Dense version of the dasbhoard
+                  Dense version of the dashboard
                 </template>
               </v-switch>
               <v-switch

src/components/Modals/TorrentDetailModal/Tabs/Content.vue

@@ -32,6 +32,36 @@
             <div v-else>
               <span>[{{ item.size }}]</span>
               <span class="ml-4">{{ item.progress }}%</span>
+              <span class="ml-4">[ {{ item.priority | priority }} ]</span>
+              <v-menu
+                open-on-hover
+                top
+              >
+                <template #activator="{ on }">
+                  <v-btn
+                    class="mb-2 ml-4"
+                    x-small
+                    fab
+                    v-on="on"
+                  >
+                    <v-icon>trending_up</v-icon>
+                  </v-btn>
+                </template>
+                <v-list dense rounded>
+                  <v-list-item
+                    v-for="prio in priority_options"
+                    :key="prio.value"
+                    link
+                    class="black--text"
+                    @click="setFilePrio(item.id, prio.value)"
+                  >
+                    <v-icon>{{ prio.icon }}</v-icon>
+                    <v-list-item-title class="ml-2 black--text" style="font-size: 12px">
+                      {{ prio.name }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
               <v-btn
                 v-if="!item.editing"
                 class="mb-2 ml-4"
@@ -71,8 +101,24 @@
 import qbit from '@/services/qbit'
 import { treeify } from '@/helpers'
 import { FullScreenModal } from '@/mixins'
+
+const FILE_PRIORITY_OPTIONS = [
+  { name: 'max', icon: 'upgrade', value: 7 },
+  { name: 'high', icon: 'arrow_drop_up', value: 6 },
+  { name: 'normal', icon: 'trending_flat', value: 1 },
+  { name: 'unwanted', icon: 'file_download_off', value: 0 }
+]
+
 export default {
   name: 'Content',
+  filters: {
+    priority(value) {
+      if (value === 4) return 'normal'
+      const res = FILE_PRIORITY_OPTIONS.find(el => el.value === value)
+      
+      return res ? res.name : 'undefined'
+    }
+  },
   mixins: [FullScreenModal],
   props: {
     hash: String,
@@ -82,7 +128,8 @@ export default {
     return {
       opened: null,
       selected: [],
-      treeData: null
+      treeData: null,
+      priority_options: FILE_PRIORITY_OPTIONS
     }
   },
   computed: {
@@ -105,20 +152,23 @@ export default {
     }
   },
   created() {
-    this.getTorrentFiles().then(() => {
+    this.initFiles()
-      this.opened = []
-        .concat(
-          ...this.treeData
-            .map(file => file.name.split('/'))
-            .filter(f => f.splice(-1, 1))
-        )
-        .filter((f, index, self) => index === self.indexOf(f))
-      this.selected = this.treeData
-        .filter(file => file.priority !== 0)
-        .map(file => file.name)
-    })
   },
   methods: {
+    initFiles() {
+      this.getTorrentFiles().then(() => {
+        this.opened = []
+          .concat(
+            ...this.treeData
+              .map(file => file.name.split('/'))
+              .filter(f => f.splice(-1, 1))
+          )
+          .filter((f, index, self) => index === self.indexOf(f))
+        this.selected = this.treeData
+          .filter(file => file.priority !== 0)
+          .map(file => file.name)
+      })
+    },
     async getTorrentFiles() {
       const { data } = await qbit.getTorrentFiles(this.hash)
       data.forEach((d, i) => {
@@ -162,7 +212,11 @@ export default {
       qbit.renameFile(this.hash, item.id, item.newName)
       item.name = item.newName
       this.togleEditing(item)
+    },
+    setFilePrio(fileId, priority) {
+      qbit.setTorrentFilePriority(this.hash, [fileId], priority)
+        .then(() => this.initFiles())
     }
   }
 }
-</script>
+</script>

src/components/Navbar/CurrentSpeed.vue

@@ -34,5 +34,3 @@ export default {
   props: ['status']
 }
 </script>
-
-<style scoped></style>

src/components/Navbar/Navbar.vue

@@ -7,19 +7,18 @@
         @click.stop="drawer = !drawer"
       />
       <v-toolbar-title
+        v-if="!$vuetify.breakpoint.xs"
         :class="[
           'grey--text',
           { 'subheading ml-0': $vuetify.breakpoint.smAndDown }
         ]"
       >
-        <div v-if="!$vuetify.breakpoint.xs">
+        <span class="font-weight-light">Vue</span>
-          <span class="font-weight-light">Vue</span>
+        <span>Torrent</span>
-          <span>Torrent</span>
-        </div>
       </v-toolbar-title>
       <v-spacer />
 
-      <TopActions :show-all="webuiSettings.showGlobalRemoveResumePause" />
+      <TopMenu :show-all="webuiSettings.showGlobalRemoveResumePause" />
     </v-app-bar>
     <!--navigation drawer itself -->
     <v-navigation-drawer
@@ -65,7 +64,7 @@
 import { mapGetters } from 'vuex'
 import {
   BottomActions,
-  TopActions,
+  TopMenu,
   SpeedGraph,
   FreeSpace,
   SessionStats,
@@ -78,7 +77,7 @@ export default {
   components: {
     FreeSpace,
     BottomActions,
-    TopActions,
+    TopMenu,
     SpeedGraph,
     SessionStats,
     CurrentSpeed,

src/components/Navbar/SessionStats.vue

@@ -53,4 +53,3 @@ export default {
 }
 </script>
 
-<style scoped></style>

src/components/Navbar/TopActions.vue

@@ -1,24 +1,20 @@
 <template>
-  <div class="flex-shrink-0 ml-0">
+  <div :class="mobile ? '' : 'flex-shrink-0 ml-0'">
     <v-btn
-      id="no-background-hover"
+      :text="!mobile"
-      class="pa-0"
+      small
-      :ripple="false"
+      fab
-      text
+      class="mr-0 ml-0"
-    >
+      @click="$store.state.selectMode = !$store.state.selectMode"
-      <v-checkbox
+    >
-        v-model="$store.state.selectMode"
+      <v-icon color="grey">
-        class="grey--text"
+        {{ $store.state.selectMode ? 'check_box' : 'check_box_outline_blank' }}
-        color="grey"
+      </v-icon>
-        hide-details
+    </v-btn>
-        style="width: 5px;"
+    <v-btn
-      />
+      :text="!mobile"
-    </v-btn>
-    <v-btn
-      text
       small
       fab
-      color="grey"
       class="mr-0 ml-0"
       @click="addModal('SortModal')"
     >
@@ -27,10 +23,10 @@
       </v-icon>
     </v-btn>
     <v-btn
-      text
+      :text="!mobile"
       small
       fab
-      color="grey"
+      color="grey--text"
       class="mr-0 ml-0"
       @click="addModal('SearchModal')"
     >
@@ -39,10 +35,10 @@
       </v-icon>
     </v-btn>
     <v-btn
-      text
+      :text="!mobile"
       small
       fab
-      color="grey"
+      color="grey--text"
       class="mr-0 ml-0"
       @click="addModal('AddModal')"
     >
@@ -54,7 +50,7 @@
       v-if="showAll"
       small
       fab
-      text
+      :text="!mobile"
       class="mr-0 ml-0"
       @click="removeTorrents"
     >
@@ -66,7 +62,7 @@
       v-if="showAll"
       small
       fab
-      text
+      :text="!mobile"
       class="mr-0 ml-0"
       @click="resumeTorrents"
     >
@@ -78,7 +74,7 @@
       v-if="showAll"
       small
       fab
-      text
+      :text="!mobile"
       class="mr-0 ml-0"
       @click="pauseTorrents"
     >
@@ -89,7 +85,7 @@
     <v-btn
       small
       fab
-      text
+      :text="!mobile"
       class="mr-0 ml-0"
       @click="addModal('SettingsModal')"
     >
@@ -101,14 +97,19 @@
 </template>
 
 <script>
-import qbit from '@/services/qbit'
-import { mapState } from 'vuex'
 import { General } from '@/mixins'
+import { mapState } from 'vuex'
+import qbit from '@/services/qbit'
 
 export default {
   name: 'TopActions',
   mixins: [General],
-  props: ['showAll'],
+  props: ['mobile', 'showAll'],
+  data() {
+    return {
+      fab: false
+    }
+  },
   computed: {
     ...mapState(['selected_torrents'])
   },
@@ -130,14 +131,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-#no-background-hover::before {
-  background-color: transparent !important;
-}
-#no-background-hover {
-  cursor: default !important;
-  min-width: 1px;
-  margin-right: 2em;
-}
-</style>

src/components/Navbar/TopMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <TopActions v-if="!$vuetify.breakpoint.xsOnly" :show-all="showAll" />
+  <v-speed-dial
+    v-else
+    v-model="fab"
+    transition="slide-y-transition"
+    direction="bottom"
+    style="position: absolute; top: 0.3em; right: 1em"
+  >
+    <template #activator>
+      <v-btn
+        v-model="fab"
+        color="grey"
+        text
+        small
+        fab
+      >
+        <v-icon v-if="fab">
+          mdi-close
+        </v-icon>
+        <v-icon v-else>
+          mdi-dots-vertical
+        </v-icon>
+      </v-btn>
+    </template>
+    <TopActions :show-all="showAll" :mobile="true" />
+  </v-speed-dial>
+</template>
+
+<script>
+import TopActions from './TopActions'
+
+export default {
+  name: 'TopMenu',
+  components: { TopActions },
+  props: ['showAll'],
+  data() {
+    return {
+      fab: false
+    }
+  }
+}
+</script>
+

src/components/Navbar/index.js

@@ -6,6 +6,7 @@ import FreeSpace from './FreeSpace.vue'
 import SessionStats from './SessionStats.vue'
 import CurrentSpeed from './CurrentSpeed.vue'
 import FilterSelect from './FilterSelect.vue'
+import TopMenu from './TopMenu.vue'
 
 export {
   Navbar,
@@ -15,5 +16,6 @@ export {
   FreeSpace,
   SessionStats,
   CurrentSpeed,
-  FilterSelect
+  FilterSelect,
+  TopMenu
 }

src/helpers.js

@@ -90,6 +90,7 @@ function createFile(data, name, children) {
     progress: Math.round(data.progress * 100),
     size: formatBytes(data.size),
     icon: getIconForFileType(name.split('.').pop()),
+    priority: data.priority,
     children: children
   }
 }

src/styles/variables.scss

@@ -1,11 +1,11 @@
-$torrent-done:  #3cd1c2;
+$torrent-done: #3cd1c2;
 $torrent-downloading: #ffaa2c;
 $torrent-fail: #f83e70;
 $torrent-paused: #cfd8dc;
 $torrent-queued: #2e5eaa;
-$torrent-seeding: #26a69a;
+$torrent-seeding: #0D9488;
 $torrent-checking: #ff7043;
-$torrent-stalled: #81c784;
+$torrent-stalled: #4ADE80;
 $torrent-metadata: #7e57c2;
 $torrent-moving: #ffaa2c;
 

src/views/Dashboard.vue

@@ -4,15 +4,21 @@
     color="background"
     @click.self="resetSelected"
   >
-    <h1 style="font-size: 1.1em !important" class="subtitle-1 grey--text">
+    <v-row no-gutters class=" grey--text">
-      Dashboard
+      <v-col>
-      <p
+        <h1 style="font-size: 1.3em !important" class="subtitle-1 ml-2">
-        style="float: right; font-size: 0.7em"
+          Dashboard
-        class="grey--text text-uppercase"
+        </h1>
-      >
+      </v-col>
-        {{ torrentCountString }}
+      <v-col>
-      </p>
+        <p
-    </h1>
+          style="float: right; font-size: 0.8em"
+          class="mr-2 text-uppercase"
+        >
+          {{ torrentCountString }}
+        </p>
+      </v-col>
+    </v-row>
 
     <div
       color="background"