329 lines
7.7 KiB
Vue
329 lines
7.7 KiB
Vue
<template>
|
|
<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="icon('ph-caret-left')"></i>
|
|
</button>
|
|
<span>{{ tutorial + 1 }} / 6</span>
|
|
<button
|
|
class="arrow _button"
|
|
:disabled="tutorial === 5"
|
|
@click="tutorial++"
|
|
>
|
|
<i :class="icon('ph-caret-right')"></i>
|
|
</button>
|
|
</div>
|
|
<MkButton
|
|
v-if="tutorial === 5"
|
|
class="ok"
|
|
primary
|
|
@click="close"
|
|
><i :class="icon('ph-check')"></i>
|
|
{{ i18n.ts.gotIt }}</MkButton
|
|
>
|
|
<MkButton v-else class="ok" primary @click="tutorial++"
|
|
><i :class="icon('ph-check')"></i>
|
|
{{ i18n.ts.next }}</MkButton
|
|
>
|
|
</div>
|
|
<Transition name="fade">
|
|
<section v-if="tutorial === 0" key="1" class="_content">
|
|
<h2 class="_title title">
|
|
<i :class="icon('ph-info')"></i>
|
|
{{ i18n.ts._tutorial.title }}
|
|
</h2>
|
|
<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
|
|
<div>{{ i18n.ts._tutorial.step1_2 }}</div>
|
|
<!-- TODO: move to own slide -->
|
|
<!-- <FormSwitch v-model="autoplayMfm" class="_formBlock">
|
|
{{ i18n.ts._mfm.alwaysPlay }}
|
|
<template #caption>
|
|
<i :class="icon('ph-warning')" style="color: var(--warn)"></i>
|
|
{{ i18n.ts._mfm.warn }}
|
|
</template>
|
|
</FormSwitch> -->
|
|
<FormSwitch
|
|
v-model="reduceAnimation"
|
|
class="_formBlock"
|
|
>
|
|
{{ i18n.ts.reduceUiAnimation }}
|
|
</FormSwitch>
|
|
</section>
|
|
<section
|
|
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
|
|
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="icon('ph-check')"></i>
|
|
{{ i18n.ts.next }}</MkButton
|
|
>
|
|
</section>
|
|
<section
|
|
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 />
|
|
<XPostForm
|
|
class="post-form _block"
|
|
:show-mfm-cheat-sheet="false"
|
|
/>
|
|
</section>
|
|
<section
|
|
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="icon('ph-house')" />
|
|
</template>
|
|
</I18n>
|
|
</li>
|
|
<li v-if="timelines.includes('local')">
|
|
<I18n
|
|
:src="i18n.ts._tutorial.step5_4"
|
|
tag="div"
|
|
>
|
|
<template #icon>
|
|
<i :class="icon('ph-users')" />
|
|
</template>
|
|
</I18n>
|
|
</li>
|
|
<li v-if="timelines.includes('social')">
|
|
<I18n
|
|
:src="i18n.ts._tutorial.step5_5"
|
|
tag="div"
|
|
>
|
|
<template #icon>
|
|
<i :class="icon('ph-handshake')" />
|
|
</template>
|
|
</I18n>
|
|
</li>
|
|
<li v-if="timelines.includes('recommended')">
|
|
<I18n
|
|
:src="i18n.ts._tutorial.step5_6"
|
|
tag="div"
|
|
>
|
|
<template #icon>
|
|
<i :class="icon('ph-thumbs-up')" />
|
|
</template>
|
|
</I18n>
|
|
</li>
|
|
<li v-if="timelines.includes('global')">
|
|
<I18n
|
|
:src="i18n.ts._tutorial.step5_7"
|
|
tag="div"
|
|
>
|
|
<template #icon>
|
|
<i :class="icon('ph-planet')" />
|
|
</template>
|
|
</I18n>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section
|
|
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
|
|
/>
|
|
</section>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</XModalWindow>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
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";
|
|
import { defaultStore } from "@/store";
|
|
import { i18n } from "@/i18n";
|
|
import { $i } from "@/reactiveAccount";
|
|
import { instance } from "@/instance";
|
|
import icon from "@/scripts/icon";
|
|
|
|
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));
|
|
|
|
const timelines = ["home"];
|
|
|
|
if (isLocalTimelineAvailable) {
|
|
timelines.push("local");
|
|
}
|
|
if (isLocalTimelineAvailable) {
|
|
timelines.push("social");
|
|
}
|
|
if (isRecommendedTimelineAvailable) {
|
|
timelines.push("recommended");
|
|
}
|
|
if (isGlobalTimelineAvailable) {
|
|
timelines.push("global");
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(ev: "done"): void;
|
|
(ev: "closed"): void;
|
|
}>();
|
|
|
|
const dialog = ref<InstanceType<typeof XModalWindow>>();
|
|
|
|
const tutorial = computed({
|
|
get() {
|
|
return defaultStore.reactiveState.tutorial.value || 0;
|
|
},
|
|
set(value) {
|
|
defaultStore.set("tutorial", value);
|
|
},
|
|
});
|
|
|
|
const autoplayMfm = computed(
|
|
defaultStore.makeGetterSetter(
|
|
"animatedMfm",
|
|
(v) => !v,
|
|
(v) => !v,
|
|
),
|
|
);
|
|
const reduceAnimation = computed(
|
|
defaultStore.makeGetterSetter(
|
|
"animation",
|
|
(v) => !v,
|
|
(v) => !v,
|
|
),
|
|
);
|
|
|
|
function close(res) {
|
|
tutorial.value = -1;
|
|
dialog.value.close();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.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>
|