mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 14:28:53 +09:00
Code

enhance(client): 一部のコントロールパネルページのヘッダーを改善

Browse Source
This commit is contained in:
NoriDev 2023-06-13 17:29:27 +09:00
parent 494ac37b0c
commit d22ed1efa4
5 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View File

@ -54,6 +54,7 @@
- OGP 미리보기 추가 ([misskey.design 4eb0a6d](https://github.com/kiyo4act/misskey.design/commit/4eb0a6d8467c0c601e6fe37b0170c6c36f4bc8f2))
- 더 보기! 메뉴에 도움말 추가
- 노트를 자세히 볼 때 역할 배지를 표시하도록
- 일부 제어판 페이지의 헤더 개선
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
- Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

102
packages/frontend/src/pages/admin/overview.vue
View File

@ -1,66 +1,72 @@
<template>
<MkSpacer :contentMax="1000">
<div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
</MkFoldableSection>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="1000">
<div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Active users</template>
<XActiveUsers/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Active users</template>
<XActiveUsers/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Heatmap</template>
<XHeatmap/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Heatmap</template>
<XHeatmap/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Retention rate</template>
<XRetention/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Retention rate</template>
<XRetention/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Moderators</template>
<XModerators/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Moderators</template>
<XModerators/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Federation</template>
<XFederation/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Federation</template>
<XFederation/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Instances</template>
<XInstances/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Instances</template>
<XInstances/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Ap requests</template>
<XApRequests/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Ap requests</template>
<XApRequests/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>New users</template>
<XUsers/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>New users</template>
<XUsers/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Deliver queue</template>
<XQueue domain="deliver"/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Deliver queue</template>
<XQueue domain="deliver"/>
</MkFoldableSection>
<MkFoldableSection class="item">
<template #header>Inbox queue</template>
<XQueue domain="inbox"/>
</MkFoldableSection>
</div>
</MkSpacer>
<MkFoldableSection class="item">
<template #header>Inbox queue</template>
<XQueue domain="inbox"/>
</MkFoldableSection>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
</template>
<script lang="ts" setup>
import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
import XHeader from './_header_.vue';
import XFederation from './overview.federation.vue';
import XInstances from './overview.instances.vue';
import XQueue from './overview.queue.vue';

6
packages/frontend/src/pages/admin/queue.vue
View File

@ -1,6 +1,6 @@
<template>
<MkStickyContainer>
<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800">
<XQueue v-if="tab === 'deliver'" domain="deliver"/>
<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
@ -12,7 +12,7 @@
<script lang="ts" setup>
import XQueue from './queue.chart.vue';
import XHeader from './_header_.vue';
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
import * as os from '@/os';
import * as config from '@/config';
import { i18n } from '@/i18n';
@ -60,7 +60,7 @@ const headerTabs = $computed(() => [{
}, {
key: 'inbox',
title: 'Inbox',
}]);
}] as Tab[]);
definePageMetadata({
title: i18n.ts.jobQueue,

7
packages/frontend/src/pages/admin/roles.vue
View File

@ -151,7 +151,6 @@
<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
<div class="_gaps_s">
<MkFoldableSection>
<template #header>Manual roles</template>
@ -214,7 +213,11 @@ function create() {
router.push('/admin/roles/new');
}
const headerActions = $computed(() => []);
const headerActions = $computed(() => [{
icon: 'ti ti-plus',
text: i18n.ts._role.new,
handler: create,
}]);
const headerTabs = $computed(() => []);

1
packages/frontend/src/pages/admin/users.vue
View File

@ -119,7 +119,6 @@ const headerActions = $computed(() => [{
text: i18n.ts.search,
handler: searchUser,
}, {
asFullButton: true,
icon: 'ti ti-plus',
text: i18n.ts.addUser,
handler: addUser,