Fixed size of actions in home screen downloads

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

View File

@@ -10,8 +10,8 @@
<!-- Title Column -->
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element">
<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" style="flex: 2">
<span class="one-line" [matTooltip]="element.title ? element.title : null">
{{element.title}}
</span>
@@ -52,8 +52,8 @@
<!-- Actions Column -->
<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-cell *matCellDef="let element" [ngStyle]="{flex: innerWidth < 800 ? 1 : 2}">
<mat-header-cell *matHeaderCellDef [ngStyle]="{flex: actionsFlex}"> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}">
<div *ngIf="!uids && innerWidth >= 800">
<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>

View File

@@ -38,6 +38,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
3: $localize`Complete`
}
actionsFlex = 2;
displayedColumnsBig: string[] = ['timestamp_start', 'title', 'step_index', 'sub_name', 'percent_complete', 'actions'];
displayedColumnsSmall: string[] = ['title', 'step_index', 'percent_complete', 'actions'];
displayedColumns: string[] = this.displayedColumnsBig;
@@ -105,7 +106,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event'])
onResize(): void {
this.innerWidth = window.innerWidth;
this.resizeColumns();
this.recalculateColumns();
}
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) { }
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.resizeColumns();
this.recalculateColumns();
if (this.postsService.initialized) {
this.getCurrentDownloadsRecurring();
} else {
@@ -319,9 +322,11 @@ export class DownloadsComponent implements OnInit, OnDestroy {
});
}
resizeColumns() {
recalculateColumns() {
if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall;
else this.displayedColumns = this.displayedColumnsBig;
this.actionsFlex = this.uids || this.innerWidth < 800 ? 1 : 2;
}
}