Refine UI code

src/components/Drawer.vue

@@ -50,7 +50,7 @@
           </v-list-tile-content>
         </v-list-tile>
       </v-list-group>
-      <template v-if="item.filterGroups">
+      <template v-else-if="item.filterGroups">
         <filter-group
           v-for="(child, i) in item.filterGroups"
           :key="i"
@@ -153,6 +153,7 @@ export default {
     ...mapGetters([
       'isDataReady',
       'allTorrents',
+      'allCategories',
       'torrentGroupByCategory',
       'torrentGroupBySite',
       'torrentGroupByState',
@@ -187,21 +188,26 @@ export default {
         ],
       });
 
-      const categories: any[] = _.sortBy(Object.entries(this.torrentGroupByCategory).map(([key, value]) => {
+      const categories: any[] = [{
+        key: '',
+        name: 'Uncategorized',
+      }].concat(this.allCategories).map(category => {
+        let value = this.torrentGroupByCategory[category.key]
+        if (_.isUndefined(value)) {
+          value = [];
+        }
         const size = formatSize(_.sumBy(value, 'size'));
-        const title = (key ? key : 'Uncategorized') + ` (${value.length})`;
+        const title = category.name + ` (${value.length})`;
         const append =  `[${size}]`;
-        return { icon: 'mdi-folder-open', title, key, append};
-      }), 'key');
+        return { icon: 'mdi-folder-open', title, key: category.key, append};
+      });
       filterGroups.push({
         'icon': 'mdi-menu-up',
         'icon-alt': 'mdi-menu-down',
         'title': 'Categories',
-        'model': false,
+        'model': true,
         'select': 'category',
-        'children': [
-          ...categories,
-        ],
+        'children': categories,
       });
 
       const sites: any[] = _.sortBy(Object.entries(this.torrentGroupBySite).map(([key, value]) => {

src/components/Footer.vue

@@ -8,7 +8,7 @@
       :align-center="!phoneLayout"
     >
       <v-flex v-if="!phoneLayout">
-        <v-tooltip top>
+        <v-tooltip top lazy>
           <template v-slot:activator="{ on }">
             <span v-on="on">
               qBittorrent {{ app.version }}
@@ -21,12 +21,13 @@
       </v-flex>
       <v-divider vertical class="mx-2" v-if="!phoneLayout"/>
       <v-flex class="icon-label">
-        <v-icon color="info">mdi-nas</v-icon>
-        Free: {{ info.free_space_on_disk | formatSize }}
+        <v-icon>mdi-sprout</v-icon>
+        {{ allTorrents.length }} [{{ totalSize | formatSize }}]
       </v-flex>
       <v-divider vertical class="mx-2" v-if="!phoneLayout"/>
-      <v-flex v-if="!phoneLayout">
-        Torrents: {{ allTorrents.length }} ({{ totalSize | formatSize }})
+      <v-flex class="icon-label">
+        <v-icon>mdi-nas</v-icon>
+        {{ info.free_space_on_disk | formatSize }}
       </v-flex>
     </v-layout>
   </v-flex>
@@ -35,12 +36,13 @@
       :column="phoneLayout"
       :align-center="!phoneLayout"
     >
-      <v-flex v-if="!phoneLayout">
-        DHT: {{ info.dht_nodes }} nodes
+      <v-flex v-if="!phoneLayout" class="icon-label">
+        <v-icon>mdi-access-point-network</v-icon>
+        {{ info.dht_nodes }} nodes
       </v-flex>
       <v-divider vertical class="mx-2" v-if="!phoneLayout"/>
       <v-flex class="icon-label">
-        <v-tooltip top>
+        <v-tooltip top lazy>
           <template v-slot:activator="{ on }">
             <v-icon
               v-on="on"
@@ -71,7 +73,7 @@
             >mdi-speedometer</v-icon>
           </template>
         </v-switch>
-        <v-tooltip top v-else>
+        <v-tooltip top lazy v-else>
           <template v-slot:activator="{ on }">
             <v-icon
               v-on="on"
@@ -86,7 +88,9 @@
       </v-flex>
       <v-divider vertical class="mx-2" v-if="!phoneLayout"/>
       <v-flex class="icon-label">
-        <v-icon color="success">mdi-download</v-icon>
+        <v-icon
+          :color=" info.dl_info_speed > 0 ? 'success' : null"
+        >mdi-download</v-icon>
         <span>
           {{ info.dl_info_speed | formatSize }}/s
           <template v-if="info.dl_rate_limit">
@@ -99,7 +103,9 @@
       </v-flex>
       <v-divider vertical class="mx-2" v-if="!phoneLayout"/>
       <v-flex class="icon-label">
-        <v-icon color="warning">mdi-upload</v-icon>
+        <v-icon
+          :color=" info.up_info_speed > 0 ? 'warning' : null"
+        >mdi-upload</v-icon>
         <span>
           {{ info.up_info_speed | formatSize }}/s
           <template v-if="info.up_rate_limit">
@@ -266,7 +272,7 @@ export default Vue.extend({
   transform: scaleX(-1);
 }
 .in-drawer {
-  padding: 0 16px;
+  padding: 0 16px 0 20px;
 
   .no-icon {
     margin-left: 24px;

src/components/Torrents.vue

@@ -35,25 +35,29 @@
             Set category
           </v-subheader>
           <v-list-tile
-            v-for="(item, i) in categories"
+            v-for="(item, i) in allCategories"
             :key="i"
-            @click="setTorrentsCategory(item)"
+            @click="setTorrentsCategory(item.key)"
             >
             <v-list-tile-action>
               <v-icon>mdi-folder-open</v-icon>
             </v-list-tile-action>
-            <v-list-tile-title>
-              {{ item }}
-            </v-list-tile-title>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ item.name }}
+              </v-list-tile-title>
+            </v-list-tile-content>
           </v-list-tile>
           <v-divider />
           <v-list-tile @click="setTorrentsCategory('')">
             <v-list-tile-action>
               <v-icon>mdi-folder-remove</v-icon>
             </v-list-tile-action>
-            <v-list-tile-title>
-              Reset
-            </v-list-tile-title>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                Reset
+              </v-list-tile-title>
+            </v-list-tile-content>
           </v-list-tile>
         </v-list>
       </v-menu>
@@ -152,6 +156,7 @@ export default Vue.extend({
     ...mapGetters([
       'isDataReady',
       'allTorrents',
+      'allCategories',
       'torrentGroupByCategory',
       'torrentGroupBySite',
       'torrentGroupByState',
@@ -160,9 +165,6 @@ export default Vue.extend({
       filter(state, getters) {
         return getters.config.filter;
       },
-      categories(state, getters) {
-        return Object.keys(getters.torrentGroupByCategory).filter(_.identity);
-      },
     }),
     hasSelected() {
       return this.selectedRows.length;