enhance(frontend): ウィジェットを非表示にできるPageMetaを追加 (#12456)
* (enhance) ウィジェットを非表示にできるPageMetaを追加 * fix lint * rename --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
f80ae7f686
commit
ac4089f37d
5 changed files with 17 additions and 14 deletions
|
@ -261,6 +261,7 @@ provideMetadataReceiver((info) => {
|
|||
childInfo.value = null;
|
||||
} else {
|
||||
childInfo.value = info;
|
||||
INFO.value.needWideArea = info.value.needWideArea ?? undefined;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -268,7 +269,7 @@ function invite() {
|
|||
os.api('admin/invite/create').then(x => {
|
||||
os.alert({
|
||||
type: 'info',
|
||||
text: x?.[0].code,
|
||||
text: x[0].code,
|
||||
});
|
||||
}).catch(err => {
|
||||
os.alert({
|
||||
|
|
|
@ -236,6 +236,7 @@ provideMetadataReceiver((info) => {
|
|||
childInfo.value = null;
|
||||
} else {
|
||||
childInfo.value = info;
|
||||
INFO.value.needWideArea = info.value?.needWideArea ?? undefined;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -15,6 +15,7 @@ export type PageMetadata = {
|
|||
icon?: string | null;
|
||||
avatar?: Misskey.entities.User | null;
|
||||
userName?: Misskey.entities.User | null;
|
||||
needWideArea?: boolean;
|
||||
};
|
||||
|
||||
export function definePageMetadata(metadata: PageMetadata | null | Ref<PageMetadata | null> | ComputedRef<PageMetadata | null>): void {
|
||||
|
|
|
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="!showMenuOnTop" class="sidebar">
|
||||
<XSidebar/>
|
||||
</div>
|
||||
<div v-else ref="widgetsLeft" class="widgets left">
|
||||
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
|
||||
<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
</div>
|
||||
|
||||
|
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
|
||||
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -64,7 +64,7 @@ const DESKTOP_THRESHOLD = 1100;
|
|||
|
||||
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
|
||||
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
|
||||
const pageMetadata = ref<null | PageMetadata>();
|
||||
const widgetsShowing = ref(false);
|
||||
const fullView = ref(false);
|
||||
const globalHeaderHeight = ref(0);
|
||||
|
@ -76,9 +76,9 @@ const widgetsRight = ref();
|
|||
|
||||
provide('router', mainRouter);
|
||||
provideMetadataReceiver((info) => {
|
||||
pageMetadata.value = info;
|
||||
if (pageMetadata.value.value) {
|
||||
document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
|
||||
pageMetadata.value = info.value;
|
||||
if (pageMetadata.value) {
|
||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||
}
|
||||
});
|
||||
provide('shouldHeaderThin', showMenuOnTop.value);
|
||||
|
|
|
@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.spacer"></div>
|
||||
</MkStickyContainer>
|
||||
|
||||
<div v-if="isDesktop" :class="$style.widgets">
|
||||
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
|
||||
<XWidgets/>
|
||||
</div>
|
||||
|
||||
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
|
||||
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
|
||||
|
||||
<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>
|
||||
|
@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue';
|
||||
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
||||
import { instanceName } from '@/config.js';
|
||||
|
@ -127,16 +127,16 @@ window.addEventListener('resize', () => {
|
|||
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
||||
});
|
||||
|
||||
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
|
||||
const pageMetadata = ref<null | PageMetadata>();
|
||||
const widgetsShowing = ref(false);
|
||||
const navFooter = shallowRef<HTMLElement>();
|
||||
const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
|
||||
|
||||
provide('router', mainRouter);
|
||||
provideMetadataReceiver((info) => {
|
||||
pageMetadata.value = info;
|
||||
if (pageMetadata.value.value) {
|
||||
document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
|
||||
pageMetadata.value = info.value;
|
||||
if (pageMetadata.value) {
|
||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue