enhance(client): tweak ui
This commit is contained in:
syuilo
parent
63cf2756d8
commit
31da7bc88a
GPG key ID:
9EE6577A2A06F8F1
5 changed files with 119 additions and 74 deletions
|
|
@ -2,8 +2,8 @@
|
|||
<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
|
||||
<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
|
||||
<div class="body">
|
||||
<span class="host">{{ instance.host }}</span>
|
||||
<span class="sub">{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
|
||||
<span class="host">{{ instance.name ?? instance.host }}</span>
|
||||
<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
|
||||
</div>
|
||||
<MkMiniChart v-if="chart" class="chart" :src="chart.requests.received"/>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@ const props = defineProps<{
|
|||
|
||||
const chart = $ref(null);
|
||||
|
||||
os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }).then(res => {
|
||||
os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => {
|
||||
chart = res;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -42,7 +42,7 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }
|
|||
height: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> :global(.body) {
|
||||
95
packages/client/src/components/user-card-mini.vue
Normal file
95
packages/client/src/components/user-card-mini.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
|
||||
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
|
||||
<div class="body">
|
||||
<span class="name"><MkUserName class="name" :user="user"/></span>
|
||||
<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
|
||||
</div>
|
||||
<MkMiniChart v-if="chart" class="chart" :src="chart.inc"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as misskey from 'misskey-js';
|
||||
import MkMiniChart from '@/components/mini-chart.vue';
|
||||
import * as os from '@/os';
|
||||
import { acct } from '@/filters/user';
|
||||
|
||||
const props = defineProps<{
|
||||
user: misskey.entities.User;
|
||||
}>();
|
||||
|
||||
const chart = $ref(null);
|
||||
|
||||
os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
|
||||
chart = res;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
$bodyTitleHieght: 18px;
|
||||
$bodyInfoHieght: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: var(--panel);
|
||||
border-radius: 8px;
|
||||
|
||||
> :global(.avatar) {
|
||||
display: block;
|
||||
width: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
height: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> :global(.body) {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
color: var(--fg);
|
||||
padding-right: 8px;
|
||||
|
||||
> :global(.name) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: $bodyTitleHieght;
|
||||
}
|
||||
|
||||
> :global(.sub) {
|
||||
font-size: 75%;
|
||||
opacity: 0.7;
|
||||
line-height: $bodyInfoHieght;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
> :global(.chart) {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&:global(.yellow) {
|
||||
--c: rgb(255 196 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
--c: rgb(255 0 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
&:global(.gray) {
|
||||
--c: var(--bg);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,25 +41,9 @@
|
|||
</div>
|
||||
|
||||
<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
|
||||
<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
|
||||
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
|
||||
<div class="body">
|
||||
<header>
|
||||
<MkUserName class="name" :user="user"/>
|
||||
<span class="acct">@{{ acct(user) }}</span>
|
||||
<span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
|
||||
<span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
|
||||
<span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
|
||||
<span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
|
||||
</header>
|
||||
<div>
|
||||
<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`" :behavior="'window'">
|
||||
<MkUserCardMini :user="user"/>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,11 +58,11 @@ import XHeader from './_header_.vue';
|
|||
import MkInput from '@/components/form/input.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
import { acct } from '@/filters/user';
|
||||
import * as os from '@/os';
|
||||
import { lookupUser } from '@/scripts/lookup-user';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import MkUserCardMini from '@/components/user-card-mini.vue';
|
||||
|
||||
let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
|
||||
|
||||
|
|
@ -174,54 +158,12 @@ definePageMetadata(computed(() => ({
|
|||
|
||||
> .users {
|
||||
margin-top: var(--margin);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
grid-gap: 12px;
|
||||
|
||||
> .user {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
margin-left: 0.3em;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> header {
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .acct {
|
||||
margin-left: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .staff {
|
||||
margin-left: 0.5em;
|
||||
color: var(--badge);
|
||||
}
|
||||
|
||||
> .punished {
|
||||
margin-left: 0.5em;
|
||||
color: #4dabf7;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .user:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
|
||||
<div class="dqokceoi">
|
||||
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`" :behavior="'window'">
|
||||
<MkInstanceInfo :instance="instance"/>
|
||||
<MkInstanceCardMini :instance="instance"/>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkPagination>
|
||||
|
|
@ -57,7 +57,7 @@ import MkButton from '@/components/ui/button.vue';
|
|||
import MkInput from '@/components/form/input.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
import MkInstanceInfo from '@/components/instance-info.vue';
|
||||
import MkInstanceCardMini from '@/components/instance-card-mini.vue';
|
||||
import FormSplit from '@/components/form/split.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
|
|
|
|||
|
|
@ -77,6 +77,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="tab === 'ap'" class="_formRoot">
|
||||
<MkObjectView v-if="ap" tall :value="user">
|
||||
</MkObjectView>
|
||||
</div>
|
||||
<div v-else-if="tab === 'raw'" class="_formRoot">
|
||||
<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
|
||||
</MkObjectView>
|
||||
|
|
@ -225,7 +229,7 @@ watch(() => props.userId, () => {
|
|||
|
||||
watch(() => user, () => {
|
||||
os.api('ap/get', {
|
||||
uri: user.uri || `${url}/users/${user.id}`,
|
||||
uri: user.uri ?? `${url}/users/${user.id}`,
|
||||
}).then(res => {
|
||||
ap = res;
|
||||
});
|
||||
|
|
@ -241,6 +245,10 @@ const headerTabs = $computed(() => [{
|
|||
key: 'chart',
|
||||
title: i18n.ts.charts,
|
||||
icon: 'fas fa-chart-simple',
|
||||
}, {
|
||||
key: 'ap',
|
||||
title: 'AP',
|
||||
icon: 'fas fa-share-alt',
|
||||
}, {
|
||||
key: 'raw',
|
||||
title: 'Raw data',
|
||||
|
|
|
|||
Loading…
Reference in a new issue