mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-7570] [ADF] Create generic dialog component (#9724)
This commit is contained in:
committed by
GitHub
parent
0ea35b1f12
commit
f1167b1bc5
@@ -22,7 +22,6 @@ export * from './category-selector.dialog';
|
||||
|
||||
export * from './dialog.module';
|
||||
export * from './library/library.dialog';
|
||||
export * from './dialog';
|
||||
|
||||
export * from './download-zip/download-zip.dialog';
|
||||
export * from './download-zip/download-zip.dialog.module';
|
||||
|
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { TemplateRef } from '@angular/core';
|
||||
import { TemplateRef, Type } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { DialogSizes } from './dialog.model';
|
||||
|
||||
@@ -28,8 +28,17 @@ export interface DialogData {
|
||||
isCloseButtonHidden?: boolean;
|
||||
isCancelButtonHidden?: boolean;
|
||||
dialogSize?: DialogSizes;
|
||||
contentText?: string;
|
||||
contentComponent?: Type<any>;
|
||||
contentTemplate?: TemplateRef<any>;
|
||||
actionsTemplate?: TemplateRef<any>;
|
||||
descriptionTemplate?: TemplateRef<any>;
|
||||
headerIcon?: string;
|
||||
additionalActionButtons?: AdditionalDialogActionButton[];
|
||||
}
|
||||
|
||||
export interface AdditionalDialogActionButton {
|
||||
title: string;
|
||||
onClick: (args?: any) => void;
|
||||
class?: string;
|
||||
}
|
@@ -1,12 +1,12 @@
|
||||
<div
|
||||
data-automation-id="adf-dialog-container"
|
||||
class="adf-dialog-container {{dialogSize}}"
|
||||
class="adf-dialog-container {{ dialogSize }}"
|
||||
>
|
||||
<div
|
||||
mat-dialog-title
|
||||
data-automation-id="adf-dialog-header"
|
||||
class="adf-dialog-header"
|
||||
[ngClass]="{'adf-centered-header': data.headerIcon}"
|
||||
[ngClass]="{ 'adf-centered-header': data.headerIcon }"
|
||||
>
|
||||
<div class="adf-dialog-title-container" [ngClass]="{ 'adf-centered-title': data.headerIcon }">
|
||||
<mat-icon
|
||||
@@ -14,9 +14,9 @@
|
||||
color="primary"
|
||||
class="adf-dialog-header-icon"
|
||||
>
|
||||
{{data.headerIcon}}
|
||||
{{ data.headerIcon }}
|
||||
</mat-icon>
|
||||
<h2 class="adf-dialog-title">{{data.title}}</h2>
|
||||
<h2 class="adf-dialog-title">{{ data.title | translate }}</h2>
|
||||
</div>
|
||||
<button
|
||||
*ngIf="!isCloseButtonHidden"
|
||||
@@ -32,26 +32,45 @@
|
||||
[ngTemplateOutlet]="data.descriptionTemplate"
|
||||
[ngClass]="{ 'adf-description': data.description || data.descriptionTemplate }"
|
||||
>
|
||||
<ng-container>{{data.description}}</ng-container>
|
||||
<ng-container>{{ data.description }}</ng-container>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content class="adf-dialog-content">
|
||||
<mat-dialog-content *ngIf="data.contentTemplate || data.contentComponent || data.contentText" class="adf-dialog-content">
|
||||
<ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
|
||||
<ng-container [ngComponentOutlet]="data.contentComponent"></ng-container>
|
||||
<ng-container>{{ data.contentText }}</ng-container>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions class="adf-dialog-actions" [ngClass]="{ 'adf-additional-actions': data.actionsTemplate }">
|
||||
<div>
|
||||
<mat-dialog-actions
|
||||
class="adf-dialog-actions"
|
||||
[ngClass]="{ 'adf-additional-actions': data.actionsTemplate || additionalActionButtons }"
|
||||
>
|
||||
<div *ngIf="!additionalActionButtons && data.actionsTemplate">
|
||||
<ng-container [ngTemplateOutlet]="data.actionsTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!data.actionsTemplate && additionalActionButtons">
|
||||
<button
|
||||
*ngFor="let additionalButton of additionalActionButtons"
|
||||
mat-button
|
||||
color="primary"
|
||||
class="{{ additionalButton.class }}"
|
||||
(click)="additionalButton.onClick()"
|
||||
>
|
||||
{{ additionalButton.title | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
*ngIf="!isCancelButtonHidden"
|
||||
mat-button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
mat-dialog-close
|
||||
adf-auto-focus
|
||||
data-automation-id="adf-dialog-actions-cancel"
|
||||
>
|
||||
{{cancelButtonTitle | translate}}
|
||||
{{ cancelButtonTitle | translate }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -61,7 +80,7 @@
|
||||
[disabled]="isConfirmButtonDisabled$ | async"
|
||||
(click)="onConfirm()"
|
||||
>
|
||||
{{confirmButtonTitle | translate}}
|
||||
{{ confirmButtonTitle | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</mat-dialog-actions>
|
@@ -12,21 +12,97 @@ $dialog-small-s-height: 360px;
|
||||
$l-screen: 1920px;
|
||||
$m-screen: 1680px;
|
||||
$s-screen: 1440px;
|
||||
$xs-screen: 375px;
|
||||
$xs-screen: 500px;
|
||||
$xxs-screen: 375px;
|
||||
|
||||
$breakpoint-alert-with-additional-buttons-centered: 1469px;
|
||||
$breakpoint-medium-with-additional-buttons-centered: 1469px;
|
||||
$breakpoint-alert-with-additional-buttons-centered: 1501px;
|
||||
$breakpoint-medium-with-additional-buttons-centered: 1002px;
|
||||
$breakpoint-large-with-additional-buttons-centered: 642px;
|
||||
$breakpoint-medium-screen: 920px;
|
||||
|
||||
$dialog-padding: 24px;
|
||||
|
||||
.adf-large-dialog-panel,
|
||||
.adf-medium-dialog-panel,
|
||||
.adf-alert-dialog-panel {
|
||||
min-width: calc(269px - $dialog-padding * 2);
|
||||
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
.adf-additional-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-large-dialog-panel {
|
||||
max-width: calc(56vw);
|
||||
|
||||
@media screen and (min-width: $l-screen) {
|
||||
max-width: calc($dialog-large-l-width);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xs-screen) {
|
||||
max-width: calc(100vw);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-large-with-additional-buttons-centered) {
|
||||
.adf-additional-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-medium-dialog-panel {
|
||||
max-width: calc(36vw);
|
||||
|
||||
@media screen and (min-width: $l-screen) {
|
||||
max-width: calc($dialog-medium-l-width);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-medium-screen) {
|
||||
max-width: calc(84vw);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
max-width: calc(100vw);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-medium-with-additional-buttons-centered) {
|
||||
.adf-additional-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-alert-dialog-panel {
|
||||
max-width: 24vw;
|
||||
|
||||
@media screen and (min-width: $m-screen) {
|
||||
max-width: $dialog-small-l-width;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $s-screen) {
|
||||
max-width: $dialog-small-s-width;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
max-width: 84vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
|
||||
.adf-additional-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dialog-container {
|
||||
min-width: calc(269px - $dialog-padding * 2);
|
||||
min-height: calc(300px - $dialog-padding * 2);
|
||||
min-height: calc(188px - $dialog-padding * 2);
|
||||
max-height: calc(84vh - $dialog-padding * 2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(84vh - $dialog-padding * 2);
|
||||
|
||||
.adf-dialog-header,
|
||||
.adf-dialog-content,
|
||||
@@ -99,40 +175,16 @@ $dialog-padding: 24px;
|
||||
padding-top: $dialog-padding;
|
||||
text-transform: capitalize;
|
||||
min-height: auto;
|
||||
|
||||
// TODO: Update after migration to Angular 15
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-button.mat-button-base + .mat-button-base {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
// TODO: Update after migration to Angular 15
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-button {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Update after migration to Angular 15
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-dialog-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&.adf-large {
|
||||
max-width: calc(56vw - $dialog-padding * 2);
|
||||
max-height: calc(84vh - $dialog-padding * 2);
|
||||
|
||||
@media screen and (min-width: $l-screen) {
|
||||
max-width: calc($dialog-large-l-width - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (min-height: $dialog-large-l-width) {
|
||||
max-height: calc($dialog-large-l-height - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xs-screen) {
|
||||
max-width: calc(100vw - $dialog-padding * 2);
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
max-height: calc(100vh - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@@ -144,15 +196,9 @@ $dialog-padding: 24px;
|
||||
}
|
||||
|
||||
&.adf-medium {
|
||||
max-width: calc(36vw - $dialog-padding * 2);
|
||||
max-height: calc(72vh - $dialog-padding * 2);
|
||||
|
||||
@media screen and (min-width: $l-screen) {
|
||||
max-width: calc($dialog-medium-l-width - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xs-screen) {
|
||||
max-width: calc(100vw - $dialog-padding * 2);
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
max-height: calc(100vh - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@@ -189,26 +235,22 @@ $dialog-padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: calc(24vw - $dialog-padding * 2);
|
||||
max-height: calc(40vh - $dialog-padding * 2);
|
||||
|
||||
@media screen and (min-width: $m-screen) {
|
||||
max-width: calc($dialog-small-l-width - $dialog-padding * 2);
|
||||
max-height: calc($dialog-small-l-height - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $s-screen) {
|
||||
max-width: calc($dialog-small-s-width - $dialog-padding * 2);
|
||||
max-height: calc($dialog-small-s-height - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xs-screen) {
|
||||
max-width: calc(84vw - $dialog-padding * 2);
|
||||
max-height: calc(41vh - $dialog-padding * 2);
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
max-height: calc(56vh - $dialog-padding * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-height: $dialog-small-l-height) {
|
||||
max-height: calc(84vh - $dialog-padding * 2);
|
||||
@media screen and (max-height: $xxs-screen) {
|
||||
max-height: 84vh;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
|
||||
@@ -218,9 +260,25 @@ $dialog-padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xs-screen) {
|
||||
@media screen and (max-width: $xxs-screen) {
|
||||
.adf-additional-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-additional-actions {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
// TODO: Update after migration to Angular 15
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-dialog-actions .mat-button-base + .mat-button-base {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
// TODO: Update after migration to Angular 15
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-dialog-container {
|
||||
border-radius: 8px;
|
||||
}
|
@@ -17,10 +17,10 @@
|
||||
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ContentTestingModule } from '../../testing/content.testing.module';
|
||||
import { DialogComponent } from './dialog.component';
|
||||
import { DialogData } from './dialog-data.interface';
|
||||
import { DialogSize } from './dialog.model';
|
||||
import { CoreTestingModule } from '../../testing';
|
||||
|
||||
describe('DialogComponent', () => {
|
||||
let component: DialogComponent;
|
||||
@@ -36,12 +36,13 @@ describe('DialogComponent', () => {
|
||||
};
|
||||
|
||||
const dialogRef = {
|
||||
close: jasmine.createSpy('close')
|
||||
close: jasmine.createSpy('close'),
|
||||
addPanelClass: jasmine.createSpy('addPanelClass')
|
||||
};
|
||||
|
||||
const setupBeforeEach = (dialogOptions: DialogData = data) => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ContentTestingModule],
|
||||
imports: [CoreTestingModule],
|
||||
providers: [
|
||||
{ provide: MAT_DIALOG_DATA, useValue: dialogOptions },
|
||||
{ provide: MatDialogRef, useValue: dialogRef }
|
||||
@@ -54,8 +55,7 @@ describe('DialogComponent', () => {
|
||||
|
||||
confirmButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-confirm"]');
|
||||
closeButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-close-button"]');
|
||||
cancelButton = fixture.nativeElement.querySelector(
|
||||
'[data-automation-id="adf-dialog-actions-cancel"]');
|
||||
cancelButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-cancel"]');
|
||||
dialogContainer = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dialog-container"]');
|
||||
};
|
||||
|
||||
@@ -85,7 +85,7 @@ describe('DialogComponent', () => {
|
||||
describe('confirm action', () => {
|
||||
const mockButtonTitle = 'mockTitle';
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle});
|
||||
setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle });
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
@@ -115,7 +115,7 @@ describe('DialogComponent', () => {
|
||||
|
||||
it('should close dialog', () => {
|
||||
component.onConfirm();
|
||||
expect(dialogRef.close).toHaveBeenCalled();
|
||||
expect(dialogRef.close).toHaveBeenCalledWith(true);
|
||||
});
|
||||
|
||||
it('should set correct button title', () => {
|
||||
@@ -145,24 +145,23 @@ describe('DialogComponent', () => {
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({
|
||||
...data,
|
||||
isCloseButtonHidden: true,
|
||||
isCloseButtonHidden: true,
|
||||
isCancelButtonHidden: true
|
||||
});
|
||||
});
|
||||
|
||||
it ('should hide close button', () => {
|
||||
it('should hide close button', () => {
|
||||
expect(closeButton).toBeNull();
|
||||
});
|
||||
|
||||
|
||||
it ('should hide close button', () => {
|
||||
it('should hide close button', () => {
|
||||
expect(cancelButton).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when dialog has large size', () => {
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Large});
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Large });
|
||||
});
|
||||
|
||||
it('should have correct dialogSize value', () => {
|
||||
@@ -184,7 +183,7 @@ describe('DialogComponent', () => {
|
||||
|
||||
describe('when dialog has medium size', () => {
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Medium});
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Medium });
|
||||
});
|
||||
|
||||
it('should have correct dialogSize value', () => {
|
||||
@@ -207,7 +206,7 @@ describe('DialogComponent', () => {
|
||||
describe('when dialog has alert size', () => {
|
||||
describe('when dialog has not an ican', () => {
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Alert});
|
||||
setupBeforeEach({ ...data, dialogSize: DialogSize.Alert });
|
||||
});
|
||||
|
||||
it('should have correct dialogSize value', () => {
|
||||
@@ -237,7 +236,7 @@ describe('DialogComponent', () => {
|
||||
beforeEach(() => {
|
||||
setupBeforeEach({
|
||||
...data,
|
||||
dialogSize: DialogSize.Alert,
|
||||
dialogSize: DialogSize.Alert,
|
||||
headerIcon: 'access_time'
|
||||
});
|
||||
});
|
||||
@@ -248,7 +247,6 @@ describe('DialogComponent', () => {
|
||||
expect(headerIcon).toBeDefined();
|
||||
});
|
||||
|
||||
|
||||
it('should center header content', () => {
|
||||
const header = fixture.nativeElement.querySelector('.adf-centered-header');
|
||||
|
@@ -17,7 +17,7 @@
|
||||
|
||||
import { Component, Inject, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { DialogData } from './dialog-data.interface';
|
||||
import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import { DialogSize, DialogSizes } from './dialog.model';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
@@ -37,10 +37,10 @@ export class DialogComponent implements OnDestroy {
|
||||
isConfirmButtonDisabled$ = new BehaviorSubject<boolean>(false);
|
||||
isCloseButtonHidden: boolean;
|
||||
isCancelButtonHidden: boolean;
|
||||
dialogSize: DialogSizes;
|
||||
confirmButtonTitle: string;
|
||||
cancelButtonTitle: string;
|
||||
disableSubmitButton = false;
|
||||
dialogSize: DialogSizes;
|
||||
additionalActionButtons: AdditionalDialogActionButton[];
|
||||
|
||||
private onDestroy$ = new Subject<void>();
|
||||
|
||||
@@ -55,6 +55,8 @@ export class DialogComponent implements OnDestroy {
|
||||
this.dialogSize = data.dialogSize || DialogSize.Medium;
|
||||
this.confirmButtonTitle = data.confirmButtonTitle || 'COMMON.APPLY';
|
||||
this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
|
||||
this.additionalActionButtons = data.additionalActionButtons;
|
||||
this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
|
||||
|
||||
if (data.isConfirmButtonDisabled$) {
|
||||
data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));
|
||||
@@ -64,7 +66,7 @@ export class DialogComponent implements OnDestroy {
|
||||
|
||||
onConfirm() {
|
||||
this.isConfirmButtonDisabled$.next(true);
|
||||
this.dialogRef.close();
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
@@ -21,4 +21,4 @@ export const DialogSize = {
|
||||
Alert: 'adf-alert'
|
||||
} as const;
|
||||
|
||||
export type DialogSizes = typeof DialogSize[keyof typeof DialogSize];
|
||||
export type DialogSizes = (typeof DialogSize)[keyof typeof DialogSize];
|
@@ -20,3 +20,4 @@ export * from './edit-json/edit-json.dialog.module';
|
||||
export * from './unsaved-changes-dialog/unsaved-changes-dialog.component';
|
||||
export * from './unsaved-changes-dialog/unsaved-changes-dialog.module';
|
||||
export * from './unsaved-changes-dialog/unsaved-changes.guard';
|
||||
export * from './dialog';
|
||||
|
Reference in New Issue
Block a user