From 8fd3c5a25ffe5a220704bb5f6049e31481358df1 Mon Sep 17 00:00:00 2001 From: Diana Lakhmytkina Date: Fri, 21 Apr 2023 13:13:14 +0300 Subject: [PATCH] feature: Modal redesign edits --- projects/common/src/styles/mixins/_index.scss | 2 +- .../button-demo/button-demo.component.scss | 1 - .../example-5/example-5.component.html | 2 +- .../example-5/example-5.component.scss | 4 -- .../modal-demo-example-1.component.html | 8 ++-- .../modal-demo-example-1.component.scss | 5 --- .../modal-demo-example-2.component.html | 8 ++-- .../modal-demo-example-3.component.html | 7 ++-- .../modal-demo-example-4.component.html | 9 ++-- .../modal-demo-example-4.component.scss | 4 -- .../modal-demo-example-5.component.html | 19 ++++----- .../modal-demo-example-5.component.scss | 12 ------ .../modal-demo-example-5-helper.component.ts | 1 + .../modal-demo-example-6.component.html | 16 ++++++++ .../modal-demo-example-6.component.scss | 3 ++ .../modal-demo-example-6.component.ts | 20 +++++++++ ...modal-demo-example-6-helper.component.html | 1 + ...modal-demo-example-6-helper.component.scss | 0 .../modal-demo-example-6-helper.component.ts | 36 ++++++++++++++++ .../modal-demo-content.component.html | 9 ++-- .../modal-demo-content.component.scss | 1 - .../modal-demo-content.component.ts | 4 -- .../modal-demo/modal-demo.component.html | 12 +++++- .../pages/modal-demo/modal-demo.component.ts | 27 +++++++----- .../app/pages/modal-demo/modal-demo.module.ts | 4 ++ .../components/button/button.component.scss | 5 +++ .../modal-button-icon.component.ts | 2 +- .../modal-layout-action.component.scss | 3 ++ .../modal-layout-action.component.ts | 37 ++++++++++++++++- .../modal-layout-body.component.html | 4 +- .../modal-layout-body.component.scss | 41 ++++++++----------- .../modal-layout-footer.component.scss | 22 ++++++---- ...modal-layout-header-actions.component.scss | 41 ++++++++++++++++--- .../modal-layout-header.component.scss | 18 +++++--- .../modal-layout-title.component.html | 2 +- .../modal-layout-title.component.scss | 9 ++-- .../modal-layout-title.component.ts | 28 ++++++++++++- .../modal-layout/modal-layout.component.html | 2 + .../modal-layout/modal-layout.component.scss | 8 ++-- .../modal-layout/modal-layout.component.ts | 29 ++++++++++++- .../src/components/modal/modal.module.ts | 17 +++++++- .../classes/dto/modal-config.dto.ts | 4 +- .../declarations/classes/modal-ref.class.ts | 9 +++- .../interfaces/modal-config.interface.ts | 4 +- .../declarations/types/modal-height.type.ts | 2 +- 45 files changed, 353 insertions(+), 149 deletions(-) create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.html create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.ts create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.html create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.scss create mode 100644 projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts diff --git a/projects/common/src/styles/mixins/_index.scss b/projects/common/src/styles/mixins/_index.scss index 33f590733..6de823f62 100644 --- a/projects/common/src/styles/mixins/_index.scss +++ b/projects/common/src/styles/mixins/_index.scss @@ -18,4 +18,4 @@ @forward './supports-backdrop-blur.mixin'; @forward './transition.mixin'; @forward './no-tap-highlight.mixin'; -@forward './line-clamp.mixin.scss'; +@forward './line-clamp.mixin'; diff --git a/projects/demo/src/app/pages/button-demo/button-demo.component.scss b/projects/demo/src/app/pages/button-demo/button-demo.component.scss index c1c6cc9c8..a50e25884 100644 --- a/projects/demo/src/app/pages/button-demo/button-demo.component.scss +++ b/projects/demo/src/app/pages/button-demo/button-demo.component.scss @@ -6,6 +6,5 @@ &__button { display: inline-flex; - flex: 1; } } diff --git a/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.html b/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.html index 38bd90904..0a3327fda 100644 --- a/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.html +++ b/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.html @@ -1,3 +1,3 @@
- Flexible button + Flexible button
diff --git a/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.scss b/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.scss index 0bf803bfa..e6e87eb04 100644 --- a/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.scss +++ b/projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.scss @@ -4,7 +4,3 @@ display: flex; margin: 4rem 0; } - -.button { - flex: 1; -} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.html index 0b7c77f73..b8bff050b 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.html +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.html @@ -6,11 +6,11 @@ Any content can be here - - Cancel + + Cancel - - Close + + Close diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.scss b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.scss index 4e8637c41..16107e508 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.scss +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.scss @@ -2,8 +2,3 @@ width: 400px; height: 400px; } - -.layout-action { - display: flex; - justify-content: center; -} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-2/modal-content/modal-demo-example-2.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-2/modal-content/modal-demo-example-2.component.html index dc487b928..0f5c99f02 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-2/modal-content/modal-demo-example-2.component.html +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-2/modal-content/modal-demo-example-2.component.html @@ -1,7 +1,9 @@ - - - + + + + + Any content can be here diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-3/modal-content/modal-demo-example-3.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-3/modal-content/modal-demo-example-3.component.html index c7fcb5347..8cbb9c489 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-3/modal-content/modal-demo-example-3.component.html +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-3/modal-content/modal-demo-example-3.component.html @@ -1,10 +1,9 @@ - - - - Modal window + + + diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.html index 079d5cf6d..647b0f198 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.html +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.html @@ -1,11 +1,10 @@ - - - - - Modal window + + + + Any content can be here diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.scss b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.scss index 347328b3d..e4eb7adc8 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.scss +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.scss @@ -7,7 +7,3 @@ max-width: calc(100vw - 10rem); max-height: calc(#{vh(100)} - 10rem); } - -.close-button { - flex: 1; -} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.html index 71cb8abf3..db48fe79f 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.html +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.html @@ -1,21 +1,20 @@ - - - - - - + {{ loremIpsum }} + + + + {{ loremIpsum }} - - Cancel + + Cancel - - Close + + Close diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.scss b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.scss index 82c96dde6..8c591faad 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.scss +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.scss @@ -1,15 +1,3 @@ .modal-layout { width: 400px; } - -.close-button { - flex: 1; -} - -.layout-action { - display: flex; -} - -.footer-button { - flex: 1; -} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts index 30362b0db..f785765fb 100644 --- a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts @@ -22,6 +22,7 @@ export class ModalDemoExample5HelperComponent { hasBackdrop: true, closeOnBackdropClick: true, isBackdropTransparent: false, + height: 'xs', providers: [ { provide: MODAL_DATA_TOKEN, diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.html new file mode 100644 index 000000000..fa914f24f --- /dev/null +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.html @@ -0,0 +1,16 @@ + + + Modal window + + + {{ loremIpsum }} + + + + Cancel + + + Close + + + diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss new file mode 100644 index 000000000..8c591faad --- /dev/null +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss @@ -0,0 +1,3 @@ +.modal-layout { + width: 400px; +} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.ts b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.ts new file mode 100644 index 000000000..00927eef5 --- /dev/null +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.ts @@ -0,0 +1,20 @@ +import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; + +const BODY_CONTENT: string = ` +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat metus, +tempus quis cursus sit amet, aliquam tempor odio. Proin vehicula nibh vitae varius tristique. +Vivamus id vestibulum risus. Nulla eget leo eget est venenatis luctus in quis lectus. +Maecenas pulvinar sollicitudin diam dapibus scelerisque. Ut non elit viverra, fringilla arcu et, +blandit arcu. Phasellus ut malesuada tellus. Ut ac justo eget orci interdum euismod et vitae tortor. +`; + +@Component({ + selector: 'pupa-modal-demo-example-6', + templateUrl: './modal-demo-example-6.component.html', + styleUrls: ['./modal-demo-example-6.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.Emulated, +}) +export class ModalDemoExample6Component { + public readonly loremIpsum: string = BODY_CONTENT; +} diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.html b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.html new file mode 100644 index 000000000..6a8185cb0 --- /dev/null +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.html @@ -0,0 +1 @@ +Open Modal diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.scss b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts new file mode 100644 index 000000000..5d174bf4c --- /dev/null +++ b/projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts @@ -0,0 +1,36 @@ +import { ChangeDetectionStrategy, Component, Injector, ViewEncapsulation } from '@angular/core'; +import { ModalsService, OpenedModal } from '@bimeister/pupakit.overlays'; +import { Observable } from 'rxjs'; +import { MODAL_DATA_TOKEN } from '../../../../../../declarations/tokens/modal-data.token'; +import { ModalDemoExample6Component } from '../modal-content/modal-demo-example-6.component'; + +@Component({ + selector: 'pupa-modal-demo-example-6-helper', + templateUrl: './modal-demo-example-6-helper.component.html', + styleUrls: ['./modal-demo-example-6-helper.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.Emulated, +}) +export class ModalDemoExample6HelperComponent { + public modalCloseMessage$: Observable; + + constructor(private readonly modalsService: ModalsService, private readonly injector: Injector) {} + + public openModal(): void { + const modal: OpenedModal = this.modalsService.open(ModalDemoExample6Component, { + injector: this.injector, + hasBackdrop: true, + closeOnBackdropClick: true, + isBackdropTransparent: false, + hasBorder: true, + providers: [ + { + provide: MODAL_DATA_TOKEN, + useValue: [1, 2, 3, 4], + }, + ], + }); + + this.modalCloseMessage$ = modal.closed$; + } +} diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.html b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.html index e3bb109f5..41d2bf344 100755 --- a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.html +++ b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.html @@ -1,11 +1,10 @@ - - - - - + Modal window + + + diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss index d98ba975c..c8a633c9d 100755 --- a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss +++ b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss @@ -9,7 +9,6 @@ .modal-layout { width: 400px; - height: 400px; } .dragger { diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.ts b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.ts index 7adfdc9b9..77725f8bf 100755 --- a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.ts +++ b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.ts @@ -37,8 +37,4 @@ export class ModalDemoContentComponent { public changeModalPosition(newPosition: Position): void { this.modalRef.updatePosition(newPosition); } - - public get size(): string { - return this.modalRef.size; - } } diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo.component.html b/projects/demo/src/app/pages/modal-demo/modal-demo.component.html index 37aae33ae..036a009ae 100755 --- a/projects/demo/src/app/pages/modal-demo/modal-demo.component.html +++ b/projects/demo/src/app/pages/modal-demo/modal-demo.component.html @@ -26,6 +26,11 @@

Predefined height XS

+ +

With borders, with flexible buttons

+ + +
@@ -59,11 +64,16 @@

Predefined height XS

Predefined height + + + Has border. + +
diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo.component.ts b/projects/demo/src/app/pages/modal-demo/modal-demo.component.ts index 8188965fe..1c8ea344f 100755 --- a/projects/demo/src/app/pages/modal-demo/modal-demo.component.ts +++ b/projects/demo/src/app/pages/modal-demo/modal-demo.component.ts @@ -1,14 +1,16 @@ import { ChangeDetectionStrategy, Component, Injector, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { Position } from '@bimeister/pupakit.common'; -import { ModalsService, OpenedModal } from '@bimeister/pupakit.overlays'; +import { ModalConfig, ModalHeightType, ModalsService, OpenedModal } from '@bimeister/pupakit.overlays'; import { PropsOption } from '../../shared/components/example-viewer/declarations/interfaces/props.option'; import { MODAL_DATA_TOKEN } from '../../../declarations/tokens/modal-data.token'; import { ModalDemoContentComponent } from './modal-demo-content/modal-demo-content.component'; import { ModalDemoLocalService } from './services/modal-demo-local.service'; -import { isNil } from '@bimeister/utilities'; const BASE_REQUEST_PATH: string = 'modal-demo/examples'; +type ModalFormStructure = { + [Key in keyof ModalConfig]: FormControl; +}; @Component({ selector: 'demo-modal-demo', @@ -49,13 +51,19 @@ export class ModalDemoComponent { TS: `${BASE_REQUEST_PATH}/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts`, }; - public readonly formGroup: FormGroup = new FormGroup({ - hasBackdrop: new FormControl(true), - closeOnBackdropClick: new FormControl(true), - isBackdropTransparent: new FormControl(false), - isFullscreen: new FormControl(false), - height: new FormControl(''), - size: new FormControl(''), + public readonly example6Content: Record = { + HTML: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-content/modal-demo-example-6.component.html`, + SCSS: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss`, + TS: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts`, + }; + + public readonly formGroup: FormGroup = new FormGroup>({ + hasBackdrop: new FormControl(true), + closeOnBackdropClick: new FormControl(true), + isBackdropTransparent: new FormControl(false), + isFullscreen: new FormControl(false), + height: new FormControl(''), + hasBorder: new FormControl(false), }); public readonly sizeOptions: PropsOption[] = [ @@ -87,7 +95,6 @@ export class ModalDemoComponent { const openedModal: OpenedModal = this.modalsService.open(ModalDemoContentComponent, { ...this.formGroup.value, injector: this.injector, - height: isNil(this.formGroup.value.size) ? 400 : null, width: 400, providers: [ { diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo.module.ts b/projects/demo/src/app/pages/modal-demo/modal-demo.module.ts index c5c4422d1..e19cee720 100644 --- a/projects/demo/src/app/pages/modal-demo/modal-demo.module.ts +++ b/projects/demo/src/app/pages/modal-demo/modal-demo.module.ts @@ -13,6 +13,8 @@ import { ModalDemoExample5HelperComponent } from './examples/modal-demo-example- import { ModalDemoContentComponent } from './modal-demo-content/modal-demo-content.component'; import { ModalDemoRoutingModule } from './modal-demo-routing.module'; import { ModalDemoComponent } from './modal-demo.component'; +import { ModalDemoExample6Component } from './examples/modal-demo-example-6/modal-content/modal-demo-example-6.component'; +import { ModalDemoExample6HelperComponent } from './examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component'; const EXAMPLES: Type[] = [ ModalDemoExample1Component, @@ -25,6 +27,8 @@ const EXAMPLES: Type[] = [ ModalDemoExample4HelperComponent, ModalDemoExample5Component, ModalDemoExample5HelperComponent, + ModalDemoExample6Component, + ModalDemoExample6HelperComponent, ]; @NgModule({ diff --git a/projects/kit/src/components/buttons/components/button/button.component.scss b/projects/kit/src/components/buttons/components/button/button.component.scss index 4da588b44..f4e36db4e 100644 --- a/projects/kit/src/components/buttons/components/button/button.component.scss +++ b/projects/kit/src/components/buttons/components/button/button.component.scss @@ -1,5 +1,10 @@ @use './../../button.styles.scss'; +:host:has(.button_flexible) { + display: flex; + flex: 1; +} + .button { width: inherit; max-width: inherit; diff --git a/projects/overlays/src/components/modal/components/modal-button-icon/modal-button-icon.component.ts b/projects/overlays/src/components/modal/components/modal-button-icon/modal-button-icon.component.ts index 16b35ad66..ac70c51d2 100644 --- a/projects/overlays/src/components/modal/components/modal-button-icon/modal-button-icon.component.ts +++ b/projects/overlays/src/components/modal/components/modal-button-icon/modal-button-icon.component.ts @@ -22,7 +22,7 @@ export class ModalButtonIconComponent implements OnChanges { private readonly isMobile$: Observable = this.clientUiStateHandlerService.breakpointIsXs$; public readonly size$: Observable = this.isMobile$.pipe( - map((isMobile: boolean) => (isMobile ? 'm' : 's')) + map((isMobile: boolean) => (isMobile ? 's' : 'm')) ); constructor(private readonly clientUiStateHandlerService: ClientUiStateHandlerService) {} diff --git a/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.scss b/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.scss index 5c51cd19b..ab4beec76 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.scss @@ -1,4 +1,7 @@ :host { display: block; +} + +:host.flexible { flex: 1; } diff --git a/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.ts b/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.ts index aea8383ae..b48d08665 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.ts +++ b/projects/overlays/src/components/modal/components/modal-layout-action/modal-layout-action.component.ts @@ -1,6 +1,19 @@ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostListener, Inject } from '@angular/core'; +import { + Component, + ViewEncapsulation, + ChangeDetectionStrategy, + Input, + HostListener, + Inject, + ContentChild, + HostBinding, + AfterContentInit, + OnDestroy, +} from '@angular/core'; import { ModalRef } from '../../../../declarations/classes/modal-ref.class'; import { Nullable } from '@bimeister/utilities'; +import { ButtonComponent } from '@bimeister/pupakit.kit'; +import { Subscription } from 'rxjs'; @Component({ selector: 'pupa-modal-layout-action', @@ -9,9 +22,15 @@ import { Nullable } from '@bimeister/utilities'; encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ModalLayoutActionComponent { +export class ModalLayoutActionComponent implements AfterContentInit, OnDestroy { + @ContentChild(ButtonComponent) public buttonComponent: ButtonComponent; + @Input() public value: Nullable | 'none' = 'none'; + private readonly subscription: Subscription = new Subscription(); + + @HostBinding('class.flexible') public isFlexible: boolean = false; + constructor(@Inject(ModalRef) private readonly modalRef: ModalRef) {} @HostListener('click') @@ -21,4 +40,18 @@ export class ModalLayoutActionComponent { } this.modalRef.close(this.value); } + + public ngAfterContentInit(): void { + this.subscription.add(this.setFlexibleClass()); + } + + public ngOnDestroy(): void { + this.subscription.unsubscribe(); + } + + public setFlexibleClass(): Subscription { + return this.buttonComponent.flexible$.subscribe((isFlexible: boolean) => { + this.isFlexible = isFlexible; + }); + } } diff --git a/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.html b/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.html index c0cbc2b7d..e82990a0e 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.html +++ b/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.html @@ -1,9 +1,7 @@
-
- -
+
diff --git a/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.scss b/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.scss index fb8f49a30..1a579dc74 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-body/modal-layout-body.component.scss @@ -3,21 +3,12 @@ :host { display: flex; - width: calc(100% + 5rem); + width: 100%; height: 100%; overflow: hidden; - padding-top: 3rem; - - color: color(neutral-1000); - - @include host-selector-dark-theme { - color: color(neutral-1); - } - - @include xs() { - width: 100%; - padding-top: 2rem; - } + box-sizing: border-box; + color: semantic-color(text-primary); + --pupa-scrollable-content_padding: 0 5rem; } .modal-layout-body { @@ -25,28 +16,28 @@ overflow: hidden; &__scrollable-content { + padding: 3.5rem 0 5rem; box-sizing: border-box; - padding: 1rem 0 10rem; - @include xs() { - padding: 1rem 5rem 8rem; - } + width: 100%; + --pupa-scrollable-content_padding: initial; } } -:host-context(.modal-layout_no-footer) { +:host-context(.modal-layout_no-border) { .modal-layout-body__scrollable-content { - padding-bottom: 12rem; + padding-top: 2rem; + padding-bottom: 2.5rem; } } -:host-context(.modal-layout_no-title) { + +:host-context(.modal-layout_no-header) { .modal-layout-body__scrollable-content { - padding-top: 0; + padding-top: 5rem; } } -.modal-layout-body__content-container { - width: calc(100% - 5rem); - @include xs() { - width: calc(100% - 1.5rem); +:host-context(.modal-layout_no-footer) { + .modal-layout-body__scrollable-content { + padding-bottom: 5rem; } } diff --git a/projects/overlays/src/components/modal/components/modal-layout-footer/modal-layout-footer.component.scss b/projects/overlays/src/components/modal/components/modal-layout-footer/modal-layout-footer.component.scss index 78d87b65a..902c57e4a 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-footer/modal-layout-footer.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-footer/modal-layout-footer.component.scss @@ -4,25 +4,29 @@ :host { display: block; width: 100%; - - @include xs() { - border-top: 1px solid semantic-color(lines-normal); - } - color: semantic-color(surface-secondary); + color: semantic-color(text-secondary); } .modal-layout-footer { display: flex; + justify-content: flex-end; column-gap: 2rem; box-sizing: border-box; - padding-top: 2rem; + border-top: 1px solid semantic-color(lines-normal); @include font-type-regular; @include font-size-xs(true); &_with-actions { - padding-top: 4rem; - @include xs() { - padding: 3rem 5rem; + padding: 5rem; + } +} + +:host-context(.modal-layout_no-border) { + .modal-layout-footer { + border-top: none; + + &_with-actions { + padding-top: 2.5rem; } } } diff --git a/projects/overlays/src/components/modal/components/modal-layout-header-actions/modal-layout-header-actions.component.scss b/projects/overlays/src/components/modal/components/modal-layout-header-actions/modal-layout-header-actions.component.scss index 938526e8b..e06106986 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-header-actions/modal-layout-header-actions.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-header-actions/modal-layout-header-actions.component.scss @@ -3,17 +3,46 @@ :host { display: flex; - align-items: center; + justify-content: flex-end; gap: 1rem; - border-bottom: 1px solid color(neutral-7); - min-height: 9rem; - @include xs() { - padding: 0 4rem; - min-height: 12rem; + @include xs { + position: relative; + padding-bottom: calc(3.5rem + 1px); + margin-bottom: 3.5rem; + + &::after { + content: ''; + width: calc(100% + 10rem); + height: 0.5px; + background-color: semantic-color(lines-normal); + position: absolute; + top: 100%; + left: -5rem; + } } :host-context(.modal-layout_no-title) { width: 100%; } } + +:host-context(.modal-layout_no-border) { + :host { + @include xs { + padding-bottom: calc(3.5rem + 1px); + margin-bottom: 0; + &::after { + content: none; + } + } + } +} + +:host-context(.modal-layout_no-title) { + :host { + @include xs { + margin-bottom: 0; + } + } +} diff --git a/projects/overlays/src/components/modal/components/modal-layout-header/modal-layout-header.component.scss b/projects/overlays/src/components/modal/components/modal-layout-header/modal-layout-header.component.scss index 4eafeb192..e7a6fe7d5 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-header/modal-layout-header.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-header/modal-layout-header.component.scss @@ -3,14 +3,22 @@ :host { width: 100%; - display: flex; - align-items: center; box-sizing: border-box; - min-height: 12rem; - padding: 5rem 0; + padding: 3.5rem 5rem; + border-bottom: 1px solid semantic-color(lines-normal); @include xs() { - padding: 5rem 5rem 2rem; + flex-direction: column-reverse; + padding-bottom: 0; + border-bottom: none; + } +} + +:host-context(.modal-layout_no-border) { + :host { + padding-top: 5rem; + padding-bottom: 2rem; + border: none; } } diff --git a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.html b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.html index e4c1c70bb..b3e4e7f98 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.html +++ b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.html @@ -1,3 +1,3 @@ -
+
diff --git a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss index 65a8b8094..96271a178 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss @@ -2,17 +2,14 @@ @use 'mixins' as *; :host { - display: block; + display: flex; + align-items: center; flex: 1; @include font-type-medium; @include font-size-l; - color: color(neutral-1000); - - @include host-selector-dark-theme { - color: color(neutral-1); - } + color: semantic-color(text-primary); } .content-wrapper { diff --git a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts index c2652cf4a..f5847e160 100644 --- a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts +++ b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts @@ -1,4 +1,12 @@ -import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { + Component, + ViewEncapsulation, + ChangeDetectionStrategy, + ViewChild, + ElementRef, + AfterContentInit, +} from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'pupa-modal-layout-title', @@ -7,4 +15,20 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/ encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ModalLayoutTitleComponent {} +export class ModalLayoutTitleComponent implements AfterContentInit { + @ViewChild('title', { static: true }) public title: ElementRef; + + public readonly isTooltipDisabled$: BehaviorSubject = new BehaviorSubject(true); + + public readonly titleText$: BehaviorSubject = new BehaviorSubject(''); + + public ngAfterContentInit(): void { + this.isTooltipDisabled$.next(!this.isEllipsisActive()); + this.titleText$.next(this.title.nativeElement.innerText); + } + + public isEllipsisActive(): boolean { + const titleElement: HTMLElement = this.title.nativeElement; + return titleElement.scrollHeight > titleElement.offsetHeight; + } +} diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html index 28a085e4f..858d7850a 100644 --- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html +++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html @@ -2,6 +2,8 @@ class="modal-layout" [class.modal-layout_no-footer]="!(withFooter$ | async)" [class.modal-layout_no-title]="!(withTitle$ | async)" + [class.modal-layout_no-header]="!(withHeader$ | async)" + [class.modal-layout_no-border]="!withBorder" tabindex="0" pupaAutofocus > diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss index 8649cffaf..223ba6a1d 100644 --- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss +++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss @@ -6,14 +6,12 @@ :host { display: block; overflow: hidden; - max-height: 500px; max-width: 500px; - border: 1px solid color(neutral-7); + border: 1px solid semantic-color(lines-normal); border-radius: calc($controlBorderRadius + 1rem); box-shadow: 0px 4px 24px rgba(0, 29, 41, 0.04); @include host-selector-dark-theme { - border: 1px solid color(neutral-300); box-shadow: 0px 4px 24px rgba(0, 23, 32, 0.12); } @@ -42,15 +40,15 @@ height: 100%; max-width: inherit; max-height: inherit; + min-height: inherit; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; background-color: color(neutral-1); - padding: 5rem; @include xs() { - padding: 0px; + padding: 0; } @include host-selector-dark-theme { diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts index 51bbdae5f..a9fc10b83 100644 --- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts +++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts @@ -1,7 +1,18 @@ -import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ViewEncapsulation } from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + Component, + ContentChild, + HostBinding, + Inject, + ViewEncapsulation, +} from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { ModalLayoutFooterComponent } from '../modal-layout-footer/modal-layout-footer.component'; import { ModalLayoutTitleComponent } from '../modal-layout-title/modal-layout-title.component'; +import { ModalLayoutHeaderComponent } from '../modal-layout-header/modal-layout-header.component'; +import { ModalRef } from '../../../../declarations/classes/modal-ref.class'; +import { ModalHeightType } from '../../../../declarations/types/modal-height.type'; @Component({ selector: 'pupa-modal-layout', @@ -19,9 +30,20 @@ export class ModalLayoutComponent implements AfterContentInit { public readonly withTitle$: BehaviorSubject = new BehaviorSubject(false); + @ContentChild(ModalLayoutHeaderComponent) public modalLayoutHeaderComponent: ModalLayoutHeaderComponent; + + public readonly withHeader$: BehaviorSubject = new BehaviorSubject(false); + + public readonly withBorder: boolean = this.modalRef.hasBorder; + + @HostBinding('attr.height') public readonly modalHeight: ModalHeightType = this.modalRef.height; + + constructor(@Inject(ModalRef) public readonly modalRef: ModalRef) {} + public ngAfterContentInit(): void { this.processWithTitleChange(); this.processWithFooterChange(); + this.processWithHeaderChange(); } private processWithTitleChange(): void { @@ -33,4 +55,9 @@ export class ModalLayoutComponent implements AfterContentInit { const withFooter: boolean = this.modalLayoutFooterComponent !== undefined; this.withFooter$.next(withFooter); } + + private processWithHeaderChange(): void { + const withHeader: boolean = this.modalLayoutHeaderComponent !== undefined; + this.withHeader$.next(withHeader); + } } diff --git a/projects/overlays/src/components/modal/modal.module.ts b/projects/overlays/src/components/modal/modal.module.ts index a191ebfd4..d12c28816 100644 --- a/projects/overlays/src/components/modal/modal.module.ts +++ b/projects/overlays/src/components/modal/modal.module.ts @@ -2,7 +2,12 @@ import { OverlayModule } from '@angular/cdk/overlay'; import { PortalModule } from '@angular/cdk/portal'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { PupaButtonsModule, PupaScrollableModule, PupaThemeWrapperModule } from '@bimeister/pupakit.kit'; +import { + PupaButtonsModule, + PupaScrollableModule, + PupaThemeWrapperModule, + PupaTooltipModule, +} from '@bimeister/pupakit.kit'; import { ModalButtonIconComponent } from './components/modal-button-icon/modal-button-icon.component'; import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component'; import { ModalContainerComponent } from './components/modal-container/modal-container.component'; @@ -31,7 +36,15 @@ import { ModalLayoutComponent } from './components/modal-layout/modal-layout.com ModalCloseButtonComponent, ModalExpandButtonComponent, ], - imports: [CommonModule, PupaButtonsModule, OverlayModule, PortalModule, PupaThemeWrapperModule, PupaScrollableModule], + imports: [ + CommonModule, + PupaButtonsModule, + OverlayModule, + PortalModule, + PupaThemeWrapperModule, + PupaScrollableModule, + PupaTooltipModule, + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], exports: [ ModalLayoutComponent, diff --git a/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts b/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts index a9f4cb119..e0e2b81ad 100644 --- a/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts +++ b/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts @@ -4,6 +4,7 @@ import { ModalConfig } from '../../interfaces/modal-config.interface'; import { ConnectedPositionX } from '../../types/connected-position-x.type'; import { ConnectedPositionY } from '../../types/connected-position-y.type'; import { Position, Theme } from '@bimeister/pupakit.common'; +import { ModalHeightType } from '../../types/modal-height.type'; export class ModalConfigDto implements ModalConfig { public hasBackdrop: boolean = true; @@ -17,8 +18,9 @@ export class ModalConfigDto implements ModalConfig { public providers: StaticProvider[] = []; public theme: Theme = Theme.Light; public width: number | string = 0; - public height: number = 0; + public height: ModalHeightType = ''; public isFullscreen: boolean = false; + public hasBorder: boolean = false; constructor(config: Partial) { if (isNil(config)) { diff --git a/projects/overlays/src/declarations/classes/modal-ref.class.ts b/projects/overlays/src/declarations/classes/modal-ref.class.ts index d8e76eccd..b16f58129 100644 --- a/projects/overlays/src/declarations/classes/modal-ref.class.ts +++ b/projects/overlays/src/declarations/classes/modal-ref.class.ts @@ -4,6 +4,7 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { ModalConfig } from '../interfaces/modal-config.interface'; import { ConnectedPositionX } from '../types/connected-position-x.type'; import { ConnectedPositionY } from '../types/connected-position-y.type'; +import { ModalHeightType } from '../types/modal-height.type'; export class ModalRef { public readonly closed$: Subject = new Subject(); @@ -52,7 +53,11 @@ export class ModalRef { this.toTopLayerMoved$.complete(); } - public get size(): string | null { - return this.config.size; + public get height(): ModalHeightType { + return this.config.height; + } + + public get hasBorder(): boolean { + return this.config.hasBorder; } } diff --git a/projects/overlays/src/declarations/interfaces/modal-config.interface.ts b/projects/overlays/src/declarations/interfaces/modal-config.interface.ts index 5568d0eef..ef92ed540 100644 --- a/projects/overlays/src/declarations/interfaces/modal-config.interface.ts +++ b/projects/overlays/src/declarations/interfaces/modal-config.interface.ts @@ -16,6 +16,6 @@ export interface ModalConfig { injector: Injector; providers: StaticProvider[]; isFullscreen?: boolean; - height: number; - size?: ModalHeightType; + height?: ModalHeightType; + hasBorder?: boolean; } diff --git a/projects/overlays/src/declarations/types/modal-height.type.ts b/projects/overlays/src/declarations/types/modal-height.type.ts index 91ddebbde..679b32f6e 100644 --- a/projects/overlays/src/declarations/types/modal-height.type.ts +++ b/projects/overlays/src/declarations/types/modal-height.type.ts @@ -1 +1 @@ -export type ModalHeightType = 'xs' | 's' | 'm' | 'l'; +export type ModalHeightType = 'xs' | 's' | 'm' | 'l' | '';