diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 1db25752..b2d06eef 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -103,6 +103,18 @@ <BooleanSetting path="renderMisskeyMarkdown"> {{ $t('settings.render_mfm') }} </BooleanSetting> + <ul + class="setting-list suboptions" + > + <li> + <BooleanSetting + path="renderMfmOnHover" + :disabled="!renderMisskeyMarkdown" + > + {{ $t('settings.render_mfm_on_hover') }} + </BooleanSetting> + </li> + </ul> </li> <li> <BooleanSetting diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index b1d9ecc9..0f946f79 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -204,3 +204,4 @@ } } } + diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 3cd50622..96fb99b2 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -100,6 +100,9 @@ const StatusContent = { maxThumbnails () { return this.mergedConfig.maxThumbnails }, + renderMfmOnHover () { + return this.mergedConfig.renderMfmOnHover + }, ...mapGetters(['mergedConfig']), ...mapState({ currentUser: state => state.users.currentUser diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 9510de30..3a99c779 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -1,7 +1,7 @@ <template> <div class="StatusContent" - :class="{ '-compact': compact }" + :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover }" > <slot name="header" /> <StatusBody @@ -75,6 +75,12 @@ height: 50px; } } + + &.mfm-hover:not(:hover) { + .mfm { + animation: none; + } + } } .quote-inline, diff --git a/src/i18n/en.json b/src/i18n/en.json index e4391543..eb0bf4aa 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -577,6 +577,7 @@ "remove_alias": "Remove this alias", "remove_backup": "Remove", "render_mfm": "Render Misskey Markdown", + "render_mfm_on_hover": "Pause MFM animations until post hover", "replies_in_timeline": "Replies in timeline", "reply_visibility_all": "Show all replies", "reply_visibility_following": "Only show replies directed at me or users I'm following", diff --git a/src/modules/config.js b/src/modules/config.js index b78a579f..2f12e153 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -96,6 +96,7 @@ export const defaultState = { sensitiveByDefault: undefined, // instance default sensitiveIfSubject: undefined, renderMisskeyMarkdown: undefined, + renderMfmOnHover: undefined, // instance default conversationDisplay: undefined, // instance default conversationTreeAdvanced: undefined, // instance default conversationOtherRepliesButton: undefined, // instance default diff --git a/src/modules/instance.js b/src/modules/instance.js index 1ab6365f..f771897d 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -57,6 +57,7 @@ const defaultState = { sensitiveByDefault: false, sensitiveIfSubject: true, renderMisskeyMarkdown: false, + renderMfmOnHover: false, conversationDisplay: 'linear', conversationTreeAdvanced: false, conversationOtherRepliesButton: 'below',