mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 09:15:44 +01:00
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;
|
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({
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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}`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue