MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling fixes on dialog close buttons

This commit is contained in:
CITE\spapacharalampous 2024-09-03 15:47:08 +03:00
parent 0bdb3aa53c
commit 83ed15094b
29 changed files with 68 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
View File

@ -1,5 +1,5 @@
<div class="template-container" *ngIf="descriptionTemplate && formGroup">
<div mat-dialog-title class="row align-items-center header">
<div mat-dialog-title class="row d-flex align-items-center header">
<div class="col"><span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}</span></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>

2
frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
View File

@ -14,7 +14,7 @@
</button>
</div>
<div class="col-auto pl-0 dense-4" >
<button mat-icon-button (click)="close()">
<button mat-icon-button tabindex="-1" (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

9
frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html
View File

@ -1,8 +1,11 @@
<div class="description-copy-dialog">
<div mat-dialog-title class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">{{'DESCRIPTION-COPY-DIALOG.TITLE' | translate}}</div>
<div class="col-auto ml-auto close-btn" (click)="close()"><mat-icon class="close-icon">close</mat-icon></div>
<div mat-dialog-title class="row d-flex align-items-center">
<div class="col"><span>{{'DESCRIPTION-COPY-DIALOG.TITLE' | translate}}</span></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="confirmation-message">
<div class="row mt-3">
<div class="col-12">

18
frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss
View File

@ -2,12 +2,8 @@
padding-bottom: 20px;
}
.close-btn {
cursor: pointer;
}
.description-copy-dialog {
margin-bottom: 1.125rem;
margin: 1.125rem 0;
}
.cancel-btn {
@ -35,15 +31,3 @@ min-width: 101px;
background-color: var(--primary-color);
color: #ffffff;
}
.close-icon {
cursor: pointer;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}

12
frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html
View File

