From 03359940ff86a4c62c6e45b223ad1c297d52b63f Mon Sep 17 00:00:00 2001 From: Isaac Abadi Date: Sun, 21 May 2023 19:21:38 -0600 Subject: [PATCH] Downloads UI is more mobile friendly (#905) --- .../downloads/downloads.component.html | 35 ++--- .../downloads/downloads.component.scss | 6 +- .../downloads/downloads.component.ts | 128 +++++++++++++----- src/app/main/main.component.html | 2 +- 4 files changed, 116 insertions(+), 55 deletions(-) diff --git a/src/app/components/downloads/downloads.component.html b/src/app/components/downloads/downloads.component.html index 9dabe7e8..17173d2d 100644 --- a/src/app/components/downloads/downloads.component.html +++ b/src/app/components/downloads/downloads.component.html @@ -52,20 +52,23 @@ - Actions - -
- - - - + Actions + +
+ + - - - - - - +
+
+ + + + + +
@@ -80,9 +83,9 @@
- - - + + +
diff --git a/src/app/components/downloads/downloads.component.scss b/src/app/components/downloads/downloads.component.scss index ed84df91..9d990526 100644 --- a/src/app/components/downloads/downloads.component.scss +++ b/src/app/components/downloads/downloads.component.scss @@ -15,10 +15,14 @@ mat-header-cell, mat-cell { } .downloads-action-button-div { - margin-top: 10px; margin-left: 5px; } +.downloads-action-button { + margin-top: 10px; + margin-right: 10px; +} + .rounded-top { border-radius: 16px 16px 0px 0px !important; } diff --git a/src/app/components/downloads/downloads.component.ts b/src/app/components/downloads/downloads.component.ts index c0fde459..c21829e6 100644 --- a/src/app/components/downloads/downloads.component.ts +++ b/src/app/components/downloads/downloads.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter, HostListener } from '@angular/core'; import { PostsService } from 'app/posts.services'; import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations'; import { Router } from '@angular/router'; @@ -13,31 +13,7 @@ import { Download } from 'api-types'; @Component({ selector: 'app-downloads', templateUrl: './downloads.component.html', - styleUrls: ['./downloads.component.scss'], - animations: [ - // nice stagger effect when showing existing elements - trigger('list', [ - transition(':enter', [ - // child animation selector + stagger - query('@items', - stagger(100, animateChild()), { optional: true } - ) - ]), - ]), - trigger('items', [ - // cubic-bezier for a tiny bouncing feel - transition(':enter', [ - style({ transform: 'scale(0.5)', opacity: 0 }), - animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)', - style({ transform: 'scale(1)', opacity: 1 })) - ]), - transition(':leave', [ - style({ transform: 'scale(1)', opacity: 1, height: '*' }), - animate('1s cubic-bezier(.8,-0.6,0.2,1.5)', - style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' })) - ]), - ]) - ], + styleUrls: ['./downloads.component.scss'] }) export class DownloadsComponent implements OnInit, OnDestroy { @@ -62,13 +38,76 @@ export class DownloadsComponent implements OnInit, OnDestroy { 3: $localize`Complete` } - displayedColumns: string[] = ['timestamp_start', 'title', 'step_index', 'sub_name', 'percent_complete', 'actions']; + displayedColumnsBig: string[] = ['timestamp_start', 'title', 'step_index', 'sub_name', 'percent_complete', 'actions']; + displayedColumnsSmall: string[] = ['title', 'step_index', 'percent_complete', 'actions']; + displayedColumns: string[] = this.displayedColumnsBig; dataSource = null; // new MatTableDataSource(); + + // The purpose of this is to reduce code reuse for displaying these actions as icons or in a menu + downloadActions: DownloadAction[] = [ + { + tooltip: $localize`Watch content`, + action: (download: Download) => this.watchContent(download), + show: (download: Download) => download.finished && !download.error, + icon: 'smart_display' + }, + { + tooltip: $localize`Show error`, + action: (download: Download) => this.showError(download), + show: (download: Download) => download.finished && !!download.error, + icon: 'warning' + }, + { + tooltip: $localize`Restart`, + action: (download: Download) => this.restartDownload(download), + show: (download: Download) => download.finished, + icon: 'restart_alt' + }, + { + tooltip: $localize`Pause`, + action: (download: Download) => this.pauseDownload(download), + show: (download: Download) => !download.finished && (!download.paused || !download.finished_step), + icon: 'pause' + }, + { + tooltip: $localize`Resume`, + action: (download: Download) => this.resumeDownload(download), + show: (download: Download) => !download.finished && download.paused && download.finished_step, + icon: 'play_arrow' + }, + { + tooltip: $localize`Resume`, + action: (download: Download) => this.resumeDownload(download), + show: (download: Download) => !download.finished && download.paused && download.finished_step, + icon: 'play_arrow' + }, + { + tooltip: $localize`Cancel`, + action: (download: Download) => this.cancelDownload(download), + show: (download: Download) => false && !download.finished && !download.paused, // TODO: add possibility to cancel download + icon: 'cancel' + }, + { + tooltip: $localize`Clear`, + action: (download: Download) => this.clearDownload(download), + show: (download: Download) => download.finished || download.paused, + icon: 'delete' + } + ] + downloads_retrieved = false; + innerWidth: number; + @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; + @HostListener('window:resize', ['$event']) + onResize(): void { + this.innerWidth = window.innerWidth; + this.resizeColumns(); + } + sort_downloads = (a: Download, b: Download): number => { const result = b.timestamp_start - a.timestamp_start; return result; @@ -77,6 +116,8 @@ export class DownloadsComponent implements OnInit, OnDestroy { constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { } ngOnInit(): void { + this.innerWidth = window.innerWidth; + this.resizeColumns(); if (this.postsService.initialized) { this.getCurrentDownloadsRecurring(); } else { @@ -164,8 +205,8 @@ export class DownloadsComponent implements OnInit, OnDestroy { }); } - pauseDownload(download_uid: string): void { - this.postsService.pauseDownload(download_uid).subscribe(res => { + pauseDownload(download: Download): void { + this.postsService.pauseDownload(download['uid']).subscribe(res => { if (!res['success']) { this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`); } @@ -180,8 +221,8 @@ export class DownloadsComponent implements OnInit, OnDestroy { }); } - resumeDownload(download_uid: string): void { - this.postsService.resumeDownload(download_uid).subscribe(res => { + resumeDownload(download: Download): void { + this.postsService.resumeDownload(download['uid']).subscribe(res => { if (!res['success']) { this.postsService.openSnackBar($localize`Failed to resume download! See server logs for more info.`); } @@ -196,8 +237,8 @@ export class DownloadsComponent implements OnInit, OnDestroy { }); } - restartDownload(download_uid: string): void { - this.postsService.restartDownload(download_uid).subscribe(res => { + restartDownload(download: Download): void { + this.postsService.restartDownload(download['uid']).subscribe(res => { if (!res['success']) { this.postsService.openSnackBar($localize`Failed to restart download! See server logs for more info.`); } else { @@ -208,16 +249,16 @@ export class DownloadsComponent implements OnInit, OnDestroy { }); } - cancelDownload(download_uid: string): void { - this.postsService.cancelDownload(download_uid).subscribe(res => { + cancelDownload(download: Download): void { + this.postsService.cancelDownload(download['uid']).subscribe(res => { if (!res['success']) { this.postsService.openSnackBar($localize`Failed to cancel download! See server logs for more info.`); } }); } - clearDownload(download_uid: string): void { - this.postsService.clearDownload(download_uid).subscribe(res => { + clearDownload(download: Download): void { + this.postsService.clearDownload(download['uid']).subscribe(res => { if (!res['success']) { this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`); } @@ -257,6 +298,7 @@ export class DownloadsComponent implements OnInit, OnDestroy { } showError(download: Download): void { + console.log(download) const copyToClipboardEmitter = new EventEmitter(); this.dialog.open(ConfirmDialogComponent, { data: { @@ -276,4 +318,16 @@ export class DownloadsComponent implements OnInit, OnDestroy { } }); } + + resizeColumns() { + if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall; + else this.displayedColumns = this.displayedColumnsBig; + } } + +interface DownloadAction { + tooltip: string, + action: (download: Download) => void, + show: (download: Download) => boolean, + icon: string +} \ No newline at end of file diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index e5ae633e..8afa7ef1 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -205,7 +205,7 @@
- +