Skip to content

Commit 35e5354

Browse files
bill-ahmedbill-ahmed
authored
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
1 parent 1f1a7a8 commit 35e5354

26 files changed

+581
-315
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"ng": "ng",
55
"start": "ng serve",
66
"dev": "ng build --watch --output-path=\"dev/www/private\"",
7+
"dev-login": "ng build --watch --project=login --output-path=\"dev/www/public\"",
78
"build": "ng build",
89
"build_prod": "ng build --prod",
910
"test": "ng test",

‎projects/login/src/app/login-page/login-page.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<mat-slide-toggle (click)="false" (change)="false" [checked]="isDarkThemeEnabled()" color="primary"></mat-slide-toggle>
66
</div>
77

8-
<mat-card class="mat-elevation-z3">
8+
<mat-card>
99
<mat-card-content>
1010
<div class="card-header">
11-
<h1 [ngClass]="{'dark-theme': isDarkTheme | async}">qBittorrent Web UI</h1>
11+
<h1 [ngClass]="{'dark-theme': isDarkTheme | async}">qBittorrent</h1>
1212
<mat-card-subtitle>Sign in below to continue.</mat-card-subtitle>
1313
</div>
1414

‎projects/login/src/app/login-page/login-page.component.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,12 @@
3737

3838
width: 60%;
3939

40-
/*Animations short-hand: {duration} {timing-function} {dekay} {itetarion-count} {nameOfAnimation}*/
40+
/*Animations short-hand: {duration} {timing-function} {delay} {itetarion-count} {nameOfAnimation}*/
4141
animation: 0.4s ease-out 0s 1 slideInAndFadeFromBottom;
4242

43+
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
44+
border-radius: 7px;
45+
4346
mat-card-content {
4447
height: 100%;
4548

@@ -78,10 +81,16 @@
7881
}
7982
}
8083

84+
.dark-theme {
85+
mat-card {
86+
box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
87+
}
88+
}
89+
8190
/*Rise up tranistion*/
8291
@keyframes slideInAndFadeFromBottom{
8392
0% {
84-
transform: translateY(20%);
93+
transform: translateY(10%);
8594
opacity: 0;
8695
}
8796

‎src/app/app.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"version": "1.15.1"
2+
"version": "1.16.0"
33
}

