Skip to content

Commit

Permalink
fix(frontend/pageMetadata): ページタイトルが更新されない問題 (#13289)
Browse files Browse the repository at this point in the history
Co-authored-by: syuilo <[email protected]>
Co-authored-by: syuilo <[email protected]>
  • Loading branch information
3 people authored Feb 16, 2024
1 parent bb83ee8 commit 860e8bb
Show file tree
Hide file tree
Showing 140 changed files with 496 additions and 430 deletions.
16 changes: 9 additions & 7 deletions packages/frontend/src/components/MkPageWindow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
@closed="$emit('closed')"
>
<template #header>
<template v-if="pageMetadata?.value">
<i v-if="pageMetadata.value.icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
<span>{{ pageMetadata.value.title }}</span>
<template v-if="pageMetadata">
<i v-if="pageMetadata.icon" :class="pageMetadata.icon" style="margin-right: 0.5em;"></i>
<span>{{ pageMetadata.title }}</span>
</template>
</template>

Expand All @@ -29,15 +29,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>

<script lang="ts" setup>
import { computed, ComputedRef, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
import RouterView from '@/components/global/RouterView.vue';
import MkWindow from '@/components/MkWindow.vue';
import { popout as _popout } from '@/scripts/popout.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { url } from '@/config.js';
import { useScrollPositionManager } from '@/nirax.js';
import { i18n } from '@/i18n.js';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { openingWindowsCount } from '@/os.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { getScrollContainer } from '@/scripts/scroll.js';
Expand All @@ -56,7 +56,7 @@ const routerFactory = useRouterFactory();
const windowRouter = routerFactory(props.initialPath);

const contents = shallowRef<HTMLElement | null>(null);
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
const pageMetadata = ref<null | PageMetadata>(null);
const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
const history = ref<{ path: string; key: any; }[]>([{
path: windowRouter.getCurrentPath(),
Expand Down Expand Up @@ -101,9 +101,11 @@ windowRouter.addListener('replace', ctx => {
windowRouter.init();

provide('router', windowRouter);
provideMetadataReceiver((info) => {
provideMetadataReceiver((metadataGetter) => {
const info = metadataGetter();
pageMetadata.value = info;
});
provideReactiveMetadata(pageMetadata);
provide('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true);
provide('forceSpacerMin', true);
Expand Down
20 changes: 10 additions & 10 deletions packages/frontend/src/components/global/MkPageHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>

<template v-if="metadata">
<template v-if="pageMetadata">
<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
<div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
<div v-if="pageMetadata.avatar" :class="$style.titleAvatarContainer">
<MkAvatar :class="$style.titleAvatar" :user="pageMetadata.avatar" indicator/>
</div>
<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
<i v-else-if="pageMetadata.icon" :class="[$style.titleIcon, pageMetadata.icon]"></i>

<div :class="$style.title">
<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/>
<div v-else-if="metadata.title">{{ metadata.title }}</div>
<div v-if="metadata.subtitle" :class="$style.subtitle">
{{ metadata.subtitle }}
<MkUserName v-if="pageMetadata.userName" :user="pageMetadata.userName" :nowrap="true"/>
<div v-else-if="pageMetadata.title">{{ pageMetadata.title }}</div>
<div v-if="pageMetadata.subtitle" :class="$style.subtitle">
{{ pageMetadata.subtitle }}
</div>
</div>
</div>
Expand All @@ -46,7 +46,7 @@ import tinycolor from 'tinycolor2';
import XTabs, { Tab } from './MkPageHeader.tabs.vue';
import { scrollToTop } from '@/scripts/scroll.js';
import { globalEvents } from '@/events.js';
import { injectPageMetadata } from '@/scripts/page-metadata.js';
import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { PageHeaderItem } from '@/types/page-header.js';

Expand All @@ -64,7 +64,7 @@ const emit = defineEmits<{
(ev: 'update:tab', key: string);
}>();

const metadata = injectPageMetadata();
const pageMetadata = injectReactiveMetadata();

const hideTitle = inject('shouldOmitHeaderTitle', false);
const thin_ = props.thin || inject('shouldHeaderThin', false);
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const langs = _LANGS_;
const preParseLocale = miLocalStorage.getItem('locale');
export let locale = preParseLocale ? JSON.parse(preParseLocale) : null;
export const version = _VERSION_;
export const instanceName = siteName === 'Misskey' ? host : siteName;
export const instanceName = siteName === 'Misskey' || siteName == null ? host : siteName;
export const ui = miLocalStorage.getItem('ui');
export const debug = miLocalStorage.getItem('debug') === 'true';

Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/_error_.vue
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.error,
icon: 'ti ti-alert-triangle',
});
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/about-misskey.vue
Original file line number Diff line number Diff line change
Expand Up @@ -363,10 +363,10 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.aboutMisskey,
icon: null,
});
}));
</script>

<style lang="scss" scoped>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/about.vue
Original file line number Diff line number Diff line change
Expand Up @@ -164,10 +164,10 @@ const headerTabs = computed(() => [{
icon: 'ti ti-chart-line',
}]);

definePageMetadata(computed(() => ({
definePageMetadata(() => ({
title: i18n.ts.instanceInfo,
icon: 'ti ti-info-circle',
})));
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/achievements.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ onDeactivated(() => {
}
});

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.achievements,
icon: 'ti ti-medal',
});
}));
</script>

<style lang="scss" module>
Expand Down
6 changes: 3 additions & 3 deletions packages/frontend/src/pages/admin-file.vue
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,10 @@ const headerTabs = computed(() => [{
icon: 'ti ti-code',
}]);

