From 8bb38e6d86159ef84a7f95dbc4991f155f7a8100 Mon Sep 17 00:00:00 2001
From: Sebastian-Ion TINCU <Sebastian-Ion.TINCU@ext.ec.europa.eu>
Date: Fri, 24 Nov 2023 17:52:30 +0100
Subject: [PATCH] EDELIVERY-11677 SMP - General UI improvements
Refactor smp-dialog and reuse in the expiration warning dialog.
Update labels, remove unused imports.
Fix spacing issues in the Users systems settins.
---
.../dialogs/dialog/dialog.component.css | 9 ++--
.../dialogs/dialog/dialog.component.html | 54 +++++++++++--------
.../common/dialogs/dialog/dialog.component.ts | 8 ++-
.../expired-password-dialog.component.html | 3 +-
.../information-dialog.component.css | 42 ---------------
.../information-dialog.component.html | 25 ++-------
.../information-dialog.component.ts | 9 ++--
.../edit-domain/edit-domain.component.html | 2 +-
smp-angular/src/app/login/login.component.ts | 6 +--
.../admin-domain/admin-domain.component.html | 2 +-
.../admin-users/admin-user.component.html | 12 ++---
11 files changed, 61 insertions(+), 111 deletions(-)
delete mode 100644 smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.css
diff --git a/smp-angular/src/app/common/dialogs/dialog/dialog.component.css b/smp-angular/src/app/common/dialogs/dialog/dialog.component.css
index bd42de012..af49e3003 100644
--- a/smp-angular/src/app/common/dialogs/dialog/dialog.component.css
+++ b/smp-angular/src/app/common/dialogs/dialog/dialog.component.css
@@ -1,5 +1,6 @@
.dialog {
width: 500px;
+ align-content: center;
text-align: center;
}
@@ -14,11 +15,7 @@ label:hover, label:active, input:hover + label, input:active + label {
.divTableRow {
display: table-row;
-}
-
-.divTableHeading {
- background-color: #EEE;
- display: table-header-group;
+ width: 100%;
}
.divTableCell, .divTableHead {
@@ -26,12 +23,14 @@ label:hover, label:active, input:hover + label, input:active + label {
display: table-cell;
padding: 3px 3px;
text-align: center;
+ width: 100%;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
+ width: 100%;
}
.divTableFoot {
diff --git a/smp-angular/src/app/common/dialogs/dialog/dialog.component.html b/smp-angular/src/app/common/dialogs/dialog/dialog.component.html
index 078918ccf..96296435e 100644
--- a/smp-angular/src/app/common/dialogs/dialog/dialog.component.html
+++ b/smp-angular/src/app/common/dialogs/dialog/dialog.component.html
@@ -1,25 +1,35 @@
-<h1 mat-dialog-title>{{title}}</h1>
-<mat-dialog-content>{{text}}</mat-dialog-content>
+<div class="dialog">
+ <h1 mat-dialog-title>{{title}}</h1>
+ <mat-dialog-content>{{text}}</mat-dialog-content>
-<mat-dialog-actions>
- <div *ngIf="isConfirmationDialog()" class="divTableCell">
- <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
- <mat-icon>check_circle</mat-icon>
- <span>Yes</span>
- </button>
- </div>
+ <mat-dialog-actions>
+ <div *ngIf="isConfirmationDialog()" class="divTableCell">
+ <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
+ <mat-icon>check_circle</mat-icon>
+ <span>Yes</span>
+ </button>
+ </div>
- <div *ngIf="isConfirmationDialog()" class="divTableCell">
- <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
- <mat-icon>cancel</mat-icon>
- <span>No</span>
- </button>
- </div>
+ <div *ngIf="isConfirmationDialog()" class="divTableCell">
+ <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
+ <mat-icon>cancel</mat-icon>
+ <span>No</span>
+ </button>
+ </div>
- <div *ngIf="isInformationDialog()" class="divTableCell">
- <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
- <mat-icon>warning</mat-icon>
- <span>OK</span>
- </button>
- </div>
-</mat-dialog-actions>
+ <div *ngIf="isInformationDialog()" class="divTableCell">
+ <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
+ <mat-icon>warning</mat-icon>
+ <span>OK</span>
+ </button>
+ </div>
+
+ <div *ngIf="isWarningDialog()" class="divTableCell">
+ <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="closebuttondialog_id" tabindex="3">
+ <mat-icon>close</mat-icon>
+ <span>Close</span>
+ </button>
+ </div>
+
+ </mat-dialog-actions>
+</div>
diff --git a/smp-angular/src/app/common/dialogs/dialog/dialog.component.ts b/smp-angular/src/app/common/dialogs/dialog/dialog.component.ts
index 0745fa125..cafaa65f6 100644
--- a/smp-angular/src/app/common/dialogs/dialog/dialog.component.ts
+++ b/smp-angular/src/app/common/dialogs/dialog/dialog.component.ts
@@ -15,12 +15,16 @@ export class DialogComponent {
@Input() dialogRef: MatDialogRef<any>;
- public isConfirmationDialog() {
+ public isConfirmationDialog(): boolean {
return this.type === 'confirmation';
}
- public isInformationDialog() {
+ public isInformationDialog(): boolean {
return this.type === 'information';
}
+ public isWarningDialog(): boolean {
+ return this.type === 'warning';
+ }
+
}
diff --git a/smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html b/smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html
index 252d8bb9a..b1f725341 100644
--- a/smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html
+++ b/smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html
@@ -1,5 +1,4 @@
-<smp-dialog style="width: 400px"
- [title]="'Password about to expire'"
+<smp-dialog [title]="'Password about to expire'"
[text]="'Your password is more than three months old. Please change it as soon as possible!'"
[type]="'information'"
[dialogRef]="dialogRef">
diff --git a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.css b/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.css
deleted file mode 100644
index 5e50dc67f..000000000
--- a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.css
+++ /dev/null
@@ -1,42 +0,0 @@
-label:hover, label:active, input:hover + label, input:active + label {
- color: #3f51b5;
-}
-
-.divTable {
- display: table;
- width: 100%;
-}
-
-.divTableRow {
- display: table-row;
-}
-
-.divTableHeading {
- background-color: #EEE;
- display: table-header-group;
-}
-
-.divTableCell, .divTableHead {
- /*border: 1px solid #999999;*/
- display: table-cell;
- padding: 3px 3px;
- text-align: center;
-}
-
-.divTableHeading {
- background-color: #EEE;
- display: table-header-group;
- font-weight: bold;
-}
-
-.divTableFoot {
- background-color: #EEE;
- display: table-footer-group;
- font-weight: bold;
-}
-
-.divTableBody {
- display: table-row-group;
-}
-
-
diff --git a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.html b/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.html
index a4ffd839d..5ee925f95 100644
--- a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.html
+++ b/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.html
@@ -1,20 +1,5 @@
-<div style="width: 500px;text-align: center">
- <h1 mat-dialog-title>{{title}}</h1>
- <div class="panel">{{description}}</div>
- <div class="divTable">
- <div class="divTableBody">
-
- <div class="divTableRow">
-
-
- <div class="divTableCell">
- <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="closebuttondialog_id">
- <mat-icon>close</mat-icon>
- <span>Close</span>
- </button>
- </div>
-
- </div>
- </div>
- </div>
-</div>
+<smp-dialog [title]="title"
+ [text]="description"
+ [type]="'warning'"
+ [dialogRef]="dialogRef">
+</smp-dialog>
diff --git a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.ts b/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.ts
index 1daa3a3dd..84c159b84 100644
--- a/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.ts
+++ b/smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.ts
@@ -2,10 +2,7 @@ import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
@Component({
- selector: 'app-information-dialog',
- templateUrl: './information-dialog.component.html',
- styleUrls: ['./information-dialog.component.css']
-})
+ templateUrl: './information-dialog.component.html'})
export class InformationDialogComponent {
title: string;
@@ -13,7 +10,7 @@ export class InformationDialogComponent {
constructor(public dialogRef: MatDialogRef<InformationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
- this.title=data.title;
- this.description=data.description;
+ this.title = data.title;
+ this.description = data.description;
}
}
diff --git a/smp-angular/src/app/edit/edit-domain/edit-domain.component.html b/smp-angular/src/app/edit/edit-domain/edit-domain.component.html
index 1a987111e..e3fbd8612 100644
--- a/smp-angular/src/app/edit/edit-domain/edit-domain.component.html
+++ b/smp-angular/src/app/edit/edit-domain/edit-domain.component.html
@@ -39,7 +39,7 @@
<ng-template #searchDomainPanel>
<mat-form-field id="domain-filter">
- <mat-label>Filter Domain by domain code</mat-label>
+ <mat-label>Filter by domain code</mat-label>
<input matInput (keyup)="applyDomainFilter($event)" placeholder="Domain code" #inputDomainFilter>
</mat-form-field>
<table class="mat-elevation-z2" id="edit-domain-table" mat-table [dataSource]="dataSource" matSort>
diff --git a/smp-angular/src/app/login/login.component.ts b/smp-angular/src/app/login/login.component.ts
index d779d4397..6b53458f4 100644
--- a/smp-angular/src/app/login/login.component.ts
+++ b/smp-angular/src/app/login/login.component.ts
@@ -1,18 +1,17 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import {SecurityService} from '../security/security.service';
-import {HttpEventService} from '../http/http-event.service';
import {AlertMessageService} from '../common/alert-message/alert-message.service';
import {SecurityEventService} from '../security/security-event.service';
import {User} from '../security/user.model';
-import {MatDialogRef, MatDialog} from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
import {DefaultPasswordDialogComponent} from 'app/security/default-password-dialog/default-password-dialog.component';
import {Subscription} from 'rxjs';
import {ExpiredPasswordDialogComponent} from '../common/dialogs/expired-password-dialog/expired-password-dialog.component';
import {GlobalLookups} from "../common/global-lookups";
import {PasswordChangeDialogComponent} from "../common/dialogs/password-change-dialog/password-change-dialog.component";
import {InformationDialogComponent} from "../common/dialogs/information-dialog/information-dialog.component";
-import {DatePipe, formatDate} from "@angular/common";
+import {formatDate} from "@angular/common";
import {EntityStatus} from "../common/enums/entity-status.enum";
@Component({
@@ -32,7 +31,6 @@ export class LoginComponent implements OnInit, OnDestroy {
private router: Router,
public lookups: GlobalLookups,
private securityService: SecurityService,
- private httpEventService: HttpEventService,
private alertService: AlertMessageService,
private securityEventService: SecurityEventService,
private dialog: MatDialog) {
diff --git a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
index 214a7a645..00847e134 100644
--- a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
+++ b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
@@ -56,7 +56,7 @@
<ng-template #searchDomainPanel>
<mat-form-field id="domain-filter">
- <mat-label>Filter Domain by domain code</mat-label>
+ <mat-label>Filter by domain code</mat-label>
<input matInput (keyup)="applyDomainFilter($event)" #inputDomainFilter>
</mat-form-field>
diff --git a/smp-angular/src/app/system-settings/admin-users/admin-user.component.html b/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
index a43284beb..1fd0f3980 100644
--- a/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
+++ b/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
@@ -17,17 +17,17 @@
</div>
<ng-template #searchUserPanel>
- <mat-form-field id="domain-filter">
- <mat-label>Filter Users</mat-label>
+ <mat-form-field id="user-filter">
+ <mat-label>Filter by username</mat-label>
<input matInput (keyup)="applyUserFilter($event)" placeholder="User name or full name" #inputUserFilter>
</mat-form-field>
- <mat-toolbar class ="mat-elevation-z2">
- <mat-toolbar-row class="smp-toolbar-row">
+ <mat-toolbar class="mat-elevation-z2">
+ <mat-toolbar-row class="smp-toolbar-row">
<button mat-raised-button
mat-flat-button color="primary"
(click)="onCreateUserClicked()"
- >Create User
+ >Create user
</button>
<button mat-raised-button
@@ -39,7 +39,7 @@
</button>
</mat-toolbar-row>
</mat-toolbar>
- <table class="mat-elevation-z2" id="admin-domain-table" mat-table [dataSource]="userData" >
+ <table class="mat-elevation-z2" id="admin-user-table" mat-table [dataSource]="userData" >
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef >Username</th>
<td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.username}}</td>
--
GitLab