diff options
Diffstat (limited to 'packages/frontend/src/components')
5 files changed, 118 insertions, 11 deletions
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue index b89e3e4c9d..a2a195cb09 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue @@ -40,10 +40,6 @@ import * as os from '@/os'; import { $i } from '@/account'; import MkPagination from '@/components/MkPagination.vue'; -const emit = defineEmits<{ - (ev: 'done'): void; -}>(); - const pinnedUsers = { endpoint: 'pinned-users', noPaging: true }; const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: { diff --git a/packages/frontend/src/components/MkUserSetupDialog.Privacy.stories.impl.ts b/packages/frontend/src/components/MkUserSetupDialog.Privacy.stories.impl.ts new file mode 100644 index 0000000000..70817d83c3 --- /dev/null +++ b/packages/frontend/src/components/MkUserSetupDialog.Privacy.stories.impl.ts @@ -0,0 +1,31 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { StoryObj } from '@storybook/vue3'; +import MkUserSetupDialog_Privacy from './MkUserSetupDialog.Privacy.vue'; +export const Default = { + render(args) { + return { + components: { + MkUserSetupDialog_Privacy, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkUserSetupDialog_Privacy v-bind="props" />', + }; + }, + args: { + + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkUserSetupDialog_Privacy>; diff --git a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue new file mode 100644 index 0000000000..4ed5c3ab00 --- /dev/null +++ b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue @@ -0,0 +1,52 @@ +<template> +<div class="_gaps"> + <MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo> + + <MkSwitch v-model="isLocked">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch> + + <MkSwitch v-model="hideOnlineStatus" @update:model-value="save()"> + {{ i18n.ts.hideOnlineStatus }} + <template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template> + </MkSwitch> + + <MkSwitch v-model="noCrawle" @update:model-value="save()"> + {{ i18n.ts.noCrawle }} + <template #caption>{{ i18n.ts.noCrawleDescription }}</template> + </MkSwitch> + + <MkSwitch v-model="preventAiLearning" @update:model-value="save()"> + {{ i18n.ts.preventAiLearning }}<span class="_beta">{{ i18n.ts.beta }}</span> + <template #caption>{{ i18n.ts.preventAiLearningDescription }}</template> + </MkSwitch> + + <MkInfo>{{ i18n.ts._initialAccountSetting.youCanEditMoreSettingsInSettingsPageLater }}</MkInfo> +</div> +</template> + +<script lang="ts" setup> +import { computed, ref, watch } from 'vue'; +import { instance } from '@/instance'; +import { i18n } from '@/i18n'; +import MkSwitch from '@/components/MkSwitch.vue'; +import MkInfo from '@/components/MkInfo.vue'; +import * as os from '@/os'; +import { $i } from '@/account'; + +let isLocked = ref(false); +let hideOnlineStatus = ref(false); +let noCrawle = ref(false); +let preventAiLearning = ref(true); + +watch(isLocked, () => { + os.apiWithDialog('i/update', { + isLocked: !!isLocked.value, + hideOnlineStatus: !!hideOnlineStatus.value, + noCrawle: !!noCrawle.value, + preventAiLearning: !!preventAiLearning.value, + }); +}); +</script> + +<style lang="scss" module> + +</style> diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue index adb8d43349..f26ea11214 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue @@ -37,10 +37,6 @@ import { chooseFileFromPc } from '@/scripts/select-file'; import * as os from '@/os'; import { $i } from '@/account'; -const emit = defineEmits<{ - (ev: 'done'): void; -}>(); - const name = ref(''); const description = ref(''); 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; |