mirror of
https://github.com/misskey-dev/misskey
synced 2024-12-12 05:39:00 +09:00
Fix settings page
This commit is contained in:
parent
44a01c4b5a
commit
f4bd147299
@ -2,7 +2,10 @@
|
|||||||
<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
|
<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
|
||||||
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
|
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">{{ $ts.settings }}</div>
|
<div class="title">
|
||||||
|
<MkA v-if="narrow" to="/settings">{{ $ts.settings }}</MkA>
|
||||||
|
<template v-else>{{ $ts.settings }}</template>
|
||||||
|
</div>
|
||||||
<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
|
<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
@ -12,7 +15,7 @@
|
|||||||
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
|
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div v-if="!(narrow && page == null)" class="main">
|
||||||
<div class="bkzroven">
|
<div class="bkzroven">
|
||||||
<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
|
<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
|
||||||
</div>
|
</div>
|
||||||
@ -23,7 +26,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
|
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import MkInfo from '@/components/ui/info.vue';
|
import MkInfo from '@/components/ui/info.vue';
|
||||||
import MkSuperMenu from '@/components/ui/super-menu.vue';
|
import MkSuperMenu from '@/components/ui/super-menu.vue';
|
||||||
@ -46,10 +49,18 @@ const indexInfo = {
|
|||||||
};
|
};
|
||||||
const INFO = ref(indexInfo);
|
const INFO = ref(indexInfo);
|
||||||
const page = ref(props.initialPage);
|
const page = ref(props.initialPage);
|
||||||
const narrow = ref(false);
|
|
||||||
const view = ref(null);
|
const view = ref(null);
|
||||||
const el = ref<HTMLElement | null>(null);
|
const el = ref<HTMLElement | null>(null);
|
||||||
const childInfo = ref(null);
|
const childInfo = ref(null);
|
||||||
|
|
||||||
|
const narrow = ref(false);
|
||||||
|
const NARROW_THRESHOLD = 600;
|
||||||
|
|
||||||
|
const ro = new ResizeObserver((entries, observer) => {
|
||||||
|
if (entries.length === 0) return;
|
||||||
|
narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
|
||||||
|
});
|
||||||
|
|
||||||
const menuDef = computed(() => [{
|
const menuDef = computed(() => [{
|
||||||
title: i18n.ts.basicSettings,
|
title: i18n.ts.basicSettings,
|
||||||
items: [{
|
items: [{
|
||||||
@ -240,12 +251,18 @@ watch(() => props.initialPage, () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
narrow.value = el.value.offsetWidth < 800;
|
ro.observe(el.value);
|
||||||
|
|
||||||
|
narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
|
||||||
if (!narrow.value) {
|
if (!narrow.value) {
|
||||||
page.value = 'profile';
|
page.value = props.initialPage || 'profile';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
ro.disconnect();
|
||||||
|
});
|
||||||
|
|
||||||
const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
|
const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
|
||||||
|
|
||||||
const pageChanged = (page) => {
|
const pageChanged = (page) => {
|
||||||
@ -267,6 +284,7 @@ defineExpose({
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
> .title {
|
> .title {
|
||||||
|
display: block;
|
||||||
width: 34%;
|
width: 34%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user