usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

enhance(frontend): 設定検索時に対象が含まれるMkFolderを自動で開いておくように

This commit is contained in:
syuilo 2025-04-08 08:43:56 +09:00
parent e8758bf77d
commit 3d206d2a0f
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/components/global/SearchMarker.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="root" :class="[$style.root, { [$style.highlighted]: highlighted }]">
<slot></slot>
<slot :isParentOfTarget="isParentOfTarget"></slot>
</div>
</template>
@ -39,9 +39,10 @@ const rootElMutationObserver = new MutationObserver(() => {
const injectedSearchMarkerId = inject(DI.inAppSearchMarkerId, null);
const searchMarkerId = computed(() => injectedSearchMarkerId?.value ?? window.location.hash.slice(1));
const highlighted = ref(props.markerId === searchMarkerId.value);
const isParentOfTarget = computed(() => props.children?.includes(searchMarkerId.value));
function checkChildren() {
if (props.children?.includes(searchMarkerId.value)) {
if (isParentOfTarget.value) {
const el = window.document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
highlighted.value = el == null;
}

36
packages/frontend/src/pages/settings/preferences.vue
View File

@ -11,8 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFeatureBanner>
<div class="_gaps_s">
<SearchMarker :keywords="['general']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['general']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.general }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-settings"></i></SearchIcon></template>
@ -108,8 +108,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['timeline', 'note']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['timeline', 'note']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts._settings.timelineAndNote }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-notes"></i></SearchIcon></template>
@ -276,8 +276,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['post', 'form']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['post', 'form']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.postForm }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-edit"></i></SearchIcon></template>
@ -338,8 +338,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['notification']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['notification']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.notifications }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-bell"></i></SearchIcon></template>
@ -380,8 +380,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</SearchMarker>
<template v-if="$i.policies.chatAvailability !== 'unavailable'">
<SearchMarker :keywords="['chat', 'messaging']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['chat', 'messaging']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.chat }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-messages"></i></SearchIcon></template>
@ -420,8 +420,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</SearchMarker>
</template>
<SearchMarker :keywords="['accessibility']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['accessibility']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.accessibility }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-accessible"></i></SearchIcon></template>
@ -530,8 +530,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['performance']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['performance']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.performance }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-battery-vertical-eco"></i></SearchIcon></template>
@ -566,8 +566,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['datasaver']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['datasaver']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.dataSaver }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-antenna-bars-3"></i></SearchIcon></template>
@ -600,8 +600,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['other']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['other']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.other }}</SearchLabel></template>
<template #icon><SearchIcon><i class="ti ti-settings-cog"></i></SearchIcon></template>