@ -1,10 +1,10 @@
<div class="mt-3 pl-3 pr-3 pb-2 pt-1">
<div class="row">
<div class="col-auto">
<div class="row align-items-center">
<div class="col">
<h4 class="mt-1"> {{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.TITLE' | translate}} {{ data.label }}</h4>
</div>
<div class="col-auto ml-auto">
<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>
@ -18,9 +18,9 @@
</mat-dialog-content>
<mat-dialog-actions class="mt-3 mb-3 pb-1">
<div class="col-auto pb-1">
<button type="button" class="normal-btn-light-sm" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
<button mat-button type="button" tabindex="-1" class="rounded-btn primary-inverted" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
</div>
<div class="ml-auto col-auto pb-1">
<button type="button" class="normal-btn-sm" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>
<button mat-button type="button" class="rounded-btn primary" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>
</div>
</mat-dialog-actions>

4
frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.scss
View File

@ -1,4 +0,0 @@
.close-btn:hover{
cursor: pointer;
}

4
frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html
View File

@ -1,10 +1,10 @@
<div class="form-container">
<div mat-dialog-title class="row d-flex p-0 mb-4">
<div mat-dialog-title class="row d-flex align-items-center p-0 mb-4">
<div class="col p-0">
<span class="title">{{'DASHBOARD.SELECT-PLAN' | translate}}</span>
</div>
<div class="col-auto p-0">
<mat-icon class="close-icon" (click)="close()">close</mat-icon>
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row mt-2 mb-4">

12
frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
View File

@ -12,18 +12,6 @@
width: 8.44rem;
}
.close-icon {
cursor: pointer;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.content {
margin: 2.17rem 0rem 1.1875rem 0rem;
}

10
frontend/src/app/ui/faq/dialog/faq-dialog.component.html
View File

@ -1,16 +1,16 @@
<div class="faq">
<div class="d-flex flex-row">
<div mat-dialog-title class="col-auto">
<div mat-dialog-title class="row d-flex align-items-center">
<div class="col">
{{'FAQ.TITLE' | translate}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon class="clear-icon">close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="row pr-0">
<app-faq-content [isDialog]="isDialog"></app-faq-content>
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button mat-dialog-close class="cancel-btn" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
<div class="ml-auto col-auto"><button mat-button tabindex="-1" mat-dialog-close class="cancel-btn" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
</div>
</div>

2
frontend/src/app/ui/faq/dialog/faq-dialog.component.scss
View File

@ -27,7 +27,7 @@
}
.faq {
margin-bottom: 1.125rem;
margin: 1.125rem 0;
}
.cancel-btn {

6
frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
View File

@ -1,7 +1,9 @@
<div class="clone-dialog container-fluid">
<div class="row mt-3">
<div class="row align-items-center mt-3">
<div class="col heading-1">{{'PLAN-CLONE-DIALOG.TITLE' | translate}}</div>
<span class="col-auto ml-auto align-self-center" (click)="close()"><mat-icon class="close-icon">close</mat-icon></span>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<!-- Title Field -->
<div class="row">

13
frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss
View File

@ -21,19 +21,6 @@
margin-bottom: 0.625rem;
}
.close-icon {
cursor: pointer;
margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.cancel-btn {
min-width: 101px;
height: 43px;

6
frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html
View File

@ -1,10 +1,10 @@
<div class="plan-invitation-dialog container-fluid" *ngIf="formGroup">
<div class="row">
<div class="row align-items-center">
<div class="col">
<h1 class="title">{{'PLAN-USER-INVITATION-DIALOG.TITLE' | translate}}</h1>
</div>
<div class="col-auto" (click)="closeDialog()">
<mat-icon class="close-icon">close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="row">

13
frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss
View File

@ -7,24 +7,11 @@
padding: 0.28em 0.34em 0em 1.125em;
}
.close-icon {
cursor: pointer;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.title {
font-size: 2.375em;
font-weight: lighter;
color: #000000;
opacity: 0.8;
margin-bottom: 0.842em;
}
.content {

6
frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
View File

@ -1,7 +1,9 @@
<div class="new-version-dialog container-fluid">
<div class="row mt-3">
<div class="row align-items-center mt-3">
<div class="col heading-1">{{'PLAN-NEW-VERSION-DIALOG.TITLE' | translate}}</div>
<span class="col-auto ml-auto align-self-center" (click)="close()"><mat-icon class="close-icon">close</mat-icon></span>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<!-- Title Field -->
<div class="row">

13
frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss
View File

@ -21,19 +21,6 @@
margin-bottom: 0.625rem;
}
.close-icon {
cursor: pointer;
margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.cancel-btn {
min-width: 101px;
height: 43px;

8
frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
View File

@ -1,8 +1,8 @@
<div class="start-new-plan-dialog-wrapper">
<div class="d-flex justify-content-between">
<div class="pl-0 col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-plan-logo.png" onerror="this.style.display='none'"></a></div>
<div class="col-auto close-btn" (click)="close()">
<mat-icon class="close-icon">close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
@ -17,7 +17,7 @@
<div class="d-flex justify-content-between align-items-center">
<div class="import-file col-auto p-0">
<div class="pr-2">
<button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<button mat-button tabindex="-1" type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
</button>
@ -28,7 +28,7 @@
</div>
<div class="START-NEW-PLAN col-auto p-0">
<div class="pr-2">
<button mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<button mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<mat-icon>chevron_right</mat-icon>
{{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
</button>

12
frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
View File

@ -19,18 +19,6 @@
width: 8.44rem;
}
.close-icon {
cursor: pointer;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.content {
margin: 2.17rem 2.304rem 1.1875rem 3.065rem;
}

18
frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html
View File

@ -1,10 +1,10 @@
<div class="plan-delete-dialog">
<div class="row mt-3">
<div mat-dialog-title class="col-12 pr-1 d-flex justify-content-between">
<span class="text-danger">{{'PLAN-DELETE-DIALOG.WARNING' | translate}}</span>
<mat-icon class="close-icon" (click)="close()">close</mat-icon>
</div>
<div mat-dialog-title class="mt-2 row d-flex align-items-center">
<div class="col"><span class="text-danger">{{'PLAN-DELETE-DIALOG.WARNING' | translate}}</span></div>
<div>
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<mat-dialog-content>
<div class="row d-flex flex-row mb-2">
<div class="col message pb-4 pl-3">{{'PLAN-DELETE-DIALOG.DELETE-ITEM' | translate}}</div>
</div>
@ -16,7 +16,7 @@
</ng-container>
</div>
<div class="row" style="justify-content: space-between;">
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
<div class="col-auto"><button mat-button type="button" tabindex="-1" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-button type="button" tabindex="-1" (click)="confirm()" class="rounded-btn delete-inverted">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
</div>
</div>
</mat-dialog-content>

44
frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.scss
View File

@ -1,44 +0,0 @@
.plan-delete-dialog {
padding: 24px;
overflow: hidden;
.confirmation {
padding-bottom: 20px;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.cancel {
background-color: #aaaaaa;
color: #ffffff;
}
.cancel-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.delete {
background-color: #ba2c2c;
color: #ffffff;
}
.delete-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
border-radius: 30px;
opacity: 1;
}
}

6
frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
View File

@ -1,11 +1,11 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<div mat-dialog-title>
<div class="row">
<div class="col-auto">
<div class="col">
{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>

3
frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss
View File

@ -1,3 +0,0 @@
.close-btn {
cursor: pointer;
}

2
frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html
View File

@ -5,7 +5,7 @@
<span class="title">{{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}</span>
</div>
<div class="col-auto">
<mat-icon class="close-icon" (click)="closeDialog()">close</mat-icon>
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>

9
frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
View File

@ -20,15 +20,6 @@
margin-left: 37px;
}
.close-icon {
cursor: pointer;
}
.close-icon:hover {
background-color: #fefefe6e !important;
border-radius: 50%;
}
.cancel-btn {
min-width: 101px;
height: 43px;

12
frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
View File

@ -1,8 +1,10 @@
<div class="container-fluid">
<div class="row mt-3">
<div mat-dialog-title class="col-12 pr-1 d-flex justify-content-between">
<div mat-dialog-title class="row d-flex mt-3">
<div class="col">
<span class="mr-3 title">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</span>
<mat-icon class="close-icon" (click)="onClose()">close</mat-icon>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="onClose()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row mt-3 mr-3 mb-3">
@ -18,8 +20,8 @@
</div>
</div>
<div class="row mt-3 mb-3">
<div class="col-12 actions">
<button mat-button type="button" class="ml-auto cancel-btn" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
<div class="ml-auto col-auto">
<button mat-button type="button" tabindex="-1" class="rounded-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
</div>
</div>
</div>

5
frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
View File

@ -76,11 +76,6 @@ min-width: 101px;
font-weight: 500;
}
.actions {
display: flex;
flex-direction: row;
}
.error-list {
margin-bottom: 0;
padding-left: 1.5rem;

14
frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
View File

@ -1,16 +1,16 @@
<div class="confirmation-dialog">
<div class="row d-flex flex-row" *ngIf="data.icon || data.warning">
<div class="col-auto close-btn justify-content-start" *ngIf="data.icon">
<mat-icon color="warn">{{ data.icon }}</mat-icon>
<div class="row" *ngIf="data.icon || data.warning">
<div class="col-auto" *ngIf="data.icon">
<button mat-icon-button><mat-icon color="warn">{{ data.icon }}</mat-icon></button>
</div>
<div *ngIf="data.warning" class="col justify-content-center warn-text"> <h5><strong>{{ data.warning }}</strong></h5></div>
<div class="col-auto close-btn justify-content-end" (click)="close()">
<mat-icon>close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row justify-content-end mb-1" *ngIf="!data.icon && !data.warning">
<div class="col-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row d-flex flex-row mb-2">

9
frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss
View File

@ -12,15 +12,6 @@
padding: 1em;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.warn-text {
}
.cancel {
background-color: #aaaaaa;
color: #ffffff;

6
frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html
View File

@ -1,5 +1,5 @@
<div class="mt-3 pl-3 pr-3 pb-2 pt-1">
<div *ngIf="data.icon" class="row">
<div *ngIf="data.icon" class="row align-items-center">
<div class="col-auto close-btn justify-content-start">
<mat-icon color="warn">{{ data.icon }}</mat-icon>
</div>
@ -11,8 +11,8 @@
</div>
</div>
<div class="row">
<div class="col message pb-4 pl-3">{{ data.message }}</div>
<div class="row align-items-center">
<div class="col message pl-3">{{ data.message }}</div>
<div *ngIf="!data.icon" class="col-auto justify-content-end">
<button mat-icon-button tabindex="-1" (click)="close()">
<mat-icon>close</mat-icon>