diff --git a/CHANGELOG.md b/CHANGELOG.md index fd3ebcd7e..1513c1f8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ ChangeLog unreleased ------------------- +### ✨Improvements +* 動きのあるMFMを無効にするオプションを追加 + ### 🐛Fixes * タイムラインに自分の返信と自分への返信と投稿者自身への返信以外の返信が含まれている問題を修正 * グループがない状態でグループチャットを開始しようとするとフリーズする問題を修正 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 64955fd6e..6d9402650 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -392,6 +392,7 @@ useOsNativeEmojis: "OSネイティブの絵文字を使用" noGroups: "グループがありません" joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。" noHistory: "履歴はありません" +disableAnimatedMfm: "動きのあるMFMを無効にする" _ago: unknown: "謎" diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 275167836..bfef80f23 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 5ab2ce91b..cc6f38986 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -23,6 +23,7 @@ {{ $t('markAsReadAllTalkMessages') }}
+ {{ $t('disableAnimatedMfm') }} {{ $t('reduceUiAnimation') }} {{ $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 0bfcd07cc..485eb5b69 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: {}, };