commit: 872db65fd86aaa605789383e629321e32447a997 parent 93293db038a864aafd0f6da3df15bc86e0370bfc Author: Henry Jameson <me@hjkos.com> Date: Wed, 22 Jun 2022 00:30:10 +0300 slight z-index refactor and attempt at organizing itDiffstat:
13 files changed, 42 insertions(+), 11 deletions(-)diff --git 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@@ -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 appdiff --git 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@@ -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@@ -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@@ -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@@ -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@@ -22,6 +22,9 @@ export default { default: false } }, + provide: { + popoversZLayer: 'modals' + }, computed: { classes () { return { @@ -35,7 +38,7 @@ export default { <style lang="scss"> .modal-view { - z-index: 2000; + z-index: var(--ZI_modals); position: fixed; top: 0; left: 0;diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js@@ -1,3 +1,4 @@ +import { computed } from 'vue' import { mapGetters } from 'vuex' import Notification from '../notification/notification.vue' import NotificationFilters from './notification_filters.vue' @@ -38,6 +39,11 @@ const Notifications = { seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT } }, + provide () { + return { + popoversZLayer: computed(() => this.popoversZLayer) + } + }, computed: { mainClass () { return this.minimalMode ? '' : 'panel panel-default' @@ -75,6 +81,10 @@ const Notifications = { } return map[layoutType] || '#notifs-sidebar' }, + popoversZLayer () { + const { layoutType } = this.$store.state.interface + return layoutType === 'mobile' ? 'navbar' : null + }, notificationsToDisplay () { return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount) },diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js@@ -42,6 +42,7 @@ const Popover = { // What selector (witin popover!) to use for determining center of popover overlayCentersSelector: String }, + inject: ['popoversZLayer'], // override popover z layer data () { return { hidden: true, @@ -168,6 +169,9 @@ const Popover = { top: `${Math.round(translateY)}px` } + if (this.popoversZLayer) { + this.styles['--ZI_popover_override'] = `var(--ZI_${this.popoversZLayer}_popovers)` + } if (parentScreenBox) { this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px` }diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue@@ -43,7 +43,7 @@ } .popover { - z-index: 90000; + z-index: var(--ZI_popover_override, var(--ZI_popovers)); position: fixed; min-width: 0; max-width: calc(100vw - 20px); @@ -87,7 +87,7 @@ text-align: left; list-style: none; max-width: 100vw; - z-index: 200; + z-index: var(--ZI_popover_override, var(--ZI_popovers)); white-space: nowrap; .dropdown-divider {diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue@@ -80,7 +80,7 @@ .floating-shout { position: fixed; bottom: 0.5em; - z-index: 1000; + z-index: var(--ZI_popovers); max-width: 25em; &.-left {diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue@@ -211,7 +211,7 @@ .side-drawer-container { position: fixed; - z-index: 1000; + z-index: var(--ZI_navbar); top: 0; left: 0; width: 100%;