‎src/app/file-system-tree-explorer/file-system-tree-explorer.component.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ export class FileSystemTreeExplorerComponent implements OnChanges {
4545

4646
ngOnInit(): void {
4747
this._updateData();
48-
49-
console.log('allow set priority?', this.allowSetPriority)
5048
}
5149

5250
ngOnChanges(changes: SimpleChanges) {

‎src/app/global-transfer-info/global-transfer-info.component.html

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,49 @@
11
<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="global-transfer-info-container mat-app-background">
22
<mat-card class="mat-elevation-z0 data-container">
3+
<section *ngIf="!isMobileUser" id="qbittorrent_name" class="row justify-center text-center">
4+
<h1 style="font-weight: 500; width: 100%; margin: auto;"> qBittorrent </h1>
5+
</section>
6+
7+
<mat-divider [inset]="true"></mat-divider>
8+
9+
<section id="toggle_alt_limit">
10+
<div (click)="toggleAltSpeedLimits()" class="row align-center space-between" style="cursor: pointer">
11+
<div class="row align-center">
12+
<mat-icon>speed</mat-icon>
13+
<h4>Toggle alt limit</h4>
14+
</div>
15+
16+
<mat-slide-toggle id="useAltLimits" style="pointer-events: none;" [checked]="isAltSpeedEnabled" color="primary">
17+
</mat-slide-toggle>
18+
</div>
19+
</section>
20+
321
<section id="disk_summary">
422
<mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner>
523

624
<div *ngIf="!isLoading()" id="summaryContent">
725
<mat-chip-list>
8-
<mat-chip color="default" disableRipple selected>
26+
<mat-chip color="default" disableRipple>
927
<mat-icon color="primary">refresh</mat-icon>
1028
<h4>Refresh Interval: {{refreshInterval / 1000}}s</h4>
1129
</mat-chip>
1230

13-
<mat-chip color="default" disableRipple selected>
31+
<mat-chip color="default" disableRipple>
1432
<mat-icon color="primary">storage</mat-icon>
1533
<h4>Free space: {{getFreeSpaceOnDisk()}}</h4>
1634
</mat-chip>
1735
</mat-chip-list>
1836
</div>
1937
</section>
2038

21-
<br class="hide-small"/>
22-
<mat-divider class="hide-small" [inset]="true"></mat-divider>
23-
<br/>
39+
<mat-divider class="spaced" [inset]="true"></mat-divider>
2440

2541
<section id="global_transfer">
2642
<mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner>
2743
<div *ngIf="!isLoading()" id="summaryContent">
2844
<mat-chip-list>
29-
<mat-chip color="primary" (click)="handleDownloadLimitSelect()" disableRipple selected matTooltip="Click to set download limit" matTooltipPosition="above">
30-
<mat-icon>arrow_downward</mat-icon>
45+
<mat-chip style="cursor: pointer;" (click)="handleDownloadLimitSelect()" disableRipple matTooltip="Click to set download limit" matTooltipPosition="above">
46+
<mat-icon color="primary">arrow_downward</mat-icon>
3147
<h4>{{getDownloadSpeedString()}} {{getDownLimitString()}}</h4>
3248
</mat-chip>
3349

@@ -37,8 +53,8 @@ <h4>Downloaded: {{getDownloadedString()}}</h4>
3753
</mat-chip>
3854

3955
<br/>
40-
<mat-chip color="accent" (click)="handleUploadLimitSelect()" disableRipple selected matTooltip="Click to set upload limit" matTooltipPosition="below">
41-
<mat-icon>arrow_upward</mat-icon>
56+
<mat-chip style="cursor: pointer;" (click)="handleUploadLimitSelect()" disableRipple matTooltip="Click to set upload limit" matTooltipPosition="below">
57+
<mat-icon color="accent">arrow_upward</mat-icon>
4258
<h4>{{getUploadSpeedString()}} {{getUpLimitString()}}</h4>
4359
</mat-chip>
4460

@@ -50,18 +66,65 @@ <h4>Uploaded: {{getUploadedString()}}</h4>
5066
</div>
5167
</section>
5268

53-
<div class="hide-small">
54-
<br/>
55-
<mat-divider [inset]="true"></mat-divider>
56-
<br/>
57-
</div>
69+
<mat-divider class="spaced" [inset]="true"></mat-divider>
5870

59-
<section class="hide-small" id="bottom_actions">
60-
<div class="row">
61-
<mat-slide-toggle labelPosition="before" id="useAltLimits" (toggleChange)="toggleAltSpeedLimits()" [checked]="isAltSpeedEnabled" color="primary" matTooltip="Use alt speed limits" matTooltipPosition="above">
62-
<mat-icon style="margin-top: 8px;">speed</mat-icon>
63-
</mat-slide-toggle>
64-
</div>
71+
<section id="filter_torrents">
72+
<h3>
73+
Filter Status
74+
</h3>
75+
76+
<mat-chip-list chipListSelectable="true" focused="true" [selectable]="true">
77+
78+
<mat-chip (click)="handleFilterStatusSelect('All')" [selected]="isSelected('All')">
79+
<h4>All</h4>
80+
</mat-chip>
81+
82+
83+
<mat-chip color="default" (click)="handleFilterStatusSelect('Downloading')" [selected]="isSelected('Downloading')">
84+
<mat-icon style="color: gray">arrow_downward</mat-icon>
85+
<h4>Downloading</h4>
86+
</mat-chip>
87+
88+
<mat-chip (click)="handleFilterStatusSelect('Seeding')" [selected]="isSelected('Seeding')">
89+
<mat-icon style="color: gray">arrow_upward</mat-icon>
90+
<h4>Seeding</h4>
91+
</mat-chip>
92+
93+
<mat-chip color="default" (click)="handleFilterStatusSelect('Completed')" [selected]="isSelected('Completed')">
94+
<mat-icon style="color: #7ABF7D">done</mat-icon>
95+
<h4>Completed</h4>
96+
</mat-chip>
97+
98+
<mat-chip color="default" (click)="handleFilterStatusSelect('Resumed')" [selected]="isSelected('Resumed')">
99+
<mat-icon style="color: gray">play_arrow</mat-icon>
100+
<h4>Resumed</h4>
101+
</mat-chip>
102+
103+
<mat-chip color="default" (click)="handleFilterStatusSelect('Paused')" [selected]="isSelected('Paused')">
104+
<mat-icon style="color: gray">pause</mat-icon>
105+
<h4>Paused</h4>
106+
</mat-chip>
107+
108+
<mat-chip color="default" (click)="handleFilterStatusSelect('Active')" [selected]="isSelected('Active')">
109+
<mat-icon color="primary">toggle_on</mat-icon>
110+
<h4>Active</h4>
111+
</mat-chip>
112+
113+
<mat-chip color="default" (click)="handleFilterStatusSelect('Inactive')" [selected]="isSelected('Inactive')">
114+
<mat-icon color="accent">toggle_off</mat-icon>
115+
<h4>Inactive</h4>
116+
</mat-chip>
117+
118+
<mat-chip color="primary" (click)="handleFilterStatusSelect('Stalled')" [selected]="isSelected('Stalled')">
119+
<mat-icon>refresh</mat-icon>
120+
<h4>Stalled</h4>
121+
</mat-chip>
122+
123+
<mat-chip color="warn" (click)="handleFilterStatusSelect('Errored')" [selected]="isSelected('Errored')">
124+
<mat-icon>error</mat-icon>
125+
<h4>Errored</h4>
126+
</mat-chip>
127+
</mat-chip-list>
65128
</section>
66129
</mat-card>
67130
</div>

‎src/app/global-transfer-info/global-transfer-info.component.scss

Lines changed: 94 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,60 @@
11
.global-transfer-info-container {
2-
height: 100%;
2+
height: 100vh;
3+
width: 220px;
34

45
.data-container {
5-
height: 100%;
6+
height: 100vh;
7+
overflow-y: auto;
68

79
display: flex;
810
flex-direction: column;
911

10-
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
12+
border-radius: 0;
13+
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
1114

12-
section h2 {
13-
font-weight: 400;
15+
padding: 0;
16+
17+
mat-divider.spaced {
18+
margin: 5px 0;
1419
}
1520

16-
#disk_summary, #global_transfer {
17-
display: flex;
18-
flex-direction: column;
21+
#qbittorrent_name {
22+
background: #1976D2;
23+
color: white;
1924

20-
width: 100%;
25+
height: 64px;
26+
margin-bottom: 0;
2127
}
2228

23-
#global_transfer {
24-
flex-grow: 1;
29+
#toggle_alt_limit {
30+
h4 {
31+
margin: 0 0 0 5px;
32+
font-size: 10pt;
33+
}
2534
}
2635

27-
#bottom_actions {
28-
width: 100%;
36+
section {
37+
padding: 10px;
2938

30-
#useAltLimits > label > span {
31-
display: flex;
32-
align-items: center;
39+
h2 {
40+
font-weight: 400;
3341
}
3442
}
43+
44+
#disk_summary, #global_transfer {
45+
display: flex;
46+
flex-direction: column;
47+
48+
width: 100%;
49+
}
50+
}
51+
}
52+
53+
.dark-theme {
54+
.data-container {
55+
#qbittorrent_name {
56+
background: #212121;
57+
}
3558
}
3659
}
3760

