diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/mfm.ts | 15 | ||||
| -rw-r--r-- | src/client/pages/settings/general.vue | 6 | ||||
| -rw-r--r-- | src/client/store.ts | 1 |
3 files changed, 14 insertions, 8 deletions
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 275167836e..bfef80f232 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -82,10 +82,10 @@ export default Vue.component('misskey-flavored-markdown', { attrs: { style: `display: inline-block; font-size: 150%;` }, - directives: [this.$store.state.settings.disableAnimatedMfm ? {} : { + directives: [this.$store.state.device.animatedMfm ? { name: 'animate-css', value: { classes: 'tada', iteration: 'infinite' } - }] + }: {}] }, genEl(token.children)); } @@ -110,10 +110,10 @@ export default Vue.component('misskey-flavored-markdown', { attrs: { style: 'display: inline-block;' }, - directives: [this.$store.state.settings.disableAnimatedMfm ? {} : { + directives: [this.$store.state.device.animatedMfm ? { name: 'animate-css', value: { classes: 'rubberBand', iteration: 'infinite' } - }] + } : {}] }, genEl(token.children)); } @@ -122,9 +122,8 @@ export default Vue.component('misskey-flavored-markdown', { token.node.props.attr == 'left' ? 'reverse' : token.node.props.attr == 'alternate' ? 'alternate' : 'normal'; - const style = (this.$store.state.settings.disableAnimatedMfm) - ? '' - : `animation: spin 1.5s linear infinite; animation-direction: ${direction};`; + const style = this.$store.state.device.animatedMfm + ? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : ''; return (createElement as any)('span', { attrs: { style: 'display: inline-block;' + style @@ -135,7 +134,7 @@ export default Vue.component('misskey-flavored-markdown', { case 'jump': { return (createElement as any)('span', { attrs: { - style: (this.$store.state.settings.disableAnimatedMfm) ? 'display: inline-block;' : 'display: inline-block; animation: jump 0.75s linear infinite;' + style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;' }, }, genEl(token.children)); } diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index 5ab2ce91b6..cc6f389869 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -23,6 +23,7 @@ <mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button> </div> <div class="_content"> + <mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch> <mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch> <mk-switch v-model="useOsNativeEmojis"> {{ $t('useOsNativeEmojis') }} @@ -84,6 +85,11 @@ export default Vue.extend({ set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); } }, + disableAnimatedMfm: { + get() { return !this.$store.state.device.animatedMfm; }, + set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); } + }, + useOsNativeEmojis: { get() { return this.$store.state.device.useOsNativeEmojis; }, set(value) { this.$store.commit('device/set', { key: 'useOsNativeEmojis', value }); } diff --git a/src/client/store.ts b/src/client/store.ts index 0bfcd07ccd..485eb5b691 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -38,6 +38,7 @@ const defaultDeviceSettings = { themes: [], theme: 'light', animation: true, + animatedMfm: true, userData: {}, }; |