definePageMetadata(computed(() => ({
title: file.value ? i18n.ts.file + ': ' + file.value.name : i18n.ts.file,
definePageMetadata(() => ({
title: file.value ? `${i18n.ts.file}: ${file.value.name}` : i18n.ts.file,
icon: 'ti ti-file',
})));
}));
</script>

<style lang="scss" scoped>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin-user.vue
Original file line number Diff line number Diff line change
Expand Up @@ -518,10 +518,10 @@ const headerTabs = computed(() => [{
icon: 'ti ti-code',
}]);

definePageMetadata(computed(() => ({
definePageMetadata(() => ({
title: user.value ? acct(user.value) : i18n.ts.userInfo,
icon: 'ti ti-user-exclamation',
})));
}));
</script>

<style lang="scss" scoped>
Expand Down
12 changes: 6 additions & 6 deletions packages/frontend/src/pages/admin/_header_.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only

<template>
<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
<template v-if="metadata">
<template v-if="pageMetadata">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
<i v-if="pageMetadata.icon" class="icon" :class="pageMetadata.icon"></i>

<div class="title">
<div class="title">{{ metadata.title }}</div>
<div class="title">{{ pageMetadata.title }}</div>
</div>
</div>
<div class="tabs">
Expand Down Expand Up @@ -39,7 +39,7 @@ import { popupMenu } from '@/os.js';
import { scrollToTop } from '@/scripts/scroll.js';
import MkButton from '@/components/MkButton.vue';
import { globalEvents } from '@/events.js';
import { injectPageMetadata } from '@/scripts/page-metadata.js';
import { injectReactiveMetadata } from '@/scripts/page-metadata.js';

type Tab = {
key?: string | null;
Expand All @@ -65,7 +65,7 @@ const emit = defineEmits<{
(ev: 'update:tab', key: string);
}>();

const metadata = injectPageMetadata();
const pageMetadata = injectReactiveMetadata();

const el = shallowRef<HTMLElement>(null);
const tabRefs = {};
Expand Down Expand Up @@ -118,7 +118,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
}

const calcBg = () => {
const rawBg = metadata?.bg ?? 'var(--bg)';
const rawBg = pageMetadata.value?.bg ?? 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString();
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/abuses.vue
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.abuseReports,
icon: 'ti ti-exclamation-circle',
});
}));
</script>
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/ads.vue
Original file line number Diff line number Diff line change
Expand Up @@ -255,10 +255,10 @@ const headerActions = computed(() => [{

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.ads,
icon: 'ti ti-ad',
});
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/announcements.vue
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,8 @@ const headerActions = computed(() => [{

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.announcements,
icon: 'ti ti-speakerphone',
});
}));
</script>
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/branding.vue
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,10 @@ function save() {

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.branding,
icon: 'ti ti-paint',
});
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/database.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.database,
icon: 'ti ti-database',
});
}));
</script>
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/email-settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,10 @@ function save() {

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.emailServer,
icon: 'ti ti-mail',
});
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/external-services.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
definePageMetadata(() => ({
title: i18n.ts.externalServices,
icon: 'ti ti-link',
});
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/federation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(computed(() => ({
definePageMetadata(() => ({
title: i18n.ts.federation,
icon: 'ti ti-whirl',
})));
}));
</script>

<style lang="scss" module>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/admin/files.vue
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ const headerActions = computed(() => [{

const headerTabs = computed(() => []);

definePageMetadata(computed(() => ({
definePageMetadata(() => ({
title: i18n.ts.files,
icon: 'ti ti-cloud',
})));
}));
</script>
14 changes: 8 additions & 6 deletions packages/frontend/src/pages/admin/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>

<script lang="ts" setup>
import { ComputedRef, Ref, onActivated, onMounted, onUnmounted, provide, watch, ref, computed } from 'vue';
import { onActivated, onMounted, onUnmounted, provide, watch, ref, computed } from 'vue';
import { i18n } from '@/i18n.js';
import MkSuperMenu from '@/components/MkSuperMenu.vue';
import MkInfo from '@/components/MkInfo.vue';
import { instance } from '@/instance.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { lookupUser, lookupUserByEmail } from '@/scripts/lookup-user.js';
import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { useRouter } from '@/router/supplier.js';

const isEmpty = (x: string | null) => x == null || x === '';
Expand All @@ -52,7 +52,7 @@ const indexInfo = {
provide('shouldOmitHeaderTitle', false);

const INFO = ref(indexInfo);
const childInfo: Ref<ComputedRef<PageMetadata> | null> = ref(null);
const childInfo = ref<null | PageMetadata>(null);
const narrow = ref(false);
const view = ref(null);
const el = ref<HTMLDivElement | null>(null);
Expand Down Expand Up @@ -257,14 +257,16 @@ watch(router.currentRef, (to) => {
}
});

provideMetadataReceiver((info) => {
provideMetadataReceiver((metadataGetter) => {
const info = metadataGetter();
if (info == null) {
childInfo.value = null;
} else {
childInfo.value = info;
INFO.value.needWideArea = info.value.needWideArea ?? undefined;
INFO.value.needWideArea = info.needWideArea ?? undefined;
}
});
provideReactiveMetadata(INFO);

function invite() {
misskeyApi('admin/invite/create').then(x => {
Expand Down Expand Up @@ -318,7 +320,7 @@ const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(INFO.value);
definePageMetadata(() => INFO.value);

defineExpose({
header: {
Expand Down
Loading

0 comments on commit 860e8bb

Please sign in to comment.