natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add reduced motion & autoplay MFM toggles to welcome popup

This commit is contained in:
Freeplay 2023-05-12 21:19:56 -04:00
parent 17acb0ee56
commit f0fe5fcf6c
2 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/client/src/components/MkTutorialDialog.vue
View File

@ -41,16 +41,26 @@
{{ i18n.ts.next }}</MkButton {{ i18n.ts.next }}</MkButton
> >
</div> </div>
<Transition name="fade">
<section v-if="tutorial === 0" key="1" class="_content">
<h2 class="_title title"> <h2 class="_title title">
<i class="ph-info ph-bold ph-lg"></i> <i class="ph-info ph-bold ph-lg"></i>
{{ i18n.ts._tutorial.title }} {{ i18n.ts._tutorial.title }}
</h2> </h2>
<Transition name="fade">
<div v-if="tutorial === 0" key="1" class="_content">
<h3>{{ i18n.ts._tutorial.step1_1 }}</h3> <h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
<div>{{ i18n.ts._tutorial.step1_2 }}</div> <div>{{ i18n.ts._tutorial.step1_2 }}</div>
</div> <FormSwitch v-model="autoplayMfm" class="_formBlock">
<div {{ i18n.ts._mfm.alwaysPlay }}
<template #caption>
<i class="ph-warning ph-bold ph-lg" 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" v-else-if="tutorial === 1"
key="2" key="2"
class="_content" class="_content"
@ -60,8 +70,8 @@
<br /> <br />
<XSettings :save-button="true" /> <XSettings :save-button="true" />
<br /> <br />
</div> </section>
<div <section
v-else-if="tutorial === 2" v-else-if="tutorial === 2"
key="3" key="3"
class="_content" class="_content"
@ -74,8 +84,8 @@
><i class="ph-check ph-bold ph-lg"></i> ><i class="ph-check ph-bold ph-lg"></i>
{{ i18n.ts.next }}</MkButton {{ i18n.ts.next }}</MkButton
> >
</div> </section>
<div <section
v-else-if="tutorial === 3" v-else-if="tutorial === 3"
key="4" key="4"
class="_content" class="_content"
@ -90,8 +100,8 @@
</I18n> </I18n>
<br /> <br />
<XPostForm class="post-form _block" /> <XPostForm class="post-form _block" />
</div> </section>
<div <section
v-else-if="tutorial === 4" v-else-if="tutorial === 4"
key="5" key="5"
class="_content" class="_content"
@ -160,8 +170,8 @@
</I18n> </I18n>
</li> </li>
</ul> </ul>
</div> </section>
<div <section
v-else-if="tutorial === 5" v-else-if="tutorial === 5"
key="6" key="6"
class="_content" class="_content"
@ -187,7 +197,7 @@
@click="installPwa" @click="installPwa"
>{{ i18n.ts.pwa }}</MkButton >{{ i18n.ts.pwa }}</MkButton
> >
</div> </section>
</Transition> </Transition>
</div> </div>
</div> </div>
@ -196,7 +206,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { reactive, computed } from "vue";
import XSettings from "@/pages/settings/profile.vue"; import XSettings from "@/pages/settings/profile.vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
@ -204,6 +214,7 @@ import XFeaturedUsers from "@/pages/explore.users.vue";
import XPostForm from "@/components/MkPostForm.vue"; import XPostForm from "@/components/MkPostForm.vue";
import MkSparkle from "@/components/MkSparkle.vue"; import MkSparkle from "@/components/MkSparkle.vue";
import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue"; import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
import FormSwitch from "@/components/form/switch.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { $i } from "@/account"; import { $i } from "@/account";
@ -251,6 +262,21 @@ const tutorial = computed({
}, },
}); });
const autoplayMfm = computed(
defaultStore.makeGetterSetter(
"animatedMfm",
(v) => !v,
(v) => !v
)
);
const reduceAnimation = computed(
defaultStore.makeGetterSetter(
"animation",
(v) => !v,
(v) => !v
)
);
function installPwa(ev: MouseEvent) { function installPwa(ev: MouseEvent) {
const pwaInstall = document.getElementsByTagName("pwa-install")[0]; const pwaInstall = document.getElementsByTagName("pwa-install")[0];
pwaInstall.showDialog(); pwaInstall.showDialog();

10
packages/client/src/pages/settings/general.vue
View File

@ -92,9 +92,13 @@
<FormSwitch v-model="showAds" class="_formBlock">{{ <FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds i18n.ts.showAds
}}</FormSwitch> }}</FormSwitch>
<FormSwitch v-model="autoplayMfm" class="_formBlock">{{ <FormSwitch v-model="autoplayMfm" class="_formBlock">
i18n.ts._mfm.alwaysPlay {{ i18n.ts._mfm.alwaysPlay }}
}}</FormSwitch> <template #caption>
<i class="ph-warning ph-bold ph-lg" style="color: var(--warn)"></i>
{{ i18n.ts._mfm.warn }}
</template>
</FormSwitch>
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ <FormSwitch v-model="reduceAnimation" class="_formBlock">{{
i18n.ts.reduceUiAnimation i18n.ts.reduceUiAnimation
}}</FormSwitch> }}</FormSwitch>