calckey/packages/client/src/components/MkTutorialDialog.vue

335 lines
7.8 KiB
Vue
Raw Normal View History

2022-11-09 07:48:03 +00:00
<template>
2023-04-08 00:01:42 +00:00
<XModalWindow
ref="dialog"
:width="800"
@close="dialog?.close()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts._tutorial.title }}</template>
<div class="_monolithic_">
<div class="_section">
<div class="tbkwesmv">
<div class="_footer navigation">
<div class="step">
<button
class="arrow _button"
:disabled="tutorial === 0"
@click="tutorial--"
>
<i class="ph-caret-left ph-bold ph-lg"></i>
</button>
<span>{{ tutorial + 1 }} / 6</span>
<button
class="arrow _button"
:disabled="tutorial === 5"
@click="tutorial++"
>
<i class="ph-caret-right ph-bold ph-lg"></i>
</button>
</div>
<MkButton
v-if="tutorial === 5"
class="ok"
primary
@click="close"
><i class="ph-check ph-bold ph-lg"></i>
{{ i18n.ts.gotIt }}</MkButton
>
<MkButton v-else class="ok" primary @click="tutorial++"
><i class="ph-check ph-bold ph-lg"></i>
{{ i18n.ts.next }}</MkButton
>
2022-11-09 08:43:27 +00:00
</div>
2023-04-08 00:01:42 +00:00
<Transition name="fade">
<section v-if="tutorial === 0" key="1" class="_content">
<h2 class="_title title">
<i class="ph-info ph-bold ph-lg"></i>
{{ i18n.ts._tutorial.title }}
</h2>
2023-04-08 00:01:42 +00:00
<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
<div>{{ i18n.ts._tutorial.step1_2 }}</div>
2023-05-13 03:11:41 +00:00
<!-- TODO: move to own slide -->
2023-05-13 03:05:25 +00:00
<!-- <FormSwitch v-model="autoplayMfm" class="_formBlock">
{{ i18n.ts._mfm.alwaysPlay }}
<template #caption>
<i class="ph-warning ph-bold ph-lg" style="color: var(--warn)"></i>
{{ i18n.ts._mfm.warn }}
</template>
2023-05-13 03:05:25 +00:00
</FormSwitch> -->
2023-05-14 22:20:26 +00:00
<FormSwitch
v-model="reduceAnimation"
class="_formBlock"
>
{{ i18n.ts.reduceUiAnimation }}
</FormSwitch>
</section>
<section
2023-04-08 00:01:42 +00:00
v-else-if="tutorial === 1"
key="2"
class="_content"
>
<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
<div>{{ i18n.ts._tutorial.step2_2 }}</div>
<br />
<XSettings :save-button="true" />
<br />
</section>
<section
2023-04-08 00:01:42 +00:00
v-else-if="tutorial === 2"
key="3"
class="_content"
>
<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
<div>{{ i18n.ts._tutorial.step3_2 }}</div>
<XFeaturedUsers />
<br />
<MkButton class="ok" primary @click="tutorial++"
><i class="ph-check ph-bold ph-lg"></i>
{{ i18n.ts.next }}</MkButton
>
</section>
<section
2023-04-08 00:01:42 +00:00
v-else-if="tutorial === 3"
key="4"
class="_content"
>
<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
<template #introduction>
<MkA class="_link" to="/tags/introduction"
>#introduction</MkA
>
</template>
</I18n>
<br />
2023-05-19 22:41:59 +00:00
<XPostForm
class="post-form _block"
:show-mfm-cheat-sheet="false"
/>
</section>
<section
2023-04-08 00:01:42 +00:00
v-else-if="tutorial === 4"
key="5"
class="_content"
>
<h3>{{ i18n.ts._tutorial.step5_1 }}</h3>
<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
<template #timelines>
<span>{{ timelines.length }}</span>
</template>
</I18n>
<ul>
<li>
<I18n
:src="i18n.ts._tutorial.step5_3"
tag="div"
>
<template #icon>
<i class="ph-house ph-bold ph-lg" />
</template>
</I18n>
</li>
<li v-if="timelines.includes('local')">
<I18n
:src="i18n.ts._tutorial.step5_4"
tag="div"
>
<template #icon>
<i class="ph-users ph-bold ph-lg" />
</template>
</I18n>
</li>
<li v-if="timelines.includes('recommended')">
<I18n
:src="i18n.ts._tutorial.step5_5"
tag="div"
>
<template #icon>
<i
class="ph-thumbs-up ph-bold ph-lg"
/>
</template>
</I18n>
</li>
<li v-if="timelines.includes('social')">
<I18n
:src="i18n.ts._tutorial.step5_6"
tag="div"
>
<template #icon>
<i
class="ph-handshake ph-bold ph-lg"
/>
</template>
</I18n>
</li>
<li v-if="timelines.includes('global')">
<I18n
:src="i18n.ts._tutorial.step5_7"
tag="div"
>
<template #icon>
<i
class="ph-planet ph-bold ph-lg"
/>
</template>
</I18n>
</li>
</ul>
</section>
<section
2023-04-08 00:01:42 +00:00
v-else-if="tutorial === 5"
key="6"
class="_content"
>
<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
<div>{{ i18n.ts._tutorial.step6_2 }}</div>
<div>{{ i18n.ts._tutorial.step6_3 }}</div>
<br />
<MkSparkle>
<h3>
{{ i18n.ts._tutorial.step6_4 }}
<Mfm text="$[shake 🚀]"></Mfm>
</h3>
</MkSparkle>
<MkPushNotificationAllowButton
primary
show-only-to-register
/>
2023-05-13 03:11:41 +00:00
</section>
2023-04-08 00:01:42 +00:00
</Transition>
2022-11-09 08:43:27 +00:00
</div>
2022-11-09 07:55:37 +00:00
</div>
2022-11-09 07:48:03 +00:00
</div>
2023-04-08 00:01:42 +00:00
</XModalWindow>
2022-11-09 07:48:03 +00:00
</template>
<script lang="ts" setup>
import { reactive, computed } from "vue";
2023-04-08 00:01:42 +00:00
import XSettings from "@/pages/settings/profile.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import MkButton from "@/components/MkButton.vue";
import XFeaturedUsers from "@/pages/explore.users.vue";
import XPostForm from "@/components/MkPostForm.vue";
import MkSparkle from "@/components/MkSparkle.vue";
import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
import FormSwitch from "@/components/form/switch.vue";
2023-04-08 00:01:42 +00:00
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { $i } from "@/account";
import { instance } from "@/instance";
2022-11-09 08:38:05 +00:00
const isLocalTimelineAvailable =
!instance.disableLocalTimeline ||
($i != null && ($i.isModerator || $i.isAdmin));
const isRecommendedTimelineAvailable =
!instance.disableRecommendedTimeline ||
($i != null && ($i.isModerator || $i.isAdmin));
const isGlobalTimelineAvailable =
!instance.disableGlobalTimeline ||
($i != null && ($i.isModerator || $i.isAdmin));
2023-04-08 00:01:42 +00:00
let timelines = ["home"];
2022-11-09 08:38:05 +00:00
if (isLocalTimelineAvailable) {
2023-04-08 00:01:42 +00:00
timelines.push("local");
2022-11-09 08:38:05 +00:00
}
if (isRecommendedTimelineAvailable) {
2023-04-08 00:01:42 +00:00
timelines.push("recommended");
2022-11-09 08:38:05 +00:00
}
if (isLocalTimelineAvailable) {
2023-04-08 00:01:42 +00:00
timelines.push("social");
2022-11-09 08:38:05 +00:00
}
if (isGlobalTimelineAvailable) {
2023-04-08 00:01:42 +00:00
timelines.push("global");
2022-11-09 08:38:05 +00:00
}
2022-11-09 07:48:03 +00:00
const emit = defineEmits<{
2023-04-08 00:01:42 +00:00
(ev: "done"): void;
(ev: "closed"): void;
2022-11-09 07:48:03 +00:00
}>();
const dialog = $ref<InstanceType<typeof XModalWindow>>();
const tutorial = computed({
2023-04-08 00:01:42 +00:00
get() {
return defaultStore.reactiveState.tutorial.value || 0;
},
set(value) {
defaultStore.set("tutorial", value);
},
2022-11-09 07:48:03 +00:00
});
const autoplayMfm = computed(
defaultStore.makeGetterSetter(
"animatedMfm",
(v) => !v,
(v) => !v
)
);
const reduceAnimation = computed(
defaultStore.makeGetterSetter(
"animation",
(v) => !v,
(v) => !v
)
);
2022-11-09 07:48:03 +00:00
function close(res) {
tutorial.value = -1;
dialog.close();
}
</script>
<style lang="scss" scoped>
2022-11-09 18:38:18 +00:00
.fade-enter-active,
.fade-leave-active {
2022-11-09 19:09:15 +00:00
transition: opacity 0.2s ease-in-out;
2022-11-09 18:38:18 +00:00
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
2022-11-09 07:48:03 +00:00
.tbkwesmv {
> ._content {
> small {
opacity: 0.7;
}
}
> .navigation {
display: flex;
flex-direction: row;
align-items: baseline;
> .step {
> .arrow {
padding: 4px;
&:disabled {
opacity: 0.5;
}
&:first-child {
padding-right: 8px;
}
&:last-child {
padding-left: 8px;
}
}
> span {
margin: 0 4px;
}
}
> .ok {
margin-left: auto;
}
}
}
</style>