@@ -47,24 +70,70 @@ h3 {
4770
margin: 0;
4871
}
4972

50-
#summaryContent h4 {
73+
h4 {
5174
font-size: 10pt;
5275
margin: 0 5px 0 5px;
5376
}
5477

5578
mat-chip {
56-
border-radius: 0;
79+
border-radius: 10px;
5780
width: 100%;
58-
cursor: pointer;
5981
}
6082

61-
/** For small screens */
62-
@media only screen and (max-width: 1550px) {
63-
.global-transfer-info-container {
64-
padding-top: 0;
83+
#summaryContent {
84+
mat-chip {
85+
background: rgba(0, 0, 0, 0.08);
86+
87+
h4 {
88+
font-size: 10pt;
89+
margin: 0 0 0 5px;
90+
}
91+
}
92+
}
93+
94+
#filter_torrents {
95+
h3 {
96+
font-size: 11pt;
97+
margin-bottom: 0;
98+
}
99+
100+
mat-chip {
101+
color: black;
102+
103+
border-radius: 0;
104+
cursor: pointer;
105+
106+
background: none;
107+
108+
border: solid 2px;
109+
border-color:rgba(0, 0, 0, 0.07);
110+
111+
h4 {
112+
font-size: 10pt;
113+
margin: 0 0 0 5px;
114+
}
115+
116+
&.mat-chip-selected {
117+
background: rgb(224, 224, 224);
118+
}
119+
}
120+
}
121+
122+
.dark-theme {
123+
#summaryContent {
124+
mat-chip {
125+
background: rgba(97, 97, 97, 0.5);
126+
}
127+
}
65128

66-
.hide-small {
67-
display: none;
129+
#filter_torrents {
130+
mat-chip {
131+
color: white;
132+
border-color: rgba(97, 97, 97, 0.5);
133+
134+
&.mat-chip-selected {
135+
background: rgb(97, 97, 97);
136+
}
68137
}
69138
}
70139
}

0 commit comments

Comments
 (0)