Filter torrents (#146)

* bunch of styling changes - move global transfer info as left-nav - more shadows and curvy box layout * fix more styling issues with the layout * give modals some curve * fix issue with settings modals css interfering with the side panel * able to filter by different status * fix background color issue on mobile, lighter chip colors * more styling consistency, slightly more compact * overhauled fs explorer - more responsive and compact - prevent various overflow issues * update login page to follow similar style * bump app ver 1.16.0 * cleanup, remove console logs
bill-ahmed · Nov 17, 2021 · 35e5354 · 35e5354
1 parent 1f1a7a8
commit 35e5354
Show file tree

Hide file tree

Showing 26 changed files with 581 additions and 315 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "ng": "ng",
     "start": "ng serve",
     "dev": "ng build --watch --output-path=\"dev/www/private\"",
+    "dev-login": "ng build --watch --project=login --output-path=\"dev/www/public\"",
     "build": "ng build",
     "build_prod": "ng build --prod",
     "test": "ng test",

diff --git a/projects/login/src/app/login-page/login-page.component.html b/projects/login/src/app/login-page/login-page.component.html
@@ -5,10 +5,10 @@
     <mat-slide-toggle (click)="false" (change)="false" [checked]="isDarkThemeEnabled()" color="primary"></mat-slide-toggle>
   </div>
 
-  <mat-card class="mat-elevation-z3">
+  <mat-card>
     <mat-card-content>
       <div class="card-header">
-        <h1 [ngClass]="{'dark-theme': isDarkTheme | async}">qBittorrent Web UI</h1>
+        <h1 [ngClass]="{'dark-theme': isDarkTheme | async}">qBittorrent</h1>
         <mat-card-subtitle>Sign in below to continue.</mat-card-subtitle>
       </div>
 

diff --git a/projects/login/src/app/login-page/login-page.component.scss b/projects/login/src/app/login-page/login-page.component.scss
@@ -37,9 +37,12 @@
 
     width: 60%;
 
-    /*Animations short-hand: {duration} {timing-function} {dekay} {itetarion-count} {nameOfAnimation}*/
+    /*Animations short-hand: {duration} {timing-function} {delay} {itetarion-count} {nameOfAnimation}*/
     animation: 0.4s ease-out 0s 1 slideInAndFadeFromBottom;
 
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    border-radius: 7px;
+
     mat-card-content {
       height: 100%;
 
@@ -78,10 +81,16 @@
   }
 }
 
