From 20209b8a062b340b653f439038a203c8fc00adb7 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Fri, 31 Jan 2020 16:34:35 +0300 Subject: [PATCH 01/10] Fixed #179 - Dialog header not visible --- src/components/dialog/Dialog.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index ec897becc..45f11f438 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -217,11 +217,12 @@ export default { pointer-events: auto; } .p-dialog { + display: flex; + flex-direction: column; padding: 0; pointer-events: auto; max-height: 90%; margin: 5% auto; - overflow-y: auto; transform: scale(1); } .p-dialog .p-dialog-titlebar { @@ -235,6 +236,7 @@ export default { padding: .5em .75em; background: none; zoom: 1; + overflow-y: auto; } .p-dialog-resizable .p-dialog-content { overflow: auto; From 82e6ddf102673f20aba8d4139f500b12e9b15b7e Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 10:25:08 +0300 Subject: [PATCH 02/10] Fixed #182 - Style classes are not rendered correctly on Dialog --- src/components/dialog/Dialog.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 45f11f438..0aa6bf7ad 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -162,14 +162,17 @@ export default { }, removeStylesFromMask() { if (this.$refs.mask) { - this.dialogClasses = this.$vnode.data.class; this.dialogStyles = this.$vnode.data.style; - DomHandler.removeClass(this.$refs.mask, this.$vnode.data.class); - if (this.$vnode.data.style) { - Object.keys(this.$vnode.data.style).forEach((key) => { + if (this.dialogStyles) { + Object.keys(this.dialogStyles).forEach((key) => { this.$refs.mask.style[key] = ''; }); } + + this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass; + if (this.dialogClasses) { + this.$refs.mask.classList = 'p-dialog-wrapper' + (this.modal && ' p-component-overlay p-dialog-mask p-fadein'); + } } } }, From d41c339c60c6de91e1cdac66d87fbf71e611610a Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 11:02:27 +0300 Subject: [PATCH 03/10] Refactor #179 --- src/components/dialog/Dialog.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 0aa6bf7ad..512ba7c14 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -225,7 +225,7 @@ export default { padding: 0; pointer-events: auto; max-height: 90%; - margin: 5% auto; + margin: 5% 0; transform: scale(1); } .p-dialog .p-dialog-titlebar { From 768485ffcf41d55567f67f8c441f535a0cfa6df3 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 12:08:54 +0300 Subject: [PATCH 04/10] Fixed #183 - Add maximizable property to Dialog --- src/components/dialog/Dialog.vue | 36 +++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 512ba7c14..1a246459e 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -7,6 +7,9 @@ {{header}}
+ @@ -34,6 +37,7 @@ export default { modal: Boolean, contentStyle: null, rtl: Boolean, + maximizable: Boolean, closable: { type: Boolean, default: true @@ -59,7 +63,8 @@ export default { return { dialogClasses: null, dialogStyles: null, - maskVisible: this.visible + maskVisible: this.visible, + maximized: false } }, documentKeydownListener: null, @@ -122,6 +127,18 @@ export default { this.unbindDocumentKeydownListener(); } }, + maximize() { + this.maximized = !this.maximized; + + if (!this.modal) { + if (this.maximized) { + DomHandler.addClass(document.body, 'p-overflow-hidden'); + } + else { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); + } + } + }, onKeyDown(event) { if (event.which === 9) { event.preventDefault(); @@ -189,9 +206,16 @@ export default { }, containerClass() { return ['p-dialog p-component', { - 'p-dialog-rtl': this.rtl + 'p-dialog-rtl': this.rtl, + 'p-dialog-maximized': this.maximizable && this.maximized }, this.dialogClasses]; }, + maximizeIconClass() { + return ['p-dialog-titlebar-maximize-icon pi', { + 'pi-window-maximize': !this.maximized, + 'pi-window-minimize': this.maximized + }]; + }, containerStyle() { return this.dialogStyles; }, @@ -232,6 +256,7 @@ export default { padding: .5em .75em; position: relative; border: 0; + flex-shrink: 0; } .p-dialog .p-dialog-content { position: relative; @@ -280,6 +305,7 @@ export default { .p-dialog-footer { padding: 1em; text-align: right; + flex-shrink: 0; } /* ConfirmDialog */ .p-confirmdialog { @@ -331,10 +357,10 @@ export default { transform: none; width: 100vw !important; max-height: 100%; - margin: auto; + height: 100%; + margin: 0; } .p-dialog-maximized .p-dialog-content { - -webkit-transition: height .3s; - transition: height .3s; + flex-grow: 1; } From 0691fdc70d4211c0720e54235f09bb7adae00703 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 12:09:07 +0300 Subject: [PATCH 05/10] Update Dialog demo --- src/views/dialog/DialogDemo.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue index 0ec192631..9dc97830c 100644 --- a/src/views/dialog/DialogDemo.vue +++ b/src/views/dialog/DialogDemo.vue @@ -9,7 +9,7 @@
- \ No newline at end of file + From 8447b3892f007cb4ce2a8caa103beecbb6c12161 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 12:44:20 +0300 Subject: [PATCH 07/10] Refactor #183 --- src/components/dialog/Dialog.vue | 42 +++++++++++++++++--------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 1a246459e..f0d76ac49 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -79,7 +79,7 @@ export default { this.removeStylesFromMask(); }, beforeDestroy() { - this.disableModality(); + this.disableDocumentSettings(); }, methods: { close() { @@ -95,14 +95,14 @@ export default { this.$emit('show'); this.focus(); - this.enableModality(); + this.enableDocumentSettings(); }, onLeave() { this.$emit('hide'); }, onAfterLeave() { this.maskVisible = false; - this.disableModality(); + this.disableDocumentSettings(); }, onAppear() { if (this.visible) { @@ -115,28 +115,32 @@ export default { focusable.focus(); } }, - enableModality() { - if (this.modal) { - DomHandler.addClass(document.body, 'p-overflow-hidden'); - this.bindDocumentKeydownListener(); - } - }, - disableModality() { - if (this.modal) { - DomHandler.removeClass(document.body, 'p-overflow-hidden'); - this.unbindDocumentKeydownListener(); - } - }, maximize() { this.maximized = !this.maximized; if (!this.modal) { - if (this.maximized) { + if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden'); - } - else { + else DomHandler.removeClass(document.body, 'p-overflow-hidden'); - } + } + }, + enableDocumentSettings() { + if (this.modal) { + DomHandler.addClass(document.body, 'p-overflow-hidden'); + this.bindDocumentKeydownListener(); + } + else if (this.maximizable && this.maximized) { + DomHandler.addClass(document.body, 'p-overflow-hidden'); + } + }, + disableDocumentSettings() { + if (this.modal) { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); + this.unbindDocumentKeydownListener(); + } + else if (this.maximizable && this.maximized) { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); } }, onKeyDown(event) { From b3a80cf12825918040fe3b28646b54bcaf4db173 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Feb 2020 15:18:00 +0300 Subject: [PATCH 08/10] Fixed #184 - Add position property to Dialog --- src/components/dialog/Dialog.vue | 48 ++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 5 deletions(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index f0d76ac49..1a87820a2 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -57,6 +57,10 @@ export default { ariaCloseLabel: { type: String, default: 'close' + }, + position: { + type: String, + default: 'center' } }, data() { @@ -181,6 +185,12 @@ export default { this.documentKeydownListener = null; } }, + getPositionClass() { + const positions = ['left', 'right', 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight']; + const pos = positions.find(item => item === this.position); + + return pos ? `p-dialog-${pos}` : ''; + }, removeStylesFromMask() { if (this.$refs.mask) { this.dialogStyles = this.$vnode.data.style; @@ -192,7 +202,7 @@ export default { this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass; if (this.dialogClasses) { - this.$refs.mask.classList = 'p-dialog-wrapper' + (this.modal && ' p-component-overlay p-dialog-mask p-fadein'); + this.$refs.mask.classList = 'p-dialog-wrapper' + (this.modal && ' p-component-overlay p-dialog-mask p-fadein ') + this.getPositionClass(); } } } @@ -205,8 +215,8 @@ export default { }, wrapperClass() { return ['p-dialog-wrapper', { - 'p-component-overlay p-dialog-mask p-fadein': this.modal - }]; + 'p-component-overlay p-dialog-mask p-fadein': this.modal, + }, this.getPositionClass()]; }, containerClass() { return ['p-dialog p-component', { @@ -253,7 +263,6 @@ export default { padding: 0; pointer-events: auto; max-height: 90%; - margin: 5% 0; transform: scale(1); } .p-dialog .p-dialog-titlebar { @@ -362,9 +371,38 @@ export default { width: 100vw !important; max-height: 100%; height: 100%; - margin: 0; } .p-dialog-maximized .p-dialog-content { flex-grow: 1; } + +/* Position */ +.p-dialog-left { + justify-content: flex-start; +} +.p-dialog-right { + justify-content: flex-end; +} +.p-dialog-top { + align-items: flex-start; +} +.p-dialog-topLeft { + justify-content: flex-start; + align-items: flex-start; +} +.p-dialog-topRight { + justify-content: flex-end; + align-items: flex-start; +} +.p-dialog-bottom { + align-items: flex-end; +} +.p-dialog-bottomLeft { + justify-content: flex-start; + align-items: flex-end; +} +.p-dialog-bottomRight { + justify-content: flex-end; + align-items: flex-end; +} From aeed505de4a4c0d7a57379330db35920de9f8e84 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 4 Feb 2020 10:46:11 +0300 Subject: [PATCH 09/10] Added position animations --- src/components/dialog/Dialog.vue | 81 +++++++++++--- src/views/dialog/DialogDoc.vue | 176 +++++++++++++++++++++++++++---- 2 files changed, 224 insertions(+), 33 deletions(-) diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 1a87820a2..13dca1237 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -1,7 +1,7 @@