From 8456cbaf879995ecd4b81942b07d951025f913e7 Mon Sep 17 00:00:00 2001 From: xuxzh <136676092+xuxzh@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:42:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E6=80=81=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=80=E5=A4=A7=E5=8C=96=E5=92=8C=E9=80=80?= =?UTF-8?q?=E5=87=BA=E6=9C=80=E5=A4=A7=E5=8C=96=E5=8A=9F=E8=83=BD=20(#320)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo/maximize/maximize.component.html | 2 + .../modal/demo/maximize/maximize.component.ts | 54 +++++++++++ devui/modal/demo/modal-demo.component.html | 7 ++ devui/modal/demo/modal-demo.component.ts | 9 +- devui/modal/demo/modal-demo.module.ts | 92 ++++++++++--------- devui/modal/dialog.service.ts | 48 ++++++---- devui/modal/modal-container.component.html | 4 +- devui/modal/modal-container.component.ts | 27 ++++-- devui/modal/modal-header.component.html | 23 +++++ devui/modal/modal-header.component.scss | 6 ++ devui/modal/modal-header.component.ts | 21 +++-- devui/modal/modal.component.html | 8 +- devui/modal/modal.component.scss | 22 +++++ devui/modal/modal.component.ts | 78 +++++++++------- devui/modal/modal.types.ts | 2 + devui/style/devui-for-mobile.scss | 18 ++++ src/assets/i18n/en-us.json | 7 +- src/assets/i18n/zh-cn.json | 7 +- 18 files changed, 313 insertions(+), 122 deletions(-) create mode 100644 devui/modal/demo/maximize/maximize.component.html create mode 100644 devui/modal/demo/maximize/maximize.component.ts diff --git a/devui/modal/demo/maximize/maximize.component.html b/devui/modal/demo/maximize/maximize.component.html new file mode 100644 index 00000000..9a874c3f --- /dev/null +++ b/devui/modal/demo/maximize/maximize.component.html @@ -0,0 +1,2 @@ +open dialog +open dialog without animation diff --git a/devui/modal/demo/maximize/maximize.component.ts b/devui/modal/demo/maximize/maximize.component.ts new file mode 100644 index 00000000..8eccf592 --- /dev/null +++ b/devui/modal/demo/maximize/maximize.component.ts @@ -0,0 +1,54 @@ +import { Component } from '@angular/core'; +import { DialogService } from 'ng-devui/modal'; +import { ModalTestComponent } from '../modal-test.component'; + +@Component({ + selector: 'd-maximize', + templateUrl: './maximize.component.html', + }) +export class MaximizeComponent { + config = { + id: 'dialog-service', + width: '346px', + maxHeight: '600px', + title: 'Start Snapshot Version', + content: ModalTestComponent, + backdropCloseable: true, + onClose: () => console.log('on dialog closed'), + data: { + name: 'Tom', + age: 10, + address: 'Chengdu', + }, + }; + + constructor(private dialogService: DialogService) {} + + openDialog(dialogtype?: string, showAnimation?: boolean) { + const results = this.dialogService.open({ + ...this.config, + showMaximizeBtn: true, + dialogtype: dialogtype, + showAnimation: showAnimation, + buttons: [ + { + cssClass: 'primary', + text: 'Ok', + disabled: false, + handler: ($event: Event) => { + results.modalInstance.hide(); + }, + }, + { + id: 'btn-cancel', + cssClass: 'common', + text: 'Cancel', + handler: ($event: Event) => { + results.modalInstance.hide(); + }, + }, + ], + }); + console.log(results.modalContentInstance); + } +} diff --git a/devui/modal/demo/modal-demo.component.html b/devui/modal/demo/modal-demo.component.html index ad4f139e..bddf69cd 100755 --- a/devui/modal/demo/modal-demo.component.html +++ b/devui/modal/demo/modal-demo.component.html @@ -7,6 +7,13 @@ +
+
{{ 'components.modal.maximizeDemo.title' | translate }}
+
{{ 'components.modal.maximizeDemo.description' | translate }}
+ + + +
{{ 'components.modal.hideDemo.title' | translate }}
{{ 'components.modal.hideDemo.description' | translate }}
diff --git a/devui/modal/demo/modal-demo.component.ts b/devui/modal/demo/modal-demo.component.ts index ddc2a9e7..e8d99534 100755 --- a/devui/modal/demo/modal-demo.component.ts +++ b/devui/modal/demo/modal-demo.component.ts @@ -7,7 +7,7 @@ import { Subscription } from 'rxjs'; selector: 'd-modal-demo', templateUrl: './modal-demo.component.html', styles: [':host ::ng-deep d-button:not(first-child) { margin-left: 8px }'], -}) + }) export class ModalDemoComponent implements OnInit, OnDestroy { basicSource: Array = [ { title: 'HTML', language: 'xml', code: require('./basic/basic.component.html?raw') }, @@ -15,6 +15,12 @@ export class ModalDemoComponent implements OnInit, OnDestroy { { title: 'Dialog HTML', language: 'xml', code: require('./modal-test.component.html?raw') }, { title: 'Dialog TS', language: 'typescript', code: require('./modal-test.component.ts?raw') }, ]; + maximizeSource: Array = [ + { title: 'HTML', language: 'xml', code: require('./maximize/maximize.component.html?raw') }, + { title: 'TS', language: 'typescript', code: require('./maximize/maximize.component.ts?raw') }, + { title: 'Dialog HTML', language: 'xml', code: require('./modal-test.component.html?raw') }, + { title: 'Dialog TS', language: 'typescript', code: require('./modal-test.component.ts?raw') }, + ]; basicUpdateSource: Array = [ { title: 'HTML', language: 'xml', code: require('./basic-update/basic-update.component.html?raw') }, { title: 'TS', language: 'typescript', code: require('./basic-update/basic-update.component.ts?raw') }, @@ -102,6 +108,7 @@ export class ModalDemoComponent implements OnInit, OnDestroy { setNavValues(values) { this.navItems = [ { dAnchorLink: 'standard-dialog', value: values['standard-dialog'] }, + { dAnchorLink: 'maximize-dialog', value: values['maximize-dialog'] }, { dAnchorLink: 'custom-dialog', value: values['custom-dialog'] }, { dAnchorLink: 'intercept-dialog-closed', value: values['intercept-dialog-closed'] }, { dAnchorLink: 'message-hint', value: values['message-hint'] }, diff --git a/devui/modal/demo/modal-demo.module.ts b/devui/modal/demo/modal-demo.module.ts index 95514c34..9079763c 100755 --- a/devui/modal/demo/modal-demo.module.ts +++ b/devui/modal/demo/modal-demo.module.ts @@ -15,6 +15,7 @@ import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module'; import { AutofocusComponent } from './autofocus/autofocus.component'; import { BasicUpdateComponent } from './basic-update/basic-update.component'; import { BasicComponent } from './basic/basic.component'; +import { MaximizeComponent } from './maximize/maximize.component'; import { CasesComponent } from './cases/cases.component'; import { ModalCasesComponent } from './cases/modal-cases.component'; import { CustomizeComponent } from './customize/customize.component'; @@ -33,53 +34,54 @@ import { TipsComponent } from './tips/tips.component'; @NgModule({ imports: [ - FormsModule, - TranslateModule, - CommonModule, - ModalModule, - ButtonModule, - PopoverModule, - FormModule, - DevUICodeboxModule, - DevUIApiModule, - DDemoNavModule, - TextInputModule, - RouterModule.forChild([ - { path: '', redirectTo: 'demo', pathMatch: 'full' }, - { - path: 'design', - component: ModalDesignComponent, - }, - { path: 'demo', component: ModalDemoComponent }, - { - path: 'api', - component: DevUIApiComponent, - data: { - 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), - 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md'), - }, - }, + FormsModule, + TranslateModule, + CommonModule, + ModalModule, + ButtonModule, + PopoverModule, + FormModule, + DevUICodeboxModule, + DevUIApiModule, + DDemoNavModule, + TextInputModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo', pathMatch: 'full' }, + { + path: 'design', + component: ModalDesignComponent, + }, + { path: 'demo', component: ModalDemoComponent }, + { + path: 'api', + component: DevUIApiComponent, + data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md'), + }, + }, ]), ], declarations: [ - ModalDemoComponent, - ModalDesignComponent, - ModalTestComponent, - ModalAlertComponent, - ModalNoBtnComponent, - BasicComponent, - CustomizeComponent, - TipsComponent, - HideComponent, - ModalFormComponent, - AutofocusComponent, - TemplateComponent, - DialogContentComponent, - ModalContentComponent, - BasicUpdateComponent, - FixedWrapperComponent, - CasesComponent, - ModalCasesComponent + ModalDemoComponent, + ModalDesignComponent, + ModalTestComponent, + ModalAlertComponent, + ModalNoBtnComponent, + BasicComponent, + MaximizeComponent, + CustomizeComponent, + TipsComponent, + HideComponent, + ModalFormComponent, + AutofocusComponent, + TemplateComponent, + DialogContentComponent, + ModalContentComponent, + BasicUpdateComponent, + FixedWrapperComponent, + CasesComponent, + ModalCasesComponent, ], -}) + }) export class ModalDemoModule {} diff --git a/devui/modal/dialog.service.ts b/devui/modal/dialog.service.ts index 99190d1a..29d431e2 100755 --- a/devui/modal/dialog.service.ts +++ b/devui/modal/dialog.service.ts @@ -1,11 +1,5 @@ import { DOCUMENT } from '@angular/common'; -import { - ComponentFactoryResolver, - ComponentRef, - Inject, - Injectable, - Renderer2, RendererFactory2 -} from '@angular/core'; +import { ComponentFactoryResolver, ComponentRef, Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; import { OverlayContainerRef } from 'ng-devui/overlay-container'; import { DevConfigService } from 'ng-devui/utils'; import { assign, isUndefined } from 'lodash-es'; @@ -19,10 +13,13 @@ export class DialogService { private renderer: Renderer2; document: Document; - constructor(private componentFactoryResolver: ComponentFactoryResolver, - private overlayContainerRef: OverlayContainerRef, private rendererFactory: RendererFactory2, - private devConfigService: DevConfigService, - @Inject(DOCUMENT) private doc: any) { + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + private overlayContainerRef: OverlayContainerRef, + private rendererFactory: RendererFactory2, + private devConfigService: DevConfigService, + @Inject(DOCUMENT) private doc: any + ) { this.renderer = this.rendererFactory.createRenderer(null, null); this.document = this.doc; } @@ -48,6 +45,7 @@ export class DialogService { componentFactoryResolver, beforeHidden, onClose, + onMaximize, dialogtype = 'standard', showCloseBtn = true, draggable = true, @@ -56,7 +54,8 @@ export class DialogService { offsetY, bodyScrollable = true, contentTemplate, - escapable = true + escapable = true, + showMaximizeBtn = false, }: IDialogOptions) { const finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver; @@ -95,12 +94,15 @@ export class DialogService { offsetX, offsetY, bodyScrollable, - escapable + escapable, }); - const modalContainerRef = modalRef.instance.modalContainerHost.viewContainerRef - .createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalContainerComponent), 0, injector); - assign(modalContainerRef.instance, { title, buttons, maxHeight, dialogtype, showCloseBtn }); + const modalContainerRef = modalRef.instance.modalContainerHost.viewContainerRef.createComponent( + finalComponentFactoryResolver.resolveComponentFactory(ModalContainerComponent), + 0, + injector + ); + assign(modalContainerRef.instance, { title, buttons, maxHeight, dialogtype, showCloseBtn, showMaximizeBtn }); if (contentTemplate) { assign(modalContainerRef.instance, { contentTemplate }); @@ -108,8 +110,9 @@ export class DialogService { if (typeof content === 'string') { assign(modalContainerRef.instance, { content, html }); } else { - this.contentRef = modalContainerRef.instance.modalContentHost.viewContainerRef - .createComponent(finalComponentFactoryResolver.resolveComponentFactory(content)); + this.contentRef = modalContainerRef.instance.modalContentHost.viewContainerRef.createComponent( + finalComponentFactoryResolver.resolveComponentFactory(content) + ); assign(this.contentRef.instance, { data, dialogtype }); } } @@ -118,7 +121,14 @@ export class DialogService { modalRef.instance.hide(); }; - modalRef.instance.updateButtonOptions = buttonOptions => modalContainerRef.instance.updateButtonOptions(buttonOptions); + modalContainerRef.instance.onMaximize = () => { + modalRef.instance.maximize(); + if (onMaximize) { + onMaximize(modalRef.instance.maximized); + } + }; + + modalRef.instance.updateButtonOptions = (buttonOptions) => modalContainerRef.instance.updateButtonOptions(buttonOptions); modalRef.instance.onHidden = () => { if (modalRef.instance.documentOverFlow) { diff --git a/devui/modal/modal-container.component.html b/devui/modal/modal-container.component.html index f7088323..e69c534e 100755 --- a/devui/modal/modal-container.component.html +++ b/devui/modal/modal-container.component.html @@ -3,7 +3,9 @@ id="d-modal-header" [title]="title" (closeEvent)="close($event)" + (maximizeEvent)="maximize($event)" [dialogtype]="dialogtype" + [showMaximizeBtn]="showMaximizeBtn" [showCloseBtn]="showCloseBtn" >
{{ i18nText?.info }}
+ + + + + + + + + + + = new EventEmitter(); + @Input() showMaximizeBtn = false; + @Output() maximizeEvent = new EventEmitter(); + maximized = false; + i18nText: I18nInterface['modal']; i18nSubscription: Subscription; @@ -47,4 +43,9 @@ export class ModalHeaderComponent implements OnInit, OnDestroy { this.i18nSubscription.unsubscribe(); } } + + maximize() { + this.maximized = !this.maximized; + this.maximizeEvent.emit(this.maximized); + } } diff --git a/devui/modal/modal.component.html b/devui/modal/modal.component.html index 8a518b59..a891361a 100755 --- a/devui/modal/modal.component.html +++ b/devui/modal/modal.component.html @@ -22,7 +22,13 @@ tabindex="1" #dialog > -
+
diff --git a/devui/modal/modal.component.scss b/devui/modal/modal.component.scss index b40e3f5d..2fdb819e 100755 --- a/devui/modal/modal.component.scss +++ b/devui/modal/modal.component.scss @@ -33,6 +33,17 @@ width: auto; margin: 0 auto; + .maximize { + -webkit-transition: none; + transition: none; + transform: none; + width: 100vw; + top: 0; + left: 0; + max-height: 100vh; + height: 100vh; + } + &.place-at-center { margin: auto; } @@ -56,6 +67,17 @@ background-color: $devui-shadow; } +.modal-maximized { + -webkit-transition: none; + transition: none; + transform: none; + width: 100vw !important; + top: 0 !important; + left: 0 !important; + max-height: 100vh; + height: 100vh; +} + :host ::ng-deep .modal-content { position: relative; border-radius: $devui-border-radius-card; diff --git a/devui/modal/modal.component.ts b/devui/modal/modal.component.ts index 50d88bda..804681b8 100755 --- a/devui/modal/modal.component.ts +++ b/devui/modal/modal.component.ts @@ -9,14 +9,10 @@ import { ModalContainerDirective } from './modal.directive'; selector: 'd-modal', templateUrl: './modal.component.html', styleUrls: ['./modal.component.scss'], - animations: [ - backdropFadeInOut, - wipeInOutAnimation - ], + animations: [backdropFadeInOut, wipeInOutAnimation], preserveWhitespaces: false, }) export class ModalComponent implements OnInit, OnDestroy { - @Input() id: string; @Input() showAnimation = true; @Input() width: string; @@ -46,38 +42,37 @@ export class ModalComponent implements OnInit, OnDestroy { contentTemplate: TemplateRef; document: Document; - constructor( - private elementRef: ElementRef, - private renderer: Renderer2, - @Inject(DOCUMENT) private doc: any - ) { - this.backdropCloseable = isUndefined(this.backdropCloseable) - ? true - : this.backdropCloseable; + maximized = false; + _oldWidth: string; + + constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private doc: any) { + this.backdropCloseable = isUndefined(this.backdropCloseable) ? true : this.backdropCloseable; this.document = this.doc; } ngOnInit() { if (this.escapable) { - this.pressEscToClose.add(fromEvent(window, 'keydown').subscribe((event) => { - if (event['keyCode'] === 27) { - this.hide(); - } - })); + this.pressEscToClose.add( + fromEvent(window, 'keydown').subscribe((event) => { + if (event['keyCode'] === 27) { + this.hide(); + } + }) + ); } const handle = this.elementRef.nativeElement.querySelector('#d-modal-header'); if (handle) { this.draggableHandleEl = handle; } + + this._oldWidth = this.width; } // Will overwrite this method in modal service - onHidden() { - } + onHidden() {} - updateButtonOptions(buttonOptions: Array) { - } + updateButtonOptions(buttonOptions: Array) {} canHideModel() { let hiddenResult = Promise.resolve(true); @@ -100,8 +95,12 @@ export class ModalComponent implements OnInit, OnDestroy { onModalClick = ($event) => { // 一定要document.contains($event.target)，因为$event.target可能已经不在document里了，这个时候就不能进hide了,使用document.body兼容IE - if (this.backdropCloseable && !this.ignoreBackDropClick && - (!this.dialogElement.nativeElement.contains($event.target) && this.document.body.contains($event.target))) { + if ( + this.backdropCloseable && + !this.ignoreBackDropClick && + !this.dialogElement.nativeElement.contains($event.target) && + this.document.body.contains($event.target) + ) { this.hide(); } this.ignoreBackDropClick = false; @@ -127,6 +126,17 @@ export class ModalComponent implements OnInit, OnDestroy { }); } + maximize() { + this.maximized = !this.maximized; + if (this.maximized) { + this.width = '100vw'; + this.renderer.setStyle(this.document.body, 'overflow', 'hidden'); + } else { + this.width = this._oldWidth; + this.renderer.setStyle(this.document.body, 'overflow', 'auto'); + } + } + onAnimationEnd($event) { if ($event.fromState !== 'void' && this.animateState === 'void') { this.onHidden(); @@ -155,16 +165,16 @@ export class ModalComponent implements OnInit, OnDestroy { resolveTransformTranslate() { let autoOffsetYByPlacement; switch (this.placement) { - case 'top': - autoOffsetYByPlacement = '40px'; - break; - case 'bottom': - autoOffsetYByPlacement = '-40px'; - break; - case 'center': - default: - autoOffsetYByPlacement = '0'; - break; + case 'top': + autoOffsetYByPlacement = '40px'; + break; + case 'bottom': + autoOffsetYByPlacement = '-40px'; + break; + case 'center': + default: + autoOffsetYByPlacement = '0'; + break; } const offsetX = this.offsetX ? this.offsetX : '0'; const offsetY = this.offsetY ? this.offsetY : autoOffsetYByPlacement; diff --git a/devui/modal/modal.types.ts b/devui/modal/modal.types.ts index fa3f4719..430b185d 100755 --- a/devui/modal/modal.types.ts +++ b/devui/modal/modal.types.ts @@ -50,9 +50,11 @@ export interface IDialogOptions { componentFactoryResolver?: ComponentFactoryResolver; injector?: Injector; onClose?: Function; + onMaximize?: Function; beforeHidden?: () => boolean | Promise | Observable; dialogtype?: string; draggable?: boolean; + showMaximizeBtn?: boolean; showCloseBtn?: boolean; placement?: 'center' | 'top' | 'bottom'; offsetX?: string; diff --git a/devui/style/devui-for-mobile.scss b/devui/style/devui-for-mobile.scss index 467c7275..7bf89af6 100644 --- a/devui/style/devui-for-mobile.scss +++ b/devui/style/devui-for-mobile.scss @@ -77,6 +77,13 @@ d-modal { .modal { padding: 32px 20px 0 20px; + overflow-y: inherit !important; + + .modal-dialog .maximize { + width: calc(100vw - 40px) !important; + max-height: calc(100vh - 64px) !important; + height: calc(100vh - 64px) !important; + } } d-modal-header .modal-header .modal-header-close { @@ -89,5 +96,16 @@ transform: scale(0.8); box-shadow: $devui-shadow-length-base $devui-light-shadow; } + + d-modal-header .modal-header .modal-header-maximized { + left: 32px; + top: -32px; + background: $devui-base-bg; + border-radius: 100%; + padding-left: 8px; + width: 32px; + transform: scale(0.8); + box-shadow: $devui-shadow-length-base $devui-light-shadow; + } } } diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json index 6160dc2d..5c50c515 100644 --- a/src/assets/i18n/en-us.json +++ b/src/assets/i18n/en-us.json @@ -2583,6 +2583,10 @@ "title": "Standard Dialog Box", "description": "Standard dialog boxes that can be dragged using the dialogService." }, + "maximizeDemo":{ + "title":"Maximize Dialog Box", + "description":"You can use the showMaximizeBtn api to set visibility of maximize button." + }, "customizeDemo": { "title": "Custom Dialog Box", "description": "You can use modalService to customize all the contents in the dialog box." @@ -2621,6 +2625,7 @@ }, "anchorLinkValues": { "standard-dialog": "Standard Dialog Box", + "maximize-dialog":"Maximize Dialog Box", "custom-dialog": "Custom Dialog Box", "intercept-dialog-closed": "Blocking dialog box closed", "message-hint": "Information", @@ -4538,4 +4543,4 @@ "group": "Wechat Group", "tabDesign": "Design" } -} \ No newline at end of file +} diff --git a/src/assets/i18n/zh-cn.json b/src/assets/i18n/zh-cn.json index c94f0427..708df099 100644 --- a/src/assets/i18n/zh-cn.json +++ b/src/assets/i18n/zh-cn.json @@ -2819,6 +2819,10 @@ "title": "标准对话框", "description": "使用dialogService可拖拽的标准对话框。" }, + "maximizeDemo":{ + "title":"最大化对话框", + "description":"使用showMaximizeBtn可设置最大化/退出最大化按钮的显示/隐藏" + }, "customizeDemo": { "title": "自定义对话框", "description": "使用modalService可以自定义对话框内的所有内容。" @@ -2857,6 +2861,7 @@ }, "anchorLinkValues": { "standard-dialog": "标准对话框", + "maximize-dialog":"最大化对话框", "custom-dialog": "自定义对话框", "intercept-dialog-closed": "拦截对话框关闭", "message-hint": "信息提示", @@ -5060,4 +5065,4 @@ "group": "官方交流群", "tabDesign": "设计" } -} \ No newline at end of file +}