From 6f696874bbfa4edd6daf4d1c5f1970b9a391e7db Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 31 Jul 2022 01:41:00 +0300 Subject: [PATCH 1/3] popover stack --- src/components/popover/popover.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 843b22f3b..e477051f2 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -58,7 +58,9 @@ const Popover = { oldSize: { width: 0, height: 0 }, scrollable: null, // used to avoid blinking if hovered onto popover - graceTimeout: null + graceTimeout: null, + parentPopover: null, + childrenShown: new Set() } }, methods: { @@ -203,6 +205,7 @@ const Popover = { this.pinned = false const wasHidden = this.hidden this.hidden = false + this.parentPopover && this.parentPopover.onChildPopoverState(this, true) if (this.trigger === 'click' || this.stayOnClick) { document.addEventListener('click', this.onClickOutside) } @@ -217,6 +220,7 @@ const Popover = { if (this.disabled) return if (!this.hidden) this.$emit('close') this.hidden = true + this.parentPopover && this.parentPopover.onChildPopoverState(this, false) if (this.trigger === 'click') { document.removeEventListener('click', this.onClickOutside) } @@ -232,7 +236,7 @@ const Popover = { } }, onMouseleave (e) { - if (this.trigger === 'hover' && !this.pinned) { + if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) { this.graceTimeout = setTimeout(() => this.hidePopover(), 1) } }, @@ -245,7 +249,7 @@ const Popover = { } }, onMouseleaveContent (e) { - if (this.trigger === 'hover' && !this.pinned) { + if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) { this.graceTimeout = setTimeout(() => this.hidePopover(), 1) } }, @@ -262,7 +266,9 @@ const Popover = { if (this.hidden) return if (this.$refs.content.contains(e.target)) return if (this.$el.contains(e.target)) return + if (this.childrenShown.size > 0) return this.hidePopover() + if (this.parentPopover) this.parentPopover.onClickOutside(e) }, onClickContent (e) { if (this.trigger === 'hover' && this.stayOnClick) { @@ -274,6 +280,13 @@ const Popover = { }, onResize (e) { this.updateStyles() + }, + onChildPopoverState (childRef, state) { + if (state) { + this.childrenShown.add(childRef) + } else { + this.childrenShown.delete(childRef) + } } }, updated () { @@ -292,6 +305,11 @@ const Popover = { this.$refs.trigger.closest('.mobile-notifications') if (!scrollable) scrollable = window this.scrollable = scrollable + let parent = this.$parent + while (parent && parent.$.type.name !== 'Popover') { + parent = parent.$parent + } + this.parentPopover = parent }, beforeUnmount () { this.hidePopover() From 8ab30545b2b792ddae9cc439c3e617195e22d3ca Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 31 Jul 2022 01:45:38 +0300 Subject: [PATCH 2/3] pinned no longer needed --- src/components/popover/popover.js | 11 ++--------- src/components/popover/popover.vue | 20 -------------------- 2 files changed, 2 insertions(+), 29 deletions(-) diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index e477051f2..f23df826a 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -53,7 +53,6 @@ const Popover = { // with popovers refusing to be hidden when user wants to interact with something in below popover lockReEntry: false, hidden: true, - pinned: false, styles: {}, oldSize: { width: 0, height: 0 }, scrollable: null, @@ -202,7 +201,6 @@ const Popover = { }, showPopover () { if (this.disabled) return - this.pinned = false const wasHidden = this.hidden this.hidden = false this.parentPopover && this.parentPopover.onChildPopoverState(this, true) @@ -236,7 +234,7 @@ const Popover = { } }, onMouseleave (e) { - if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) { + if (this.trigger === 'hover' && this.childrenShown.size > 0) { this.graceTimeout = setTimeout(() => this.hidePopover(), 1) } }, @@ -249,7 +247,7 @@ const Popover = { } }, onMouseleaveContent (e) { - if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) { + if (this.trigger === 'hover' && this.childrenShown.size === 0) { this.graceTimeout = setTimeout(() => this.hidePopover(), 1) } }, @@ -270,11 +268,6 @@ const Popover = { this.hidePopover() if (this.parentPopover) this.parentPopover.onClickOutside(e) }, - onClickContent (e) { - if (this.trigger === 'hover' && this.stayOnClick) { - this.pinned = true - } - }, onScroll (e) { this.updateStyles() }, diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 9b67f4002..bd59cade9 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -28,15 +28,6 @@ class="popover-inner" :close="hidePopover" /> -
- -
@@ -61,17 +52,6 @@ box-shadow: var(--popupShadow); } -.pinned-tooltip-icon { - position: absolute; - top: -1em; - left: -1em; - width: 2em; - height: 2em; - display: flex; - justify-content: center; - align-items: center; -} - .popover-default { &:after { content: ''; From 6fc62a771a8e54ae84781805e2819094967237ac Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 31 Jul 2022 01:48:22 +0300 Subject: [PATCH 3/3] fix errors in console --- src/components/popover/popover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index f23df826a..67bb1037d 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -262,7 +262,7 @@ const Popover = { }, onClickOutside (e) { if (this.hidden) return - if (this.$refs.content.contains(e.target)) return + if (this.$refs.content && this.$refs.content.contains(e.target)) return if (this.$el.contains(e.target)) return if (this.childrenShown.size > 0) return this.hidePopover()