free disk space toggle

src/components/Modals/SettingsModal.vue

@@ -13,17 +13,42 @@
                         <v-btn
                             text
                             @click="switchOldUI"
-                            class="blue_accent white--text mx-0 mt-3"
+                            class="green_accent white--text mx-0 mt-3"
                             >switch to old ui</v-btn
                         >
                     </v-card-actions>
                 </v-form>
+                <v-form class="px-6 mt-3">
+                    <v-container>
+                        <v-switch
+                            class="v-input--reverse v-input--expand"
+                            inset
+                            v-model="freeSpace"
+                            color="green_accent"
+                        >
+                            <template #label>
+                                <span class="grey--text">
+                                    Show Free Space
+                                </span>
+                            </template>
+                        </v-switch>
+                    </v-container>
+                </v-form>
             </v-container>
+            <v-card-actions class="justify-center pb-5 project done">
+                <v-btn
+                    text
+                    @click="save"
+                    class="green_accent white--text mx-0 mt-3"
+                    >Save</v-btn
+                >
+            </v-card-actions>
         </v-card>
     </v-dialog>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import Modal from '@/mixins/Modal'
 import qbit from '@/services/qbit'
 export default {
@@ -34,7 +59,41 @@ export default {
             await qbit.switchToOldUi()
 
             window.location.reload(true)
+        },
+        save() {
+            this.$store.commit('TOGGLE_MODAL', 'settingsmodal')
+        }
+    },
+    computed: {
+        ...mapState(['webuiSettings']),
+        freeSpace: {
+            get() {
+                return this.webuiSettings.showFreeSpace
+            },
+            set(val) {
+                this.webuiSettings.showFreeSpace = val
+            }
         }
     }
 }
 </script>
+
+<style lang="scss" scoped>
+// Reversed input variant
+::v-deep .v-input--reverse .v-input__slot {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    .v-application--is-ltr & {
+        .v-input--selection-controls__input {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+    .v-application--is-rtl & {
+        .v-input--selection-controls__input {
+            margin-left: 0;
+            margin-right: 8px;
+        }
+    }
+}
+</style>

src/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
     <nav>
         <!--title-->
-        <v-app-bar flat color="background">
+        <v-toolbar flat color="background">
             <v-btn
                 @click="drawer = !drawer"
                 text
@@ -16,8 +16,10 @@
                     { 'subheading ml-0': $vuetify.breakpoint.smAndDown }
                 ]"
             >
-                <span class="font-weight-light">Vue</span>
-                <span>Torrent</span>
+                <div v-if="!$vuetify.breakpoint.xs">
+                    <span class="font-weight-light">Vue</span>
+                    <span>Torrent</span>
+                </div>
             </v-toolbar-title>
             <v-spacer></v-spacer>
 
@@ -50,7 +52,7 @@
             >
                 <v-icon color="grey">settings</v-icon>
             </v-btn>
-        </v-app-bar>
+        </v-toolbar>
         <!--navigation drawer itself -->
         <v-navigation-drawer
             app
@@ -178,6 +180,7 @@
                 </v-card>
 
                 <v-card
+                    v-if="webuiSettings.showFreeSpace"
                     flat
                     style="margin-top: 30px;"
                     color="secondary"
@@ -352,7 +355,7 @@ export default {
     },
     computed: {
         ...mapState(['status', 'selected_torrents']),
-        ...mapGetters(['getTheme', 'getStatus']),
+        ...mapGetters(['getTheme', 'getStatus', 'getWebuiSettings']),
         theme() {
             return this.getTheme() ? 'Dark' : 'Light'
         },
@@ -372,6 +375,9 @@ export default {
                     data: this.$store.state.download_data
                 }
             ]
+        },
+        webuiSettings() {
+            return this.getWebuiSettings()
         }
     },
     created() {

src/components/TorrentDetailModal/Content.vue

@@ -8,7 +8,6 @@
                     activatable
                     item-key="name"
                     open-on-click
-                    
                 >
                     <template v-slot:prepend="{ item, open }">
                         <v-icon v-if="!item.icon">

src/plugins/vuetify.js

@@ -7,9 +7,6 @@ import colors from 'vuetify/lib/util/colors'
 Vue.use(Vuetify)
 
 export default new Vuetify({
-    icons: {
-        iconfont: 'fa'
-    },
     theme: {
         options: {
             customProperties: true

src/store/index.js

@@ -16,7 +16,6 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     plugins: [vuexPersist.plugin],
     state: {
-        darkTheme: false,
         intervals: [],
         status: null,
         upload_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -24,11 +23,14 @@ export default new Vuex.Store({
         torrents: [],
         selected_torrents: [],
         authenticated: false,
-        loading: false,
-        sort_options: { sort: 'name', reverse: false, hashes: [], filter: null },
+        sort_options: {
+            sort: 'name',
+            reverse: false,
+            hashes: [],
+            filter: null
+        },
         rid: 0,
         mainData: undefined,
-        preferences: null,
         pasteUrl: null,
         modals: {
             addmodal: false,
@@ -37,17 +39,22 @@ export default new Vuex.Store({
             torrentdetailmodal: false
         },
         settings: {},
+        webuiSettings: {
+            darkTheme: false,
+            showFreeSpace: true
+        },
         selectedDetailTorrent: null
     },
     getters: {
         containsTorrent: state => hash =>
             state.selected_torrents.includes(hash),
-        getTheme: state => () => state.darkTheme,
+        getTheme: state => () => state.webuiSettings.darkTheme,
         getModalState: state => name => state.modals[name.toLowerCase()],
         getSettings: state => () => state.settings,
         getStatus: state => () => state.status,
         getTorrent: state => hash =>
-            state.torrents.filter(el => el.hash === hash)[0]
+            state.torrents.filter(el => el.hash === hash)[0],
+        getWebuiSettings: state => () => state.webuiSettings
     },
 
     mutations: {
@@ -72,7 +79,7 @@ export default new Vuex.Store({
             state.selected_torrents = []
         },
         TOGGLE_THEME(state) {
-            state.darkTheme = !state.darkTheme
+            state.webuiSettings.darkTheme = !state.webuiSettings.darkTheme
         },
         LOGOUT: state => {
             qbit.logout()