[ACS-7414] - Manage versions dialog

This commit is contained in:
DominikIwanek
2024-04-04 14:48:43 +02:00
committed by Vito Albano
parent b34b5994d7
commit 0da2ccb762
6 changed files with 111 additions and 66 deletions

View File

@@ -13,7 +13,7 @@
</adf-version-upload> </adf-version-upload>
</section> </section>
<ng-container *ngIf="data.showVersionsOnly"> <ng-container *ngIf="data.showVersionsOnly">
<section mat-dialog-content> <section class="adf-new-version-uploader-dialog-content" mat-dialog-content>
<div class="adf-version-list-container"> <div class="adf-version-list-container">
<div class="adf-version-list-table"> <div class="adf-version-list-table">
<adf-version-list <adf-version-list

View File

@@ -24,7 +24,7 @@
height: 500px; height: 500px;
} }
&-title { .adf-new-version-uploader-dialog-title {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
@@ -36,12 +36,12 @@
color: var(--adf-theme-foreground-text-color-087); color: var(--adf-theme-foreground-text-color-087);
} }
&-content { .adf-new-version-uploader-dialog-content {
padding: 0;
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: hidden;
padding: 2px 26px;
} }
&-actions { &-actions {

View File

@@ -2,62 +2,64 @@
<mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading"> <mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
<cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport"> <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
<mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first"> <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
<mat-icon matListItemLine>insert_drive_file</mat-icon> <mat-icon class="adf-version-list-item-icon" matListItemIcon>insert_drive_file</mat-icon>
<p matListItemLine class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p> <div class="adf-version-list-content" matListItemLine>
<p matListItemLine> <div class="adf-version-list-item-details">
<span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> - <p class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
<span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span> <p class="adf-version-list-item-line">
</p> <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
<p <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
matListItemLine </p>
[id]="'adf-version-list-item-comment-' + version.entry.id" <p
class="adf-version-list-item-comment" [id]="'adf-version-list-item-comment-' + version.entry.id"
*ngIf="showComments" class="adf-version-list-item-comment"
[title]="version.entry.versionComment"> *ngIf="showComments"
{{ version.entry.versionComment }} [title]="version.entry.versionComment">
</p> {{ version.entry.versionComment }}
</p>
<div *ngIf="showActions"> </div>
<mat-menu [id]="'adf-version-list-action-menu-' + version.entry.id" <div *ngIf="true">
#versionMenu="matMenu" <mat-menu [id]="'adf-version-list-action-menu-' + version.entry.id"
yPosition="below" #versionMenu="matMenu"
xPosition="before"> yPosition="below"
<ng-container *adf-acs-version="'7'"> xPosition="before">
<button *ngIf="allowViewVersions" <ng-container *adf-acs-version="'7'">
[id]="'adf-version-list-action-view-' + version.entry.id" <button *ngIf="allowViewVersions"
mat-menu-item [id]="'adf-version-list-action-view-' + version.entry.id"
(click)="onViewVersion(version.entry.id)"> mat-menu-item
{{ 'ADF_VERSION_LIST.ACTIONS.VIEW' | translate }} (click)="onViewVersion(version.entry.id)">
</button> {{ 'ADF_VERSION_LIST.ACTIONS.VIEW' | translate }}
</ng-container> </button>
<button </ng-container>
[id]="'adf-version-list-action-restore-' + version.entry.id" <button
[disabled]="!canUpdate() || latestVersion" [id]="'adf-version-list-action-restore-' + version.entry.id"
mat-menu-item [disabled]="!canUpdate() || latestVersion"
(click)="restore(version.entry.id)">
{{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
</button>
<button *ngIf="allowDownload"
[id]="'adf-version-list-action-download-' + version.entry.id"
mat-menu-item mat-menu-item
(click)="downloadVersion(version.entry.id)"> (click)="restore(version.entry.id)">
{{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }} {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
</button> </button>
<button <button *ngIf="allowDownload"
[disabled]="!canDelete()" [id]="'adf-version-list-action-download-' + version.entry.id"
[id]="'adf-version-list-action-delete-' + version.entry.id" mat-menu-item
(click)="deleteVersion(version.entry.id)" (click)="downloadVersion(version.entry.id)">
mat-menu-item> {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
{{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }} </button>
</button> <button
</mat-menu> [disabled]="!canDelete()"
[id]="'adf-version-list-action-delete-' + version.entry.id"
(click)="deleteVersion(version.entry.id)"
mat-menu-item>
{{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }}
</button>
</mat-menu>
<button mat-icon-button <button mat-icon-button
[matMenuTriggerFor]="versionMenu" [matMenuTriggerFor]="versionMenu"
[id]="'adf-version-list-action-menu-button-' + version.entry.id" [id]="'adf-version-list-action-menu-button-' + version.entry.id"
title="{{ 'ADF_VERSION_LIST.MANAGE_VERSION_OPTIONS' | translate }}"> title="{{ 'ADF_VERSION_LIST.MANAGE_VERSION_OPTIONS' | translate }}">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div>
</div> </div>
</mat-list-item> </mat-list-item>
</cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>

View File

@@ -1,17 +1,53 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
/* stylelint-disable no-descending-specificity */
@import 'styles/mat-selectors'; @import 'styles/mat-selectors';
.adf-version-list { .adf-version-list {
.adf-version-list-element {
.adf-version-list-item {
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
height: 88px;
padding: 0 16px;
.adf-version-list-item-details {
display: flex;
flex-direction: column;
flex: 1;
}
.adf-version-list-item-line {
margin: 0;
line-height: 20px;
}
.adf-version-list-item-name {
font-weight: normal;
color: var(--adf-theme-foreground-text-color-087);
font-size: 16px;
}
.adf-version-list-content {
display: flex;
padding-left: 16px;
}
.adf-version-list-item-icon {
color: var(--adf-theme-foreground-text-color-087);
margin: 4px;
}
.adf-version-list-item-version {
color: var(--adf-theme-foreground-text-color-087);
}
}
}
.adf-version-list-viewport { .adf-version-list-viewport {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
} }
.adf-version-list-item {
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
width: 100vw;
}
&-item-version { &-item-version {
font-weight: bold; font-weight: bold;
} }
@@ -21,8 +57,8 @@
} }
&-item-comment { &-item-comment {
width: 500px;
opacity: 0.5; opacity: 0.5;
margin: 0;
@media screen and (width <= 629px) { @media screen and (width <= 629px) {
width: 97%; width: 97%;

View File

@@ -6,7 +6,8 @@
class="adf-notification-history-menu_button" class="adf-notification-history-menu_button"
id="adf-notification-history-open-button" id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()"> (menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;" <mat-icon class="adf-notification-history-menu_button-icon"
matBadge="&#8288;"
[matBadgeHidden]="!notifications.length" [matBadgeHidden]="!notifications.length"
matBadgeColor="accent" matBadgeColor="accent"
matBadgeSize="small">notifications</mat-icon> matBadgeSize="small">notifications</mat-icon>

View File

@@ -2,11 +2,17 @@
.adf { .adf {
&-notification-history-menu_button#{$mat-button} { &-notification-history-menu_button#{$mat-button} {
margin-right: 0; margin-right: 8px;
border-radius: 90%; border-radius: 90%;
padding: 0; padding: 0;
min-width: 40px; min-width: 40px;
height: 40px; height: 40px;
.adf-notification-history-menu_button-icon {
font-size: 24px;
height: 24px;
width: 24px;
}
} }
&-notification-history-list #{$mat-subheader} { &-notification-history-list #{$mat-subheader} {