SWREI/switched
0
0
Fork 0
Code

🎨

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/package.json
View File

@ -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",

23
packages/frontend/src/components/MkNumber.vue Normal file
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>

2
packages/frontend/src/pages/about.vue
View File

@ -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,

2
packages/frontend/src/pages/admin/emojis.vue
View File

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

2
packages/frontend/src/pages/admin/index.vue
View File

@ -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',

25
packages/frontend/src/pages/admin/overview.stats.vue
View File

@ -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;

2
packages/frontend/src/ui/_common_/common.ts
View File

@ -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',

8
yarn.lock
View File

@ -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"