sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-03 23:16:28 +09:00
Code Issues Projects Releases Wiki Activity

enhance(client): provide sticktyFooter

Browse Source
This commit is contained in:
syuilo
2023-03-02 18:40:43 +09:00
parent 896400a6c9
commit dad915e522
4 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/ui/universal.vue
View File

@ -18,7 +18,7 @@
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
<div v-if="isMobile" :class="$style.nav">
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
@ -84,7 +84,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef } from 'vue';
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue';
import XCommon from './_common_/common.vue';
import { instanceName } from '@/config';
import { StickySidebar } from '@/scripts/sticky-sidebar';
@ -98,6 +98,7 @@ import { mainRouter } from '@/router';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind';
import { miLocalStorage } from '@/local-storage';
import { CURRENT_STICKY_BOTTOM } from '@/const';
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -115,6 +116,7 @@ window.addEventListener('resize', () => {
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsEl = $shallowRef<HTMLElement>();
const widgetsShowing = $ref(false);
const navFooter = $shallowRef<HTMLElement>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
@ -207,6 +209,21 @@ function top() {
}
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
let navFooterHeight = $ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, $$(navFooterHeight));
watch($$(navFooter), () => {
if (navFooter) {
navFooterHeight = navFooter.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`);
} else {
navFooterHeight = 0;
document.body.style.setProperty('--stickyBottom', '0px');
}
}, {
immediate: true,
});
</script>
<style lang="scss" module>
@ -342,8 +359,8 @@ $widgets-hide-threshold: 1090px;
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
-webkit-backdrop-filter: var(--blur, blur(24px));
backdrop-filter: var(--blur, blur(24px));
background-color: var(--header);
border-top: solid 0.5px var(--divider);
}