+.dark-theme {
+  mat-card {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
+  }
+}
+
 /*Rise up tranistion*/
 @keyframes slideInAndFadeFromBottom{
   0% {
-    transform: translateY(20%);
+    transform: translateY(10%);
     opacity: 0;
   }
 

diff --git a/src/app/app.config.json b/src/app/app.config.json
@@ -1,3 +1,3 @@
 {
-  "version": "1.15.1"
+  "version": "1.16.0"
 }
diff --git a/src/app/file-system-tree-explorer/file-system-tree-explorer.component.ts b/src/app/file-system-tree-explorer/file-system-tree-explorer.component.ts
@@ -45,8 +45,6 @@ export class FileSystemTreeExplorerComponent implements OnChanges {
 
   ngOnInit(): void {
     this._updateData();
-
-    console.log('allow set priority?', this.allowSetPriority)
   }
 
   ngOnChanges(changes: SimpleChanges) {

diff --git a/src/app/global-transfer-info/global-transfer-info.component.html b/src/app/global-transfer-info/global-transfer-info.component.html
@@ -1,33 +1,49 @@
 <div [ngClass]="{'dark-theme': isDarkTheme | async}" class="global-transfer-info-container mat-app-background">
     <mat-card class="mat-elevation-z0 data-container">
+      <section *ngIf="!isMobileUser" id="qbittorrent_name" class="row justify-center text-center">
+        <h1 style="font-weight: 500; width: 100%; margin: auto;"> qBittorrent </h1>
+      </section>
+
+      <mat-divider [inset]="true"></mat-divider>
+
+      <section  id="toggle_alt_limit">
+        <div (click)="toggleAltSpeedLimits()" class="row align-center space-between" style="cursor: pointer">
+          <div class="row align-center">
+            <mat-icon>speed</mat-icon>
+            <h4>Toggle alt limit</h4>
+          </div>
+
+          <mat-slide-toggle id="useAltLimits" style="pointer-events: none;" [checked]="isAltSpeedEnabled" color="primary">
+          </mat-slide-toggle>
+        </div>
+      </section>
+
       <section id="disk_summary">
         <mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner>
 
         <div *ngIf="!isLoading()" id="summaryContent">
           <mat-chip-list>
-            <mat-chip color="default" disableRipple selected>
+            <mat-chip color="default" disableRipple>
               <mat-icon color="primary">refresh</mat-icon>
               <h4>Refresh Interval: {{refreshInterval / 1000}}s</h4>
             </mat-chip>
 
-            <mat-chip color="default" disableRipple selected>
+            <mat-chip color="default" disableRipple>
               <mat-icon color="primary">storage</mat-icon>
               <h4>Free space: {{getFreeSpaceOnDisk()}}</h4>
             </mat-chip>
           </mat-chip-list>
         </div>
       </section>
 
-      <br class="hide-small"/>
-      <mat-divider class="hide-small" [inset]="true"></mat-divider>
-      <br/>
+      <mat-divider class="spaced"  [inset]="true"></mat-divider>
 
       <section id="global_transfer">
         <mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner>
         <div *ngIf="!isLoading()" id="summaryContent">
           <mat-chip-list>
-            <mat-chip color="primary" (click)="handleDownloadLimitSelect()" disableRipple selected matTooltip="Click to set download limit" matTooltipPosition="above">
-              <mat-icon>arrow_downward</mat-icon>
+            <mat-chip style="cursor: pointer;" (click)="handleDownloadLimitSelect()" disableRipple matTooltip="Click to set download limit" matTooltipPosition="above">
+              <mat-icon color="primary">arrow_downward</mat-icon>
               <h4>{{getDownloadSpeedString()}} {{getDownLimitString()}}</h4>
             </mat-chip>
 
@@ -37,8 +53,8 @@ <h4>Downloaded: {{getDownloadedString()}}</h4>
             </mat-chip>
 
             <br/>
-            <mat-chip color="accent" (click)="handleUploadLimitSelect()" disableRipple selected matTooltip="Click to set upload limit" matTooltipPosition="below">
-              <mat-icon>arrow_upward</mat-icon>
+            <mat-chip style="cursor: pointer;" (click)="handleUploadLimitSelect()" disableRipple matTooltip="Click to set upload limit" matTooltipPosition="below">
+              <mat-icon color="accent">arrow_upward</mat-icon>
               <h4>{{getUploadSpeedString()}} {{getUpLimitString()}}</h4>
             </mat-chip>
 
@@ -50,18 +66,65 @@ <h4>Uploaded: {{getUploadedString()}}</h4>
         </div>
       </section>
 
-      <div class="hide-small">
-        <br/>
-        <mat-divider [inset]="true"></mat-divider>
-        <br/>
-      </div>
+      <mat-divider class="spaced" [inset]="true"></mat-divider>
 
-      <section class="hide-small" id="bottom_actions">
-        <div class="row">
-          <mat-slide-toggle labelPosition="before" id="useAltLimits" (toggleChange)="toggleAltSpeedLimits()" [checked]="isAltSpeedEnabled" color="primary" matTooltip="Use alt speed limits" matTooltipPosition="above">
-            <mat-icon style="margin-top: 8px;">speed</mat-icon>
-          </mat-slide-toggle>
-        </div>
+      <section id="filter_torrents">
+        <h3>
+          Filter Status
+        </h3>
+
+        <mat-chip-list chipListSelectable="true" focused="true" [selectable]="true">
+
+          <mat-chip (click)="handleFilterStatusSelect('All')" [selected]="isSelected('All')">
+            <h4>All</h4>
+          </mat-chip>
+
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Downloading')" [selected]="isSelected('Downloading')">
+            <mat-icon style="color: gray">arrow_downward</mat-icon>
+            <h4>Downloading</h4>
+          </mat-chip>
+
+          <mat-chip (click)="handleFilterStatusSelect('Seeding')" [selected]="isSelected('Seeding')">
+            <mat-icon style="color: gray">arrow_upward</mat-icon>
+            <h4>Seeding</h4>
+          </mat-chip>
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Completed')" [selected]="isSelected('Completed')">
+            <mat-icon style="color: #7ABF7D">done</mat-icon>
+            <h4>Completed</h4>
+          </mat-chip>
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Resumed')" [selected]="isSelected('Resumed')">
+            <mat-icon style="color: gray">play_arrow</mat-icon>
+            <h4>Resumed</h4>
+          </mat-chip>
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Paused')" [selected]="isSelected('Paused')">
+            <mat-icon style="color: gray">pause</mat-icon>
+            <h4>Paused</h4>
+          </mat-chip>
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Active')" [selected]="isSelected('Active')">
+            <mat-icon color="primary">toggle_on</mat-icon>
+            <h4>Active</h4>
+          </mat-chip>
+
+          <mat-chip color="default" (click)="handleFilterStatusSelect('Inactive')" [selected]="isSelected('Inactive')">
+            <mat-icon color="accent">toggle_off</mat-icon>
+            <h4>Inactive</h4>
+          </mat-chip>
+
+          <mat-chip color="primary" (click)="handleFilterStatusSelect('Stalled')" [selected]="isSelected('Stalled')">
+            <mat-icon>refresh</mat-icon>
+            <h4>Stalled</h4>
+          </mat-chip>
+
+          <mat-chip color="warn" (click)="handleFilterStatusSelect('Errored')" [selected]="isSelected('Errored')">
+            <mat-icon>error</mat-icon>
+            <h4>Errored</h4>
+          </mat-chip>
+        </mat-chip-list>
       </section>
     </mat-card>
 </div>
diff --git a/src/app/global-transfer-info/global-transfer-info.component.scss b/src/app/global-transfer-info/global-transfer-info.component.scss
@@ -1,37 +1,60 @@
 .global-transfer-info-container {
-  height: 100%;
+  height: 100vh;
+  width: 220px;
 
   .data-container {
-    height: 100%;
+    height: 100vh;
+    overflow-y: auto;
 
     display: flex;
     flex-direction: column;
 
-    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
 
-    section h2 {
-      font-weight: 400;
+    padding: 0;
+
+    mat-divider.spaced {
+      margin: 5px 0;
     }
 
-    #disk_summary, #global_transfer {
-      display: flex;
-      flex-direction: column;
+    #qbittorrent_name {
+      background: #1976D2;
+      color: white;
 
-      width: 100%;
+      height: 64px;
+      margin-bottom: 0;
     }
 
-    #global_transfer {
-      flex-grow: 1;
+    #toggle_alt_limit {
+      h4 {
+        margin: 0 0 0 5px;
+        font-size: 10pt;
+      }
     }
 
-    #bottom_actions {
-      width: 100%;
+    section {
+      padding: 10px;
 
-      #useAltLimits > label > span {
-        display: flex;
-        align-items: center;
+      h2 {
+        font-weight: 400;
       }
     }
+
+    #disk_summary, #global_transfer {
+      display: flex;
+      flex-direction: column;
+
+      width: 100%;
+    }
+  }
+}
+
+.dark-theme {
+  .data-container {
+    #qbittorrent_name {
+      background: #212121;
+    }
   }
 }
 
