Tweak UI

src/App.vue

@@ -9,7 +9,7 @@
     </v-navigation-drawer>
     <v-toolbar
       :clipped-left="$vuetify.breakpoint.lgAndUp"
-      :scroll-toolbar-off-screen="!$vuetify.breakpoint.lgAndUp"
+      :scroll-off-screen="!$vuetify.breakpoint.lgAndUp"
       app
     >
       <v-toolbar-title class="headline">

src/components/Drawer.vue

@@ -76,6 +76,7 @@ import FilterGroup from './drawer/FilterGroup.vue';
 import { api } from '../Api';
 import { mapState, mapMutations, mapGetters } from 'vuex';
 import { formatSize } from '../filters';
+import { SiteNameMap } from '../consts';
 
 export default {
   components: {
@@ -138,10 +139,12 @@ export default {
       }
       const filterGroups = [];
       const categories: any[] = _.sortBy(Object.entries(this.torrentGroupByCategory).map(([key, value]) => {
+        const size = formatSize(_.sumBy(value, 'size'));
         const title = key ? key : 'Uncategorized';
-        const append =  `(${value.length})`;
+        const append =  `(${value.length})[${size}]`;
         return { icon: 'mdi-folder-open', title, key, append};
-      }), (o) => o.key);
+      }), 'key');
+      const totalSize = formatSize(_.sumBy(this.allTorrents, 'size'));
       filterGroups.push({
         'icon': 'mdi-menu-up',
         'icon-alt': 'mdi-menu-down',
@@ -149,21 +152,17 @@ export default {
         'model': false,
         'select': 'category',
         'children': [
-          { icon: 'mdi-folder-open', title: 'All', key: null, append: `(${this.allTorrents.length})` },
+          { icon: 'mdi-folder-open', title: 'All', key: null, append: `(${this.allTorrents.length})[${totalSize}]` },
           ...categories,
         ],
       });
 
-      const sites: any[] = _.sortBy(Object.entries(this.torrentGroupBySite).filter(([key, value]) => {
-        return key;
-      }).map(([key, value]) => {
-        const size = formatSize(value.reduce((acc, v) => {
-          return acc + v.size;
-        }, 0));
-        const title = key;
+      const sites: any[] = _.sortBy(Object.entries(this.torrentGroupBySite).map(([key, value]) => {
+        const size = formatSize(_.sumBy(value, 'size'));
+        const title = key ? _.get(SiteNameMap, key, key) : 'Others';
         const append =  `(${value.length})[${size}]`;
         return { icon: 'mdi-server', title, key, append };
-      }), (o) => o.title);
+      }), 'title');
       filterGroups.push({
         'icon': 'mdi-menu-up',
         'icon-alt': 'mdi-menu-down',
@@ -201,4 +200,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.v-list__tile__action {
+  padding-left: 6px;
+}
 </style>

src/components/Footer.vue

@@ -9,12 +9,16 @@
       <v-flex>
         API version: {{ app.apiVersion }}
       </v-flex>
+      <v-divider vertical class="mx-2"/>
+      <v-flex>
+        Disk free: {{ info.free_space_on_disk | formatSize }}
+      </v-flex>
     </v-layout>
   </v-flex>
   <v-flex shrink v-if="info">
     <v-layout align-center>
       <v-flex>
-        Disk free: {{ info.free_space_on_disk | formatSize }}
+        Torrents size: {{ allTorrents.length }} ({{ totalSize | formatSize }})
       </v-flex>
       <v-divider vertical class="mx-2"/>
       <v-flex>
@@ -24,7 +28,7 @@
       <v-tooltip top>
         <template v-slot:activator="{ on }">
           <v-flex class="icon_label" v-on="on">
-            <v-icon>mdi-{{ info.connection_status | connectionIcon }}</v-icon>
+            <v-icon :color="info.connection_status | connectionIconColor">mdi-{{ info.connection_status | connectionIcon }}</v-icon>
           </v-flex>
         </template>
         <span>
@@ -33,7 +37,7 @@
       </v-tooltip>
       <v-divider vertical class="mx-2"/>
       <v-flex class="icon_label">
-        <v-icon>mdi-download</v-icon>
+        <v-icon color="success">mdi-download</v-icon>
         <span>
           {{ info.dl_info_speed | formatSize }}/s
           ({{ info.dl_info_data | formatSize }}/{{ info.alltime_dl | formatSize }})
@@ -41,7 +45,7 @@
       </v-flex>
       <v-divider vertical class="mx-2"/>
       <v-flex class="icon_label">
-        <v-icon>mdi-upload</v-icon>
+        <v-icon color="warning">mdi-upload</v-icon>
         <span>
           {{ info.up_info_speed | formatSize }}/s
           ({{ info.up_info_data | formatSize }}/{{ info.alltime_ul | formatSize }})
@@ -73,15 +77,29 @@ export default Vue.extend({
       };
       return statusMap[status];
     },
+    connectionIconColor(status: string) {
+      const statusMap: any = {
+        connected: 'success',
+        firewalled: 'info',
+        disconnected: 'warning',
+      };
+      return statusMap[status];
+    },
   },
 
   computed: {
     ...mapState({
-    info: (state: any) => state.mainData ? state.mainData.server_state : null,
+      info(state: any) {
+        return this.isDataReady ? state.mainData.server_state : null;
+      },
     }),
     ...mapGetters([
       'isDataReady',
+      'allTorrents'
     ]),
+    totalSize() {
+      return _.sumBy(this.allTorrents, 'size');
+    },
   },
 
   methods: {

src/components/LogsDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog :value="value" @input="$emit('input', $event)" scrollable width="50%">
+  <v-dialog :value="value" @input="$emit('input', $event)" scrollable :width="dialogWidth">
     <v-card>
       <v-card-title
         class="headline grey lighten-4"
@@ -59,6 +59,11 @@ export default Vue.extend({
       return map[type];
     },
   },
+  computed: {
+    dialogWidth() {
+      return this.$vuetify.breakpoint.smAndDown ? '100%' : '70%';
+    },
+  },
   methods: {
     closeDialog() {
       this.$emit('input', false);

src/components/Torrents.vue

@@ -16,6 +16,7 @@
         <v-icon>mdi-pause</v-icon>
       </v-btn>
     </v-toolbar>
+    <v-divider />
     <v-data-table
       :headers="headers"
       :items="torrents"

src/components/dialogs/ConfirmDeleteDialog.vue

@@ -76,3 +76,9 @@ export default Vue.extend({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.torrents {
+  overflow: auto;
+}
+</style>

src/components/drawer/FilterGroup.vue

@@ -59,3 +59,12 @@ export default Vue.extend({
   },
 })
 </script>
+
+<style lang="scss" scoped>
+::v-deep .v-list__group__header__prepend-icon {
+  margin-left: 4px;
+}
+.v-list__tile__action {
+  padding-left: 6px;
+}
+</style>

src/consts.ts

@@ -0,0 +1,4 @@
+export const SiteNameMap = {
+  'tp.m-team.cc': 'M-Team',
+  'pt.keepfrds.com': 'FRDS',
+};