From 00e34f1bedb8e4e629713cce5ad5fef5918b3a16 Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Fri, 22 Jan 2021 10:35:28 +0100
Subject: [PATCH] use mat-accordion for separating tables
---
.../workspace-admin/files/files.component.css | 32 ++--
.../files/files.component.html | 140 +++++++++---------
2 files changed, 90 insertions(+), 82 deletions(-)
diff --git a/src/app/workspace-admin/files/files.component.css b/src/app/workspace-admin/files/files.component.css
index a418d995..4ab7cd55 100644
--- a/src/app/workspace-admin/files/files.component.css
+++ b/src/app/workspace-admin/files/files.component.css
@@ -9,10 +9,15 @@
.filelist {
flex: 10 0 400px;
+ margin-top: 0.7em;
}
-mat-table {
- margin-bottom: 3em;
+mat-expansion-panel {
+ overflow: visible;
+}
+
+mat-cell:first-of-type, mat-header-cell:first-of-type, mat-footer-cell:first-of-type {
+ padding-left: 0
}
.checkboxcell {
@@ -24,10 +29,8 @@ mat-table {
flex: 3 3 60px;
}
-.namecell .mat-subheading-1 {
- padding: 0 16px;
- margin-bottom: 0;
- color: black;
+.namecell.mat-header-cell {
+ padding-left: 16px;
}
.datecell {
@@ -40,7 +43,8 @@ mat-table {
}
.sidebar .buttons {
- min-height: 56px;
+ margin-top: 0.7em;
+ margin-bottom: 0.7em;
display: inline-flex;
vertical-align: middle;
align-items: center;
@@ -51,18 +55,15 @@ mat-table {
font-size: 0.8em;
}
-.report-error,
-.checkerror {
+.report-error {
color: #821324;
}
-.report-warning,
-.checkwarning {
- color: goldenrod;
+.report-warning {
+ color: silver;
}
-.report-info,
-.checkinfo {
+.report-info {
color: blue;
}
@@ -81,11 +82,12 @@ mat-table {
.file-report:hover .full-file-report {
display: block;
- position: absolute;
+ position: absolute ;
background: white;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
z-index: 1000;
cursor: default;
+ margin: 2px;
}
.full-file-report .mat-card-title,
diff --git a/src/app/workspace-admin/files/files.component.html b/src/app/workspace-admin/files/files.component.html
index 6a33e2d1..d5384ef8 100644
--- a/src/app/workspace-admin/files/files.component.html
+++ b/src/app/workspace-admin/files/files.component.html
@@ -1,80 +1,86 @@
<div class="columnhost">
<div class="filelist">
- <ng-container *ngFor="let type of fileTypes">
-
- <mat-table *ngIf="files && files[type]" [dataSource]="files[type]" matSort (matSortChange)="setTableSorting($event)">
- <ng-container matColumnDef="checked">
- <mat-header-cell *matHeaderCellDef class="checkboxcell">
- <mat-checkbox (change)="checkAll($event.checked, type)"></mat-checkbox>
- </mat-header-cell>
- <mat-cell *matCellDef="let element" class="checkboxcell">
- <mat-checkbox [checked]="element.isChecked" (change)="element.isChecked=$event.checked"></mat-checkbox>
- </mat-cell>
- </ng-container>
-
- <ng-container matColumnDef="name">
- <mat-header-cell *matHeaderCellDef mat-sort-header class="namecell">
- <div class="mat-subheading-1">{{typeLabels[type]}}</div>
+ <mat-accordion class="example-headers-align" multi="true">
+ <mat-expansion-panel [expanded]="true" *ngFor="let type of fileTypes">
+ <mat-expansion-panel-header>
+ <mat-panel-title>{{typeLabels[type]}}</mat-panel-title>
+ <mat-panel-description>
<span>{{files[type].data.length}} Datei{{files[type].data.length === 1 ? '' : 'en'}}</span>
<span *ngIf="fileStats.invalid[type]">, davon {{fileStats.invalid[type]}} Fehlerhaft</span>
<span *ngIf="type=='Testtakers'">, {{fileStats.testtakers}} Teilnehmer</span>
- </mat-header-cell>
- <mat-cell *matCellDef="let element" class="namecell">
- <div class="file-report">
- <button mat-button (click)="download(element)">{{element.name}}</button>
- <span class="vertical-align-middle">
- <ng-container *ngIf="element.report.error && element.report.error.length; else: noError">
- <mat-icon class="report-error">error</mat-icon>
- </ng-container>
- <ng-template #noError>
- <ng-container *ngIf="element.report.warning && element.report.warning.length">
- <mat-icon class="report-warning">warning</mat-icon>
- </ng-container>
- </ng-template>
- </span>
- <mat-card class="full-file-report">
- <mat-card-header *ngIf="element.info.label || element.id">
- <mat-card-title>
- {{element.info.label}}
- <span
- *ngIf="element.id !== element.name.toUpperCase()"
- style="{{element.info.label ? 'color:silver' : ''}}">
- #{{element.id}}
- </span>
- </mat-card-title>
- <mat-card-subtitle>{{element.info.description}}</mat-card-subtitle>
- </mat-card-header>
- <mat-card-content>
- <ng-container *ngFor="let level of ['error', 'warning', 'info']">
- <div *ngFor="let message of element.report[level]">
- <alert [level]="level" [text]="message"></alert>
- </div>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+
+ <mat-table *ngIf="files && files[type]" [dataSource]="files[type]" matSort (matSortChange)="setTableSorting($event)">
+ <ng-container matColumnDef="checked">
+ <mat-header-cell *matHeaderCellDef class="checkboxcell">
+ <mat-checkbox (change)="checkAll($event.checked, type)"></mat-checkbox>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let element" class="checkboxcell">
+ <mat-checkbox [checked]="element.isChecked" (change)="element.isChecked=$event.checked"></mat-checkbox>
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="name">
+ <mat-header-cell *matHeaderCellDef mat-sort-header class="namecell">Dateiname</mat-header-cell>
+ <mat-cell *matCellDef="let element" class="namecell">
+ <div class="file-report">
+ <button mat-button (click)="download(element)">{{element.name}}</button>
+ <span class="vertical-align-middle">
+ <ng-container *ngIf="element.report.error && element.report.error.length; else: noError">
+ <mat-icon class="report-error">error</mat-icon>
</ng-container>
- </mat-card-content>
- </mat-card>
- </div>
- </mat-cell>
- </ng-container>
+ <ng-template #noError>
+ <ng-container *ngIf="element.report.warning && element.report.warning.length">
+ <mat-icon class="report-warning">warning</mat-icon>
+ </ng-container>
+ </ng-template>
+ </span>
+ <mat-card class="full-file-report">
+ <mat-card-header *ngIf="element.info.label || element.id">
+ <mat-card-title>
+ {{element.info.label}}
+ <span
+ *ngIf="element.id !== element.name.toUpperCase()"
+ style="{{element.info.label ? 'color:silver' : ''}}">
+ #{{element.id}}
+ </span>
+ </mat-card-title>
+ <mat-card-subtitle>{{element.info.description}}</mat-card-subtitle>
+ </mat-card-header>
+ <mat-card-content>
+ <ng-container *ngFor="let level of ['error', 'warning', 'info']">
+ <div *ngFor="let message of element.report[level]">
+ <alert [level]="level" [text]="message"></alert>
+ </div>
+ </ng-container>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="modificationTime">
+ <mat-header-cell *matHeaderCellDef mat-sort-header class="datecell"> Letzte Änderung </mat-header-cell>
+ <mat-cell *matCellDef="let element" class="datecell">
+ {{(element.modificationTime * 1000) | date: 'dd.MM.yy hh:mm'}}
+ </mat-cell>
+ </ng-container>
- <ng-container matColumnDef="modificationTime">
- <mat-header-cell *matHeaderCellDef mat-sort-header class="datecell"> Letzte Änderung </mat-header-cell>
- <mat-cell *matCellDef="let element" class="datecell">
- {{(element.modificationTime * 1000) | date: 'dd.MM.yy hh:mm'}}
- </mat-cell>
- </ng-container>
+ <ng-container matColumnDef="size">
+ <mat-header-cell *matHeaderCellDef mat-sort-header> Volle Größe </mat-header-cell>
+ <mat-cell *matCellDef="let element" style="white-space: nowrap;">
+ {{(element.info.totalSize || element.size) | bytes}}
+ </mat-cell>
+ </ng-container>
- <ng-container matColumnDef="size">
- <mat-header-cell *matHeaderCellDef mat-sort-header> Volle Größe </mat-header-cell>
- <mat-cell *matCellDef="let element" style="white-space: nowrap;">
- {{(element.info.totalSize || element.size) | bytes}}
- </mat-cell>
- </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+ </mat-table>
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
- </mat-table>
- </ng-container>
+ </mat-expansion-panel>
+ </mat-accordion>
</div>
<div class="sidebar">
--
GitLab