@@ -47,24 +70,70 @@ h3 {
     margin: 0;
 }
 
-#summaryContent h4 {
+h4 {
     font-size: 10pt;
     margin: 0 5px 0 5px;
 }
 
 mat-chip {
-  border-radius: 0;
+  border-radius: 10px;
   width: 100%;
-  cursor: pointer;
 }
 
-/** For small screens */
-@media only screen and (max-width: 1550px) {
-  .global-transfer-info-container {
-    padding-top: 0;
+#summaryContent {
+  mat-chip {
+    background: rgba(0, 0, 0, 0.08);
+
+    h4 {
+      font-size: 10pt;
+      margin: 0 0 0 5px;
+    }
+  }
+}
+
+#filter_torrents {
+  h3 {
+    font-size: 11pt;
+    margin-bottom: 0;
+  }
+
+  mat-chip {
+    color: black;
+
+    border-radius: 0;
+    cursor: pointer;
+
+    background: none;
+
+    border: solid 2px;
+    border-color:rgba(0, 0, 0, 0.07);
+
+    h4 {
+      font-size: 10pt;
+      margin: 0 0 0 5px;
+    }
+
+    &.mat-chip-selected {
+      background: rgb(224, 224, 224);
+    }
+  }
+}
+
+.dark-theme {
+  #summaryContent {
+    mat-chip {
+      background: rgba(97, 97, 97, 0.5);
+    }
+  }
 
-    .hide-small {
-      display: none;
+  #filter_torrents {
+    mat-chip {
+      color: white;
+      border-color: rgba(97, 97, 97, 0.5);
+
+      &.mat-chip-selected {
+        background: rgb(97, 97, 97);
+      }
     }
   }
 }