misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

perf(frontend): use css-native implementation for spacer rather than vue component

Browse source
This commit is contained in:
syuilo 2025-04-27 19:55:56 +09:00
parent c4f13a0472
commit 0a1ff77f23
143 changed files with 370 additions and 411 deletions
Download patch file Download diff file Expand all files Collapse all files

26
packages/frontend/src/components/MkUserSetupDialog.vue
View file

@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="page === 0">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
@ -41,15 +41,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
<MkButton style="margin: 0 auto;" transparent rounded @click="later(true)">{{ i18n.ts.later }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
<template v-else-if="page === 1">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XProfile/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -62,9 +62,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 2">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XPrivacy/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -76,9 +76,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else-if="page === 3">
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<XFollow/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else-if="page === 4">
<div :class="$style.centerPage">
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
@ -100,13 +100,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
<template v-else-if="page === 5">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
</Transition>
@ -147,7 +147,7 @@ const emit = defineEmits<{
}>();
const dialog = useTemplateRef('dialog');
const page = ref(store.s.accountSetupWizard);
watch(page, () => {