New option: Pause MFM animations until status hover (#120)

Reviewed-on: AkkomaGang/pleroma-fe#120
Co-authored-by: eris <femmediscord@gmail.com>
Co-committed-by: eris <femmediscord@gmail.com>
This commit is contained in:
eris 2022-08-08 15:47:06 +00:00 committed by floatingghost
parent b354ad382c
commit d4f8934e8a
7 changed files with 26 additions and 1 deletions

View file

@ -103,6 +103,18 @@
<BooleanSetting path="renderMisskeyMarkdown"> <BooleanSetting path="renderMisskeyMarkdown">
{{ $t('settings.render_mfm') }} {{ $t('settings.render_mfm') }}
</BooleanSetting> </BooleanSetting>
<ul
class="setting-list suboptions"
>
<li>
<BooleanSetting
path="renderMfmOnHover"
:disabled="!renderMisskeyMarkdown"
>
{{ $t('settings.render_mfm_on_hover') }}
</BooleanSetting>
</li>
</ul>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting

View file

@ -204,3 +204,4 @@
} }
} }
} }

View file

@ -100,6 +100,9 @@ const StatusContent = {
maxThumbnails () { maxThumbnails () {
return this.mergedConfig.maxThumbnails return this.mergedConfig.maxThumbnails
}, },
renderMfmOnHover () {
return this.mergedConfig.renderMfmOnHover
},
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser

View file

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="StatusContent" class="StatusContent"
:class="{ '-compact': compact }" :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover }"
> >
<slot name="header" /> <slot name="header" />
<StatusBody <StatusBody
@ -75,6 +75,12 @@
height: 50px; height: 50px;
} }
} }
&.mfm-hover:not(:hover) {
.mfm {
animation: none;
}
}
} }
.quote-inline, .quote-inline,

View file

@ -577,6 +577,7 @@
"remove_alias": "Remove this alias", "remove_alias": "Remove this alias",
"remove_backup": "Remove", "remove_backup": "Remove",
"render_mfm": "Render Misskey Markdown", "render_mfm": "Render Misskey Markdown",
"render_mfm_on_hover": "Pause MFM animations until post hover",
"replies_in_timeline": "Replies in timeline", "replies_in_timeline": "Replies in timeline",
"reply_visibility_all": "Show all replies", "reply_visibility_all": "Show all replies",
"reply_visibility_following": "Only show replies directed at me or users I'm following", "reply_visibility_following": "Only show replies directed at me or users I'm following",

View file

@ -96,6 +96,7 @@ export const defaultState = {
sensitiveByDefault: undefined, // instance default sensitiveByDefault: undefined, // instance default
sensitiveIfSubject: undefined, sensitiveIfSubject: undefined,
renderMisskeyMarkdown: undefined, renderMisskeyMarkdown: undefined,
renderMfmOnHover: undefined, // instance default
conversationDisplay: undefined, // instance default conversationDisplay: undefined, // instance default
conversationTreeAdvanced: undefined, // instance default conversationTreeAdvanced: undefined, // instance default
conversationOtherRepliesButton: undefined, // instance default conversationOtherRepliesButton: undefined, // instance default

View file

@ -57,6 +57,7 @@ const defaultState = {
sensitiveByDefault: false, sensitiveByDefault: false,
sensitiveIfSubject: true, sensitiveIfSubject: true,
renderMisskeyMarkdown: false, renderMisskeyMarkdown: false,
renderMfmOnHover: false,
conversationDisplay: 'linear', conversationDisplay: 'linear',
conversationTreeAdvanced: false, conversationTreeAdvanced: false,
conversationOtherRepliesButton: 'below', conversationOtherRepliesButton: 'below',