This commit is contained in:
parent
3e508d7540
commit
b64daa5a58
|
@ -30,6 +30,7 @@
|
|||
"date-fns": "2.29.3",
|
||||
"escape-regexp": "0.0.1",
|
||||
"eventemitter3": "5.0.0",
|
||||
"gsap": "^3.11.4",
|
||||
"idb-keyval": "6.2.0",
|
||||
"insert-text-at-cursor": "0.3.0",
|
||||
"is-file-animated": "1.0.2",
|
||||
|
|
|
@ -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>
|
|
@ -119,7 +119,7 @@ const headerTabs = $computed(() => [{
|
|||
}, {
|
||||
key: 'emojis',
|
||||
title: i18n.ts.customEmojis,
|
||||
icon: 'ti ti-mood-happy',
|
||||
icon: 'ti ti-icons',
|
||||
}, {
|
||||
key: 'federation',
|
||||
title: i18n.ts.federation,
|
||||
|
|
|
@ -291,7 +291,7 @@ const headerTabs = $computed(() => [{
|
|||
|
||||
definePageMetadata(computed(() => ({
|
||||
title: i18n.ts.customEmojis,
|
||||
icon: 'ti ti-mood-happy',
|
||||
icon: 'ti ti-icons',
|
||||
})));
|
||||
</script>
|
||||
|
||||
|
|
|
@ -97,7 +97,7 @@ const menuDef = $computed(() => [{
|
|||
to: '/admin/users',
|
||||
active: currentPage?.route.name === 'users',
|
||||
}, {
|
||||
icon: 'ti ti-mood-happy',
|
||||
icon: 'ti ti-icons',
|
||||
text: i18n.ts.customEmojis,
|
||||
to: '/admin/emojis',
|
||||
active: currentPage?.route.name === 'emojis',
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<div class="icon"><i class="ti ti-users"></i></div>
|
||||
<div class="body">
|
||||
<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>
|
||||
</div>
|
||||
<div class="label">Users</div>
|
||||
|
@ -17,7 +17,7 @@
|
|||
<div class="icon"><i class="ti ti-pencil"></i></div>
|
||||
<div class="body">
|
||||
<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>
|
||||
</div>
|
||||
<div class="label">Notes</div>
|
||||
|
@ -27,16 +27,25 @@
|
|||
<div class="icon"><i class="ti ti-planet"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
{{ number(stats.instances) }}
|
||||
<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
|
||||
</div>
|
||||
<div class="label">Instances</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="icon"><i class="ti ti-access-point"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
{{ number(onlineUsersCount) }}
|
||||
<MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
|
||||
</div>
|
||||
<div class="label">Online</div>
|
||||
</div>
|
||||
|
@ -52,6 +61,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
|
|||
import * as os from '@/os';
|
||||
import number from '@/filters/number';
|
||||
import MkNumberDiff from '@/components/MkNumberDiff.vue';
|
||||
import MkNumber from '@/components/MkNumber.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
let stats: any = $ref(null);
|
||||
|
@ -124,6 +134,13 @@ onMounted(async () => {
|
|||
}
|
||||
}
|
||||
|
||||
&.emojis {
|
||||
> .icon {
|
||||
background: #d5ba0026;
|
||||
color: #dfc300;
|
||||
}
|
||||
}
|
||||
|
||||
&.online {
|
||||
> .icon {
|
||||
background: #8a00d126;
|
||||
|
|
|
@ -15,7 +15,7 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
}, {
|
||||
type: 'link',
|
||||
text: i18n.ts.customEmojis,
|
||||
icon: 'ti ti-mood-happy',
|
||||
icon: 'ti ti-icons',
|
||||
to: '/about#emojis',
|
||||
}, {
|
||||
type: 'link',
|
||||
|
|
|
@ -8087,6 +8087,7 @@ __metadata:
|
|||
eslint-plugin-import: 2.26.0
|
||||
eslint-plugin-vue: 9.8.0
|
||||
eventemitter3: 5.0.0
|
||||
gsap: ^3.11.4
|
||||
idb-keyval: 6.2.0
|
||||
insert-text-at-cursor: 0.3.0
|
||||
is-file-animated: 1.0.2
|
||||
|
@ -8659,6 +8660,13 @@ __metadata:
|
|||
languageName: node
|
||||
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":
|
||||
version: 2.3.0
|
||||
resolution: "gulp-cli@npm:2.3.0"
|
||||
|
|
Loading…
Reference in New Issue