TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-20 23:03:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed size of actions in home screen downloads

Browse Source
This commit is contained in:
Isaac Abadi
2023-05-21 19:44:20 -06:00
parent 2568514357
commit 461025d859
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/downloads/downloads.component.html
View File

@@ -10,8 +10,8 @@
<!-- Title Column --> <!-- Title Column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="flex: 2"> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element"> <mat-cell *matCellDef="let element" style="flex: 2">
<span class="one-line" [matTooltip]="element.title ? element.title : null"> <span class="one-line" [matTooltip]="element.title ? element.title : null">
{{element.title}} {{element.title}}
</span> </span>
@@ -52,8 +52,8 @@
<!-- Actions Column --> <!-- Actions Column -->
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef [ngStyle]="{flex: innerWidth < 800 ? 1 : 2}"> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell> <mat-header-cell *matHeaderCellDef [ngStyle]="{flex: actionsFlex}"> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element" [ngStyle]="{flex: innerWidth < 800 ? 1 : 2}"> <mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}">
<div *ngIf="!uids && innerWidth >= 800"> <div *ngIf="!uids && innerWidth >= 800">
<ng-container *ngFor="let downloadAction of downloadActions"> <ng-container *ngFor="let downloadAction of downloadActions">
<button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [matTooltip]="downloadAction.tooltip" mat-icon-button><mat-icon>{{downloadAction.icon}}</mat-icon></button> <button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [matTooltip]="downloadAction.tooltip" mat-icon-button><mat-icon>{{downloadAction.icon}}</mat-icon></button>

11
src/app/components/downloads/downloads.component.ts
View File

@@ -38,6 +38,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
3: $localize`Complete` 3: $localize`Complete`
} }
actionsFlex = 2;
displayedColumnsBig: 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']; displayedColumnsSmall: string[] = ['title', 'step_index', 'percent_complete', 'actions'];
displayedColumns: string[] = this.displayedColumnsBig; displayedColumns: string[] = this.displayedColumnsBig;
@@ -105,7 +106,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(): void { onResize(): void {
this.innerWidth = window.innerWidth; this.innerWidth = window.innerWidth;
this.resizeColumns(); this.recalculateColumns();
} }
sort_downloads = (a: Download, b: Download): number => { sort_downloads = (a: Download, b: Download): number => {
@@ -116,8 +117,10 @@ export class DownloadsComponent implements OnInit, OnDestroy {
constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { } constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { }
ngOnInit(): void { ngOnInit(): void {
// Remove sub name as it's not necessary for one-off downloads
if (this.uids) this.displayedColumnsBig = this.displayedColumnsBig.filter(col => col !== 'sub_name');
this.innerWidth = window.innerWidth; this.innerWidth = window.innerWidth;
this.resizeColumns(); this.recalculateColumns();
if (this.postsService.initialized) { if (this.postsService.initialized) {
this.getCurrentDownloadsRecurring(); this.getCurrentDownloadsRecurring();
} else { } else {
@@ -319,9 +322,11 @@ export class DownloadsComponent implements OnInit, OnDestroy {
}); });
} }
resizeColumns() { recalculateColumns() {
if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall; if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall;
else this.displayedColumns = this.displayedColumnsBig; else this.displayedColumns = this.displayedColumnsBig;
this.actionsFlex = this.uids || this.innerWidth < 800 ? 1 : 2;
} }
} }