This commit is contained in:
syuilo 2022-12-31 20:36:49 +09:00
parent 3e508d7540
commit b64daa5a58
8 changed files with 57 additions and 8 deletions

View file

@ -30,6 +30,7 @@
"date-fns": "2.29.3", "date-fns": "2.29.3",
"escape-regexp": "0.0.1", "escape-regexp": "0.0.1",
"eventemitter3": "5.0.0", "eventemitter3": "5.0.0",
"gsap": "^3.11.4",
"idb-keyval": "6.2.0", "idb-keyval": "6.2.0",
"insert-text-at-cursor": "0.3.0", "insert-text-at-cursor": "0.3.0",
"is-file-animated": "1.0.2", "is-file-animated": "1.0.2",

View file

@ -0,0 +1,23 @@
<template>
<span>{{ number(tweened.number.toFixed(0)) }}</span>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import gsap from 'gsap';
import number from '@/filters/number';
const props = defineProps<{
value: number;
}>();
const tweened = reactive({
number: 0,
});
watch(() => props.value, (n) => {
gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 });
}, {
immediate: true,
});
</script>

View file

@ -119,7 +119,7 @@ const headerTabs = $computed(() => [{
}, { }, {
key: 'emojis', key: 'emojis',
title: i18n.ts.customEmojis, title: i18n.ts.customEmojis,
icon: 'ti ti-mood-happy', icon: 'ti ti-icons',
}, { }, {
key: 'federation', key: 'federation',
title: i18n.ts.federation, title: i18n.ts.federation,

View file

@ -291,7 +291,7 @@ const headerTabs = $computed(() => [{
definePageMetadata(computed(() => ({ definePageMetadata(computed(() => ({
title: i18n.ts.customEmojis, title: i18n.ts.customEmojis,
icon: 'ti ti-mood-happy', icon: 'ti ti-icons',
}))); })));
</script> </script>

View file

@ -97,7 +97,7 @@ const menuDef = $computed(() => [{
to: '/admin/users', to: '/admin/users',
active: currentPage?.route.name === 'users', active: currentPage?.route.name === 'users',
}, { }, {
icon: 'ti ti-mood-happy', icon: 'ti ti-icons',
text: i18n.ts.customEmojis, text: i18n.ts.customEmojis,
to: '/admin/emojis', to: '/admin/emojis',
active: currentPage?.route.name === 'emojis', active: currentPage?.route.name === 'emojis',

View file

@ -7,7 +7,7 @@
<div class="icon"><i class="ti ti-users"></i></div> <div class="icon"><i class="ti ti-users"></i></div>
<div class="body"> <div class="body">
<div class="value"> <div class="value">
{{ number(stats.originalUsersCount) }} <MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff> <MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
</div> </div>
<div class="label">Users</div> <div class="label">Users</div>
@ -17,7 +17,7 @@
<div class="icon"><i class="ti ti-pencil"></i></div> <div class="icon"><i class="ti ti-pencil"></i></div>
<div class="body"> <div class="body">
<div class="value"> <div class="value">
{{ number(stats.originalNotesCount) }} <MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff> <MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
</div> </div>
<div class="label">Notes</div> <div class="label">Notes</div>
@ -27,16 +27,25 @@
<div class="icon"><i class="ti ti-planet"></i></div> <div class="icon"><i class="ti ti-planet"></i></div>
<div class="body"> <div class="body">
<div class="value"> <div class="value">
{{ number(stats.instances) }} <MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
</div> </div>
<div class="label">Instances</div> <div class="label">Instances</div>
</div> </div>
</div> </div>
<div class="item _panel emojis">
<div class="icon"><i class="ti ti-icons"></i></div>
<div class="body">
<div class="value">
<MkNumber :value="$instance.emojis.length" style="margin-right: 0.5em;"/>
</div>
<div class="label">Custom emojis</div>
</div>
</div>
<div class="item _panel online"> <div class="item _panel online">
<div class="icon"><i class="ti ti-access-point"></i></div> <div class="icon"><i class="ti ti-access-point"></i></div>
<div class="body"> <div class="body">
<div class="value"> <div class="value">
{{ number(onlineUsersCount) }} <MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
</div> </div>
<div class="label">Online</div> <div class="label">Online</div>
</div> </div>
@ -52,6 +61,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
import * as os from '@/os'; import * as os from '@/os';
import number from '@/filters/number'; import number from '@/filters/number';
import MkNumberDiff from '@/components/MkNumberDiff.vue'; import MkNumberDiff from '@/components/MkNumberDiff.vue';
import MkNumber from '@/components/MkNumber.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
let stats: any = $ref(null); let stats: any = $ref(null);
@ -124,6 +134,13 @@ onMounted(async () => {
} }
} }
&.emojis {
> .icon {
background: #d5ba0026;
color: #dfc300;
}
}
&.online { &.online {
> .icon { > .icon {
background: #8a00d126; background: #8a00d126;

View file

@ -15,7 +15,7 @@ export function openInstanceMenu(ev: MouseEvent) {
}, { }, {
type: 'link', type: 'link',
text: i18n.ts.customEmojis, text: i18n.ts.customEmojis,
icon: 'ti ti-mood-happy', icon: 'ti ti-icons',
to: '/about#emojis', to: '/about#emojis',
}, { }, {
type: 'link', type: 'link',

View file

@ -8087,6 +8087,7 @@ __metadata:
eslint-plugin-import: 2.26.0 eslint-plugin-import: 2.26.0
eslint-plugin-vue: 9.8.0 eslint-plugin-vue: 9.8.0
eventemitter3: 5.0.0 eventemitter3: 5.0.0
gsap: ^3.11.4
idb-keyval: 6.2.0 idb-keyval: 6.2.0
insert-text-at-cursor: 0.3.0 insert-text-at-cursor: 0.3.0
is-file-animated: 1.0.2 is-file-animated: 1.0.2
@ -8659,6 +8660,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"gsap@npm:^3.11.4":
version: 3.11.4
resolution: "gsap@npm:3.11.4"
checksum: 1f8ef165c5bb35cdda785b31bb733357072e7efdc67297612b7c7b4b775e422d407bd91efad8a26bb07b686640d4f001d5f1c04abd0fe13c5a479dae1368a219
languageName: node
linkType: hard
"gulp-cli@npm:^2.2.0": "gulp-cli@npm:^2.2.0":
version: 2.3.0 version: 2.3.0
resolution: "gulp-cli@npm:2.3.0" resolution: "gulp-cli@npm:2.3.0"