Skip to content

Commit

Permalink
Filter torrents (#146)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
bill-ahmed authored Nov 17, 2021
1 parent 1f1a7a8 commit 35e5354
Show file tree
Hide file tree
Showing 26 changed files with 581 additions and 315 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions projects/login/src/app/login-page/login-page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
13 changes: 11 additions & 2 deletions projects/login/src/app/login-page/login-page.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;

Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/app/app.config.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"version": "1.15.1"
"version": "1.16.0"
}
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ export class FileSystemTreeExplorerComponent implements OnChanges {

ngOnInit(): void {
this._updateData();

console.log('allow set priority?', this.allowSetPriority)
}

ngOnChanges(changes: SimpleChanges) {
Expand Down
103 changes: 83 additions & 20 deletions src/app/global-transfer-info/global-transfer-info.component.html
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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>

Expand All @@ -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>
119 changes: 94 additions & 25 deletions src/app/global-transfer-info/global-transfer-info.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

Expand All @@ -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);
}
}
}
}
Loading

0 comments on commit 35e5354

Please sign in to comment.