enhance(frontend): ウィジェットを非表示にできるPageMetaを追加 (#12456)

* (enhance) ウィジェットを非表示にできるPageMetaを追加

* fix lint

* rename

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり 2023-12-08 13:06:42 +09:00 committed by GitHub
parent f80ae7f686
commit ac4089f37d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 14 deletions

View file

@ -261,6 +261,7 @@ provideMetadataReceiver((info) => {
childInfo.value = null; childInfo.value = null;
} else { } else {
childInfo.value = info; childInfo.value = info;
INFO.value.needWideArea = info.value.needWideArea ?? undefined;
} }
}); });
@ -268,7 +269,7 @@ function invite() {
os.api('admin/invite/create').then(x => { os.api('admin/invite/create').then(x => {
os.alert({ os.alert({
type: 'info', type: 'info',
text: x?.[0].code, text: x[0].code,
}); });
}).catch(err => { }).catch(err => {
os.alert({ os.alert({

View file

@ -236,6 +236,7 @@ provideMetadataReceiver((info) => {
childInfo.value = null; childInfo.value = null;
} else { } else {
childInfo.value = info; childInfo.value = info;
INFO.value.needWideArea = info.value?.needWideArea ?? undefined;
} }
}); });

View file

@ -15,6 +15,7 @@ export type PageMetadata = {
icon?: string | null; icon?: string | null;
avatar?: Misskey.entities.User | null; avatar?: Misskey.entities.User | null;
userName?: Misskey.entities.User | null; userName?: Misskey.entities.User | null;
needWideArea?: boolean;
}; };
export function definePageMetadata(metadata: PageMetadata | null | Ref<PageMetadata | null> | ComputedRef<PageMetadata | null>): void { export function definePageMetadata(metadata: PageMetadata | null | Ref<PageMetadata | null> | ComputedRef<PageMetadata | null>): void {

View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!showMenuOnTop" class="sidebar"> <div v-if="!showMenuOnTop" class="sidebar">
<XSidebar/> <XSidebar/>
</div> </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)"/> <XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
</div> </div>
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</main> </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)"/> <XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
</div> </div>
</div> </div>
@ -64,7 +64,7 @@ const DESKTOP_THRESHOLD = 1100;
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const pageMetadata = ref<null | ComputedRef<PageMetadata>>(); const pageMetadata = ref<null | PageMetadata>();
const widgetsShowing = ref(false); const widgetsShowing = ref(false);
const fullView = ref(false); const fullView = ref(false);
const globalHeaderHeight = ref(0); const globalHeaderHeight = ref(0);
@ -76,9 +76,9 @@ const widgetsRight = ref();
provide('router', mainRouter); provide('router', mainRouter);
provideMetadataReceiver((info) => { provideMetadataReceiver((info) => {
pageMetadata.value = info; pageMetadata.value = info.value;
if (pageMetadata.value.value) { if (pageMetadata.value) {
document.title = `${pageMetadata.value.value.title} | ${instanceName}`; document.title = `${pageMetadata.value.title} | ${instanceName}`;
} }
}); });
provide('shouldHeaderThin', showMenuOnTop.value); provide('shouldHeaderThin', showMenuOnTop.value);

View file

@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.spacer"></div> <div :class="$style.spacer"></div>
</MkStickyContainer> </MkStickyContainer>
<div v-if="isDesktop" :class="$style.widgets"> <div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
<XWidgets/> <XWidgets/>
</div> </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"> <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="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> </template>
<script lang="ts" setup> <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 XCommon from './_common_/common.vue';
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue'; import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import { instanceName } from '@/config.js'; import { instanceName } from '@/config.js';
@ -127,16 +127,16 @@ window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD; isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
}); });
const pageMetadata = ref<null | ComputedRef<PageMetadata>>(); const pageMetadata = ref<null | PageMetadata>();
const widgetsShowing = ref(false); const widgetsShowing = ref(false);
const navFooter = shallowRef<HTMLElement>(); const navFooter = shallowRef<HTMLElement>();
const contents = shallowRef<InstanceType<typeof MkStickyContainer>>(); const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
provide('router', mainRouter); provide('router', mainRouter);
provideMetadataReceiver((info) => { provideMetadataReceiver((info) => {
pageMetadata.value = info; pageMetadata.value = info.value;
if (pageMetadata.value.value) { if (pageMetadata.value) {
document.title = `${pageMetadata.value.value.title} | ${instanceName}`; document.title = `${pageMetadata.value.title} | ${instanceName}`;
} }
}); });