From 18422ff6727bd0b47ebe573b39fe08ca7fa544db Mon Sep 17 00:00:00 2001
From: vondrp <vondrovic@centrum.cz>
Date: Tue, 16 Apr 2024 21:06:18 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Re=20#11277=20-=20vytvo=C5=99en=C3=AD=20kom?=
=?UTF-8?q?ponenty=20skupiny=20CustomButton=20+=20jej=C3=AD=20otestov?=
=?UTF-8?q?=C3=A1n=C3=AD=20v=20r=C3=A1mci=20dialog=20window?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/app.module.ts | 4 ++-
src/app/model/custom-button-item.interface.ts | 19 +++++++++++
.../custom-button-group.component.css | 0
.../custom-button-group.component.html | 23 +++++++++++++
.../custom-button-group.component.spec.ts | 23 +++++++++++++
.../custom-button-group.component.ts | 20 +++++++++++
.../dialog-window.component.html | 34 ++++++++++++++-----
7 files changed, 114 insertions(+), 9 deletions(-)
create mode 100644 src/app/model/custom-button-item.interface.ts
create mode 100644 src/app/view/components/custom-button-group/custom-button-group.component.css
create mode 100644 src/app/view/components/custom-button-group/custom-button-group.component.html
create mode 100644 src/app/view/components/custom-button-group/custom-button-group.component.spec.ts
create mode 100644 src/app/view/components/custom-button-group/custom-button-group.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6639de4..64779e9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { CapturedActionComponent } from './view/components/captured-action/captu
import { FinalStageComponent } from './view/pages/final-stage/final-stage.component';
import { FinalStateComponent } from './view/components/final-state/final-state.component';
import { DialogWindowComponent } from './view/components/dialog-window/dialog-window.component';
+import { CustomButtonGroupComponent } from './view/components/custom-button-group/custom-button-group.component';
@NgModule({
declarations: [
@@ -25,7 +26,8 @@ import { DialogWindowComponent } from './view/components/dialog-window/dialog-wi
CapturedActionComponent,
FinalStageComponent,
FinalStateComponent,
- DialogWindowComponent
+ DialogWindowComponent,
+ CustomButtonGroupComponent
],
imports: [
BrowserModule
diff --git a/src/app/model/custom-button-item.interface.ts b/src/app/model/custom-button-item.interface.ts
new file mode 100644
index 0000000..36d6740
--- /dev/null
+++ b/src/app/model/custom-button-item.interface.ts
@@ -0,0 +1,19 @@
+import { DropdownItem } from "./dropdown-item.interface";
+
+export interface CustomButtonItem {
+ buttonText: string;
+
+ icon?: string;
+ iconPosition?: 'left' | 'right';
+
+ color?: string;
+ backgroundColor?: string;
+ size?: 'XS' | 'S' | 'M' | 'L';
+ additionalClasses?: string;
+ additionalStyles?: string;
+ iconType?: 'fontawesome' | 'custom' | 'image';
+ isDropdown?: boolean;
+ dropdownItems?: DropdownItem[];
+ isDropdownUp?: boolean;
+ clickFunction?: () => void;
+}
diff --git a/src/app/view/components/custom-button-group/custom-button-group.component.css b/src/app/view/components/custom-button-group/custom-button-group.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/view/components/custom-button-group/custom-button-group.component.html b/src/app/view/components/custom-button-group/custom-button-group.component.html
new file mode 100644
index 0000000..c995555
--- /dev/null
+++ b/src/app/view/components/custom-button-group/custom-button-group.component.html
@@ -0,0 +1,23 @@
+<div class="custom-button-group">
+ <ng-content></ng-content>
+ <!--
+ <div *ngFor="let button of buttons" class="custom-button-item" (click)="onButtonClick(button)">
+ <custom-button
+ [buttonText]="button.buttonText"
+ [icon]="button.icon || ''"
+ [iconType]="button.iconType || 'custom'"
+ [iconPosition]="button.iconPosition || 'left'"
+ [color]="button.color || ''"
+ [backgroundColor]="button.backgroundColor || ''"
+ [size]="button.size || 'M'"
+ [additionalClasses]="button.additionalClasses || ''"
+ [additionalStyles]="button.additionalStyles || ''"
+ [isDropdown]="button.isDropdown || false"
+ [dropdownItems]="button.dropdownItems || []"
+ [isDropdownUp]="button.isDropdownUp || false"
+ (click)="onButtonClick(button)"
+ >
+ </custom-button>
+ </div>
+ -->
+</div>
\ No newline at end of file
diff --git a/src/app/view/components/custom-button-group/custom-button-group.component.spec.ts b/src/app/view/components/custom-button-group/custom-button-group.component.spec.ts
new file mode 100644
index 0000000..6a0f885
--- /dev/null
+++ b/src/app/view/components/custom-button-group/custom-button-group.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomButtonGroupComponent } from './custom-button-group.component';
+
+describe('CustomButtonGroupComponent', () => {
+ let component: CustomButtonGroupComponent;
+ let fixture: ComponentFixture<CustomButtonGroupComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CustomButtonGroupComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(CustomButtonGroupComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/view/components/custom-button-group/custom-button-group.component.ts b/src/app/view/components/custom-button-group/custom-button-group.component.ts
new file mode 100644
index 0000000..c62f092
--- /dev/null
+++ b/src/app/view/components/custom-button-group/custom-button-group.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, Output, EventEmitter} from '@angular/core';
+
+import { CustomButtonItem } from 'src/app/model/custom-button-item.interface';
+
+@Component({
+ selector: 'custom-button-group',
+ templateUrl: './custom-button-group.component.html',
+ styleUrls: ['./custom-button-group.component.css']
+})
+export class CustomButtonGroupComponent {
+ @Input() buttons: CustomButtonItem[] = [];
+
+ @Output() buttonClicked: EventEmitter<CustomButtonItem> = new EventEmitter<CustomButtonItem>();
+
+ constructor() { }
+
+ onButtonClick(button: CustomButtonItem): void {
+ this.buttonClicked.emit(button);
+ }
+}
diff --git a/src/app/view/components/dialog-window/dialog-window.component.html b/src/app/view/components/dialog-window/dialog-window.component.html
index 7717288..57c3e56 100644
--- a/src/app/view/components/dialog-window/dialog-window.component.html
+++ b/src/app/view/components/dialog-window/dialog-window.component.html
@@ -3,14 +3,15 @@
<div class="dialog-content"><ng-content></ng-content></div>
<div style="display: inline-block; width: 10px;"></div>
<div class="dialog-buttons">
- <custom-button
- [buttonText]="isConfirmDialog ? 'Cancel' : 'Close'"
- (click)="onCancel()"
- additionalClasses="delete-button"
- >
- </custom-button>
+ <custom-button-group>
+ <div style="justify-content: center; align-items: center; display: flex;">
+ <custom-button
+ buttonText="Cancel"
+ (click)="onCancel()"
+ additionalClasses="delete-button"
+ >
+ </custom-button>
- <ng-container *ngIf="isConfirmDialog">
<custom-button
buttonText="Confirm"
(click)="onConfirm()"
@@ -18,7 +19,24 @@
additionalStyles="margin-left: 10px;"
>
</custom-button>
- </ng-container>
+ </div>
+ </custom-button-group>
+ <!--
+ <custom-button
+ [buttonText]="isConfirmDialog ? 'Cancel' : 'Close'"
+ (click)="onCancel()"
+ additionalClasses="delete-button"
+ >
+ </custom-button>
+
+ <custom-button
+ buttonText="Confirm"
+ (click)="onConfirm()"
+ additionalClasses="success-button"
+ additionalStyles="margin-left: 10px;"
+ >
+ </custom-button>
+ -->
</div>
</div>
</div>
\ No newline at end of file
--
GitLab
From 1c7e2ac890e3a7734e3032d17bfaf1434470319e Mon Sep 17 00:00:00 2001
From: vondrp <vondrovic@centrum.cz>
Date: Tue, 16 Apr 2024 21:52:34 +0200
Subject: [PATCH 2/2] =?UTF-8?q?Re=20#11277=20-=20p=C5=99id=C3=A1no=20mo?=
=?UTF-8?q?=C5=BEn=C3=A9=20voliteln=C3=A9=20pou=C5=BEit=C3=AD=20custom-but?=
=?UTF-8?q?ton-group=20-=20defaultn=C4=9B=20je=20Confirm=20dialog=20-=20v?=
=?UTF-8?q?=20html=20zakomentov=C3=A1na=20uk=C3=A1zka=20pou=C5=BEit=C3=AD?=
=?UTF-8?q?=20-=20p=C5=99id=C3=A1n=20blur=20efekt=20pro=20v=C4=9Bci=20v=20?=
=?UTF-8?q?pozad=C3=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../dialog-window/dialog-window.component.css | 6 +-
.../dialog-window.component.html | 79 +++++++++++--------
.../dialog-window/dialog-window.component.ts | 11 ++-
3 files changed, 56 insertions(+), 40 deletions(-)
diff --git a/src/app/view/components/dialog-window/dialog-window.component.css b/src/app/view/components/dialog-window/dialog-window.component.css
index 570fc59..48432f8 100644
--- a/src/app/view/components/dialog-window/dialog-window.component.css
+++ b/src/app/view/components/dialog-window/dialog-window.component.css
@@ -5,11 +5,13 @@
left: 0;
width: 100%;
height: 100%;
- background-color: rgba(0, 0, 0, 0.5); /* Poloprůhledné pozadà */
- z-index: 9999; /* UjistÄ›te se, Ĺľe dialogovĂ© okno je nad všemi ostatnĂmi prvky */
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
+
+ backdrop-filter: blur(4px);
}
.dialog-window {
diff --git a/src/app/view/components/dialog-window/dialog-window.component.html b/src/app/view/components/dialog-window/dialog-window.component.html
index 57c3e56..3230a10 100644
--- a/src/app/view/components/dialog-window/dialog-window.component.html
+++ b/src/app/view/components/dialog-window/dialog-window.component.html
@@ -1,42 +1,51 @@
<div class="overlay">
- <div class="dialog-window">
- <div class="dialog-content"><ng-content></ng-content></div>
- <div style="display: inline-block; width: 10px;"></div>
- <div class="dialog-buttons">
- <custom-button-group>
- <div style="justify-content: center; align-items: center; display: flex;">
- <custom-button
- buttonText="Cancel"
- (click)="onCancel()"
- additionalClasses="delete-button"
- >
- </custom-button>
-
- <custom-button
- buttonText="Confirm"
- (click)="onConfirm()"
- additionalClasses="success-button"
- additionalStyles="margin-left: 10px;"
- >
- </custom-button>
- </div>
- </custom-button-group>
- <!--
+ <div class="dialog-window">
+ <div class="dialog-content"><ng-content></ng-content></div>
+ <div style="display: inline-block; width: 10px;"></div>
+ <div class="dialog-buttons">
+ <ng-container *ngIf="!customButtonGroup">
+ <!-- Default buttons -->
<custom-button
- [buttonText]="isConfirmDialog ? 'Cancel' : 'Close'"
+ buttonText="Cancel Default"
(click)="onCancel()"
additionalClasses="delete-button"
- >
- </custom-button>
+ ></custom-button>
<custom-button
- buttonText="Confirm"
- (click)="onConfirm()"
- additionalClasses="success-button"
- additionalStyles="margin-left: 10px;"
- >
- </custom-button>
- -->
- </div>
+ buttonText="Confirm"
+ (click)="onConfirm()"
+ additionalClasses="success-button"
+ additionalStyles="margin-left: 10px;"
+ ></custom-button>
+ </ng-container>
+ <ng-container *ngIf="customButtonGroup">
+ <!-- Custom button group -->
+ <ng-content select="custom-button-group"></ng-content>
+ </ng-container>
</div>
- </div>
\ No newline at end of file
+ </div>
+</div>
+
+ <!-- Example of useage with custom button group
+ <dialog-window *ngIf="isDeleteAllDialogOpen"
+ > <p>Are you sure you want to delete all actions and final states?</p>
+
+
+ <custom-button-group>
+ <div style="justify-content: center; align-items: center; display: flex;">
+ <custom-button
+ buttonText="Custom Cancel"
+ additionalClasses="delete-button"
+ (click)="onDialogDeleteAllActionsCancel()">
+ </custom-button>
+ <custom-button
+ buttonText="Custom Confirm"
+ additionalClasses="success-button"
+ additionalStyles="margin-left: 10px;"
+ (click)="onDialogDeleteAllActionsConfirm()">
+ </custom-button>
+ </div>
+ </custom-button-group>
+ </dialog-window>
+
+ -->
\ No newline at end of file
diff --git a/src/app/view/components/dialog-window/dialog-window.component.ts b/src/app/view/components/dialog-window/dialog-window.component.ts
index bf47c30..22d2a06 100644
--- a/src/app/view/components/dialog-window/dialog-window.component.ts
+++ b/src/app/view/components/dialog-window/dialog-window.component.ts
@@ -1,4 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/core';
+
+import { CustomButtonGroupComponent } from '../custom-button-group/custom-button-group.component';
+
@Component({
selector: 'dialog-window',
@@ -8,10 +11,12 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
export class DialogWindowComponent {
@Input() content: string = "<p></p>";
- @Input() isConfirmDialog: boolean = true;
+ @ContentChild(CustomButtonGroupComponent) customButtonGroup!: CustomButtonGroupComponent;
+
+
@Output() confirm: EventEmitter<void> = new EventEmitter<void>();
@Output() cancel: EventEmitter<void> = new EventEmitter<void>();
-
+
constructor() { }
onConfirm(): void {
--
GitLab