diff options
Diffstat (limited to 'packages/frontend/src/components/MkUserSetupDialog.vue')
| -rw-r--r-- | packages/frontend/src/components/MkUserSetupDialog.vue | 38 |
1 files changed, 35 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue index 096b88c309..e210b33168 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.vue @@ -7,9 +7,17 @@ @close="close(true)" @closed="emit('closed')" > - <template #header>{{ i18n.ts.initialAccountSetting }}</template> + <template v-if="page === 1" #header>{{ i18n.ts._initialAccountSetting.profileSetting }}</template> + <template v-else-if="page === 2" #header>{{ i18n.ts._initialAccountSetting.privacySetting }}</template> + <template v-else-if="page === 3" #header>{{ i18n.ts.follow }}</template> + <template v-else-if="page === 4" #header>{{ i18n.ts.pushNotification }}</template> + <template v-else-if="page === 5" #header>{{ i18n.ts.done }}</template> + <template v-else #header>{{ i18n.ts.initialAccountSetting }}</template> <div style="overflow-x: clip;"> + <div :class="$style.progressBar"> + <div :class="$style.progressBarValue" :style="{ width: `${(page / 5) * 100}%` }"></div> + </div> <Transition mode="out-in" :enter-active-class="$style.transition_x_enterActive" @@ -40,12 +48,20 @@ <template v-else-if="page === 2"> <div style="height: 100cqh; overflow: auto;"> <MkSpacer :margin-min="20" :margin-max="28"> - <XFollow/> + <XPrivacy/> <MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> </MkSpacer> </div> </template> <template v-else-if="page === 3"> + <div style="height: 100cqh; overflow: auto;"> + <MkSpacer :margin-min="20" :margin-max="28"> + <XFollow/> + <MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> + </MkSpacer> + </div> + </template> + <template v-else-if="page === 4"> <div :class="$style.centerPage"> <MkSpacer :margin-min="20" :margin-max="28"> <div class="_gaps" style="text-align: center;"> @@ -58,7 +74,7 @@ </MkSpacer> </div> </template> - <template v-else-if="page === 4"> + <template v-else-if="page === 5"> <div :class="$style.centerPage"> <MkSpacer :margin-min="20" :margin-max="28"> <div class="_gaps" style="text-align: center;"> @@ -87,6 +103,7 @@ import MkModalWindow from '@/components/MkModalWindow.vue'; import MkButton from '@/components/MkButton.vue'; import XProfile from '@/components/MkUserSetupDialog.Profile.vue'; import XFollow from '@/components/MkUserSetupDialog.Follow.vue'; +import XPrivacy from '@/components/MkUserSetupDialog.Privacy.vue'; import { i18n } from '@/i18n'; import { instance } from '@/instance'; import { host } from '@/config'; @@ -134,6 +151,21 @@ async function close(skip: boolean) { transform: translateX(-50px); } +.progressBar { + position: absolute; + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 4px; +} + +.progressBarValue { + height: 100%; + background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); + transition: all 0.5s cubic-bezier(0,.5,.5,1); +} + .centerPage { display: flex; justify-content: center; |