From fd831a27f4e9c6bcd5c40f3449d63546fba2560d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 20 May 2022 00:56:23 +0300 Subject: experimental disjointed popups --- src/components/popover/popover.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index a30a37c9..db283ef0 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -43,6 +43,7 @@ const Popover = { methods: { containerBoundingClientRect () { const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent + console.log(container) return container.getBoundingClientRect() }, updateStyles () { @@ -125,10 +126,17 @@ const Popover = { // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. + console.log(translateX + screenBox.x + screenBox.width) + console.log(Math.round(parentBounds.width)) this.styles = { opacity: 1, - transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` + // transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` + left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`, + top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`, + maxWidth: `${Math.round(parentBounds.width)}px`, + position: 'fixed' } + console.log(this.styles) }, showPopover () { const wasHidden = this.hidden -- cgit v1.2.3-70-g09d2 From fa398b5e7aeb53709618d69de086a08b2248ba8c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 8 Jun 2022 03:08:03 +0300 Subject: popup offsets should be fixed now --- src/components/popover/popover.js | 43 +++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 24 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index db283ef0..7d1ad1d6 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -43,7 +43,6 @@ const Popover = { methods: { containerBoundingClientRect () { const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent - console.log(container) return container.getBoundingClientRect() }, updateStyles () { @@ -58,14 +57,15 @@ const Popover = { // its children are what are inside the slot. Expect only one v-slot:trigger. const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el // SVGs don't have offsetWidth/Height, use fallback - const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight - const screenBox = anchorEl.getBoundingClientRect() + const anchorScreenBox = anchorEl.getBoundingClientRect() + // Screen position of the origin point for popover - const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top } + const origin = { x: anchorScreenBox.left, y: anchorScreenBox.top } const content = this.$refs.content + // Minor optimization, don't call a slow reflow call if we don't have to - const parentBounds = this.boundTo && + const parentScreenBox = this.boundTo && (this.boundTo.x === 'container' || this.boundTo.y === 'container') && this.containerBoundingClientRect() @@ -74,31 +74,30 @@ const Popover = { // What are the screen bounds for the popover? Viewport vs container // when using viewport, using default margin values to dodge the navbar const xBounds = this.boundTo && this.boundTo.x === 'container' ? { - min: parentBounds.left + (margin.left || 0), - max: parentBounds.right - (margin.right || 0) + min: parentScreenBox.left + (margin.left || 0), + max: parentScreenBox.right - (margin.right || 0) } : { min: 0 + (margin.left || 10), max: window.innerWidth - (margin.right || 10) } const yBounds = this.boundTo && this.boundTo.y === 'container' ? { - min: parentBounds.top + (margin.top || 0), - max: parentBounds.bottom - (margin.bottom || 0) + min: parentScreenBox.top + (margin.top || 0), + max: parentScreenBox.bottom - (margin.bottom || 0) } : { min: 0 + (margin.top || 50), max: window.innerHeight - (margin.bottom || 5) } let horizOffset = 0 - // If overflowing from left, move it so that it doesn't - if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) { - horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min + if ((origin.x) < xBounds.min) { + horizOffset += -origin.x + xBounds.min } // If overflowing from right, move it so that it doesn't - if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) { - horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max + if ((origin.x + horizOffset + content.offsetWidth) > xBounds.max) { + horizOffset -= (origin.x + horizOffset + content.offsetWidth) - xBounds.max } // Default to whatever user wished with placement prop @@ -118,25 +117,21 @@ const Popover = { const yOffset = (this.offset && this.offset.y) || 0 const translateY = usingTop - ? -anchorHeight + vPadding - yOffset - content.offsetHeight - : yOffset + ? yOffset - content.offsetHeight - vPadding + : yOffset + anchorHeight + vPadding const xOffset = (this.offset && this.offset.x) || 0 - const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset + const translateX = horizOffset + xOffset // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. - console.log(translateX + screenBox.x + screenBox.width) - console.log(Math.round(parentBounds.width)) this.styles = { opacity: 1, - // transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` - left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`, - top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`, - maxWidth: `${Math.round(parentBounds.width)}px`, + left: `${Math.round(origin.x + translateX)}px`, + top: `${Math.round(origin.y + translateY)}px`, + maxWidth: `${parentScreenBox ? Math.round(parentScreenBox.width) : 0}px`, position: 'fixed' } - console.log(this.styles) }, showPopover () { const wasHidden = this.hidden -- cgit v1.2.3-70-g09d2 From 832d7f2354b2f70e4100ac343c6ac4dd985eac3a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 8 Jun 2022 03:18:37 +0300 Subject: more fixes to chat popovers --- src/components/chat_message/chat_message.vue | 2 +- src/components/popover/popover.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index d62b831d..0e1a5375 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -44,7 +44,7 @@ Date: Wed, 8 Jun 2022 03:22:15 +0300 Subject: hide popovers on scroll --- src/components/popover/popover.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index c65689bd..09e07b4c 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -168,6 +168,9 @@ const Popover = { if (this.hidden) return if (this.$el.contains(e.target)) return this.hidePopover() + }, + onScroll () { + this.hidePopover() } }, updated () { @@ -183,9 +186,11 @@ const Popover = { }, created () { document.addEventListener('click', this.onClickOutside) + window.addEventListener('scroll', this.onScroll) }, unmounted () { document.removeEventListener('click', this.onClickOutside) + window.removeEventListener('scroll', this.onScroll) this.hidePopover() } } -- cgit v1.2.3-70-g09d2 From 71b5462a059708e036bd2c998758e8fa1e205450 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 8 Jun 2022 03:22:50 +0300 Subject: vPadding is no longer needed --- src/components/popover/popover.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 09e07b4c..1e8b3fb6 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -109,16 +109,10 @@ const Popover = { if (origin.y + content.offsetHeight > yBounds.max) usingTop = true if (origin.y - content.offsetHeight < yBounds.min) usingTop = false - let vPadding = 0 - if (this.removePadding && usingTop) { - const anchorStyle = getComputedStyle(anchorEl) - vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom) - } - const yOffset = (this.offset && this.offset.y) || 0 const translateY = usingTop - ? yOffset - content.offsetHeight - vPadding - : yOffset + anchorHeight + vPadding + ? yOffset - content.offsetHeight + : yOffset + anchorHeight const xOffset = (this.offset && this.offset.x) || 0 const translateX = horizOffset + xOffset -- cgit v1.2.3-70-g09d2 From ce00954e7c0c6b4d5640c886f88065db749d49c7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jun 2022 15:21:09 +0300 Subject: turns out it is needed still + some code cleanup --- src/components/popover/popover.js | 40 +++++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 14 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 1e8b3fb6..a91c084f 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -58,10 +58,18 @@ const Popover = { const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el // SVGs don't have offsetWidth/Height, use fallback const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight + const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth const anchorScreenBox = anchorEl.getBoundingClientRect() - // Screen position of the origin point for popover - const origin = { x: anchorScreenBox.left, y: anchorScreenBox.top } + const anchorStyle = getComputedStyle(anchorEl) + const topPadding = parseFloat(anchorStyle.paddingTop) + const bottomPadding = parseFloat(anchorStyle.paddingBottom) + + // Screen position of the origin point for popover = center of the anchor + const origin = { + x: anchorScreenBox.left + anchorWidth * 0.5, + y: anchorScreenBox.top + anchorHeight * 0.5 + } const content = this.$refs.content // Minor optimization, don't call a slow reflow call if we don't have to @@ -89,15 +97,17 @@ const Popover = { max: window.innerHeight - (margin.bottom || 5) } - let horizOffset = 0 + let horizOffset = content.offsetWidth * -0.5 + const leftBorder = origin.x + horizOffset + const rightBorder = origin.x - horizOffset // If overflowing from left, move it so that it doesn't - if ((origin.x) < xBounds.min) { - horizOffset += -origin.x + xBounds.min + if (leftBorder < xBounds.min) { + horizOffset += xBounds.min - leftBorder } // If overflowing from right, move it so that it doesn't - if ((origin.x + horizOffset + content.offsetWidth) > xBounds.max) { - horizOffset -= (origin.x + horizOffset + content.offsetWidth) - xBounds.max + if (rightBorder > xBounds.max) { + horizOffset -= rightBorder - xBounds.max } // Default to whatever user wished with placement prop @@ -106,23 +116,25 @@ const Popover = { // Handle special cases, first force to displaying on top if there's not space on bottom, // regardless of what placement value was. Then check if there's not space on top, and // force to bottom, again regardless of what placement value was. - if (origin.y + content.offsetHeight > yBounds.max) usingTop = true - if (origin.y - content.offsetHeight < yBounds.min) usingTop = false + const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0) + const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0) + if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true + if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false const yOffset = (this.offset && this.offset.y) || 0 const translateY = usingTop - ? yOffset - content.offsetHeight - : yOffset + anchorHeight + ? topBoundary - yOffset - content.offsetHeight + : bottomBoundary + yOffset const xOffset = (this.offset && this.offset.x) || 0 - const translateX = horizOffset + xOffset + const translateX = origin.x + horizOffset + xOffset // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. this.styles = { opacity: 1, - left: `${Math.round(origin.x + translateX)}px`, - top: `${Math.round(origin.y + translateY)}px`, + left: `${Math.round(translateX)}px`, + top: `${Math.round(translateY)}px`, position: 'fixed' } -- cgit v1.2.3-70-g09d2 From 55adcd822e194be8aaeb9d6b649de90e9d5e1e45 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jun 2022 16:31:56 +0300 Subject: fix animations, replace ugly old mentionlink tooltips with new usercard ones --- src/App.scss | 2 +- src/components/mention_link/mention_link.js | 8 +- src/components/mention_link/mention_link.scss | 7 +- src/components/mention_link/mention_link.vue | 133 ++++++++++++--------- src/components/popover/popover.js | 40 +++++-- src/components/popover/popover.vue | 36 +++--- src/components/settings_modal/tabs/general_tab.vue | 2 +- src/i18n/en.json | 2 +- 8 files changed, 140 insertions(+), 90 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/App.scss b/src/App.scss index 5cd0b96e..79c07683 100644 --- a/src/App.scss +++ b/src/App.scss @@ -829,7 +829,7 @@ option { // Vue transitions .fade-enter-active, .fade-leave-active { - transition: opacity 0.2s; + transition: opacity 0.3s; } .fade-enter-from, diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 55eea195..4b088f88 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { mapGetters, mapState } from 'vuex' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import UserAvatar from '../user_avatar/user_avatar.vue' +import { defineAsyncComponent } from 'vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faAt @@ -14,7 +15,9 @@ library.add( const MentionLink = { name: 'MentionLink', components: { - UserAvatar + UserAvatar, + Popover: defineAsyncComponent(() => import('../popover/popover.vue')), + UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')) }, props: { url: { @@ -36,6 +39,7 @@ const MentionLink = { }, methods: { onClick () { + if (this.shouldShowTooltip) return const link = generateProfileLink( this.userId || this.user.id, this.userScreenName || this.user.screen_name @@ -110,7 +114,7 @@ const MentionLink = { } }, shouldShowTooltip () { - return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote + return this.mergedConfig.mentionLinkShowTooltip }, shouldShowAvatar () { return this.mergedConfig.mentionLinkShowAvatar diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 1d856ff9..3b3a05b1 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -101,7 +101,6 @@ } &:hover .new .full { - opacity: 1; pointer-events: initial; } @@ -113,3 +112,9 @@ color: var(--faint, $fallback--faint); } } + +.mention-link-popover { + max-width: 70ch; + max-height: 20rem; + overflow: hidden; +} diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 022f04c7..686ad27f 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -9,66 +9,85 @@ class="original" target="_blank" v-html="content" - /> + - - - {{ !useAtIcon ? '@' : '' }} - - {{ ' ' + $t('status.you') }} - - + + + diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index a91c084f..3c3a95bd 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -31,13 +31,18 @@ const Popover = { // If true, subtract padding when calculating position for the popover, // use it when popover offset looks to be different on top vs bottom. - removePadding: Boolean + removePadding: Boolean, + + // self-explanatory (i hope) + disabled: Boolean }, data () { return { hidden: true, - styles: { opacity: 0 }, - oldSize: { width: 0, height: 0 } + styles: {}, + oldSize: { width: 0, height: 0 }, + // used to avoid blinking if hovered onto popover + graceTimeout: null } }, methods: { @@ -47,9 +52,7 @@ const Popover = { }, updateStyles () { if (this.hidden) { - this.styles = { - opacity: 0 - } + this.styles = {} return } @@ -132,7 +135,6 @@ const Popover = { // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. this.styles = { - opacity: 1, left: `${Math.round(translateX)}px`, top: `${Math.round(translateY)}px`, position: 'fixed' @@ -143,6 +145,7 @@ const Popover = { } }, showPopover () { + if (this.disabled) return const wasHidden = this.hidden this.hidden = false this.$nextTick(() => { @@ -153,13 +156,30 @@ const Popover = { hidePopover () { if (!this.hidden) this.$emit('close') this.hidden = true - this.styles = { opacity: 0 } }, onMouseenter (e) { - if (this.trigger === 'hover') this.showPopover() + if (this.trigger === 'hover') { + clearTimeout(this.graceTimeout) + this.graceTimeout = null + this.showPopover() + } }, onMouseleave (e) { - if (this.trigger === 'hover') this.hidePopover() + if (this.trigger === 'hover') { + this.graceTimeout = setTimeout(() => this.hidePopover(), 1) + } + }, + onMouseenterContent (e) { + if (this.trigger === 'hover') { + clearTimeout(this.graceTimeout) + this.graceTimeout = null + this.showPopover() + } + }, + onMouseleaveContent (e) { + if (this.trigger === 'hover') { + this.graceTimeout = setTimeout(() => this.hidePopover(), 1) + } }, onClick (e) { if (this.trigger === 'click') { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 6103fbdc..528c4fb2 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -1,5 +1,5 @@ + + -- cgit v1.2.3-70-g09d2 From cb89646c56288f42896d34e3b405621e08c88575 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 20 Jun 2022 23:55:39 +0300 Subject: optimization: only process resize/scroll events when popup is open --- src/components/popover/popover.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 7f4c1cac..e0c22e86 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -47,6 +47,7 @@ const Popover = { hidden: true, styles: {}, oldSize: { width: 0, height: 0 }, + scrollable: null, // used to avoid blinking if hovered onto popover graceTimeout: null } @@ -175,14 +176,25 @@ const Popover = { if (this.disabled) return const wasHidden = this.hidden this.hidden = false + if (this.trigger === 'click') { + document.addEventListener('click', this.onClickOutside) + } + this.scrollable.addEventListener('scroll', this.onScroll) + this.scrollable.addEventListener('resize', this.onResize) this.$nextTick(() => { if (wasHidden) this.$emit('show') this.updateStyles() }) }, hidePopover () { + if (this.disabled) return if (!this.hidden) this.$emit('close') this.hidden = true + if (this.trigger === 'click') { + document.removeEventListener('click', this.onClickOutside) + } + this.scrollable.removeEventListener('scroll', this.onScroll) + this.scrollable.removeEventListener('resize', this.onResize) }, onMouseenter (e) { if (this.trigger === 'hover') { @@ -225,6 +237,9 @@ const Popover = { }, onScroll (e) { this.updateStyles() + }, + onResize (e) { + this.updateStyles() } }, updated () { @@ -241,14 +256,9 @@ const Popover = { mounted () { let scrollable = this.$refs.trigger.closest('.column.-scrollable') if (!scrollable) scrollable = window - document.addEventListener('click', this.onClickOutside) - scrollable.addEventListener('scroll', this.onScroll) + this.scrollable = scrollable }, beforeUnmount () { - let scrollable = this.$refs.trigger.closest('.column.-scrollable') - if (!scrollable) scrollable = window - document.removeEventListener('click', this.onClickOutside) - scrollable.removeEventListener('scroll', this.onScroll) this.hidePopover() } } -- cgit v1.2.3-70-g09d2 From 93293db038a864aafd0f6da3df15bc86e0370bfc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 21 Jun 2022 15:57:42 +0300 Subject: fix popovers not scrolling in mobile notifications --- src/components/popover/popover.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 58de83df..cff9b174 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -254,7 +254,8 @@ const Popover = { } }, mounted () { - let scrollable = this.$refs.trigger.closest('.column.-scrollable') + let scrollable = this.$refs.trigger.closest('.column.-scrollable') || + this.$refs.trigger.closest('.mobile-notifications') if (!scrollable) scrollable = window this.scrollable = scrollable }, -- cgit v1.2.3-70-g09d2 From 872db65fd86aaa605789383e629321e32447a997 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 22 Jun 2022 00:30:10 +0300 Subject: slight z-index refactor and attempt at organizing it --- src/App.scss | 9 ++++++++- src/boot/after_store.js | 3 +++ src/components/desktop_nav/desktop_nav.scss | 1 + src/components/emoji_picker/emoji_picker.scss | 3 ++- src/components/global_notice_list/global_notice_list.vue | 2 +- src/components/media_modal/media_modal.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 6 ++++-- src/components/modal/modal.vue | 5 ++++- src/components/notifications/notifications.js | 10 ++++++++++ src/components/popover/popover.js | 4 ++++ src/components/popover/popover.vue | 4 ++-- src/components/shout_panel/shout_panel.vue | 2 +- src/components/side_drawer/side_drawer.vue | 2 +- 13 files changed, 42 insertions(+), 11 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/App.scss b/src/App.scss index 79c07683..78835c61 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,6 +4,13 @@ :root { --navbar-height: 3.5rem; --post-line-height: 1.4; + // Z-Index stuff + --ZI_media_modal: 90000; + --ZI_navbar_popovers: 85000; + --ZI_navbar: 80000; + --ZI_modals_popovers: 75000; + --ZI_modals: 70000; + --ZI_popovers: 60000; } html { @@ -117,7 +124,7 @@ i[class*=icon-], } nav { - z-index: 1000; + z-index: var(--ZI_navbar); color: var(--topBarText); background-color: $fallback--fg; background-color: var(--topBar, $fallback--fg); diff --git a/src/boot/after_store.js b/src/boot/after_store.js index f655c38f..894a68e1 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -396,6 +396,9 @@ const afterStoreSetup = async ({ store, i18n }) => { app.component('FAIcon', FontAwesomeIcon) app.component('FALayers', FontAwesomeLayers) + // remove after vue 3.3 + app.config.unwrapInjectedRef = true + app.mount('#app') return app diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 0ca9802e..e9a47632 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -2,6 +2,7 @@ .DesktopNav { width: 100%; + z-index: var(--ZI_navbar); a { color: var(--topBarLink, $fallback--link); diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 2055e02e..a2f17c51 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -7,7 +7,8 @@ right: 0; left: 0; margin: 0 !important; - z-index: 100; + // TODO: actually use popover in emoji picker + z-index: var(--ZI_popovers); background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue index ddc45b81..09904761 100644 --- a/src/components/global_notice_list/global_notice_list.vue +++ b/src/components/global_notice_list/global_notice_list.vue @@ -32,7 +32,7 @@ top: 50px; width: 100%; pointer-events: none; - z-index: 1001; + z-index: var(--ZI_popovers); display: flex; flex-direction: column; align-items: center; diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index b93d3d84..d59055b3 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em; $modal-view-button-icon-margin: 0.5em; .modal-view.media-modal-view { - z-index: 900000; + z-index: var(--ZI_media_modal); flex-direction: column; .modal-view-button-arrow, diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index d2d48a03..c58d9e7c 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -86,6 +86,8 @@ @import '../../_variables.scss'; .MobileNav { + z-index: var(--ZI_navbar); + .mobile-nav { display: grid; line-height: var(--navbar-height); @@ -147,7 +149,7 @@ transition-property: transform; transition-duration: 0.25s; transform: translateX(0); - z-index: 1001; + z-index: var(--ZI_navbar); -webkit-overflow-scrolling: touch; &.-closed { @@ -160,7 +162,7 @@ display: flex; align-items: center; justify-content: space-between; - z-index: 1; + z-index: calc(var(--ZI_navbar) + 100); width: 100%; height: 50px; line-height: 50px; diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index 9394efff..52d8d27e 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -22,6 +22,9 @@ export default { default: false } }, + provide: { + popoversZLayer: 'modals' + }, computed: { classes () { return { @@ -35,7 +38,7 @@ export default { diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index c35d01af..23547f2c 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -6,7 +6,7 @@ :bound-to="{ x: 'container' }" remove-padding > -