From 4177981eb2fff58d01d4dbf391ac8b9cb82767db Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 7 Jul 2026 11:40:37 +0300 Subject: [PATCH 1/3] pause & scale MFM options --- .../basic_user_card/basic_user_card.js | 6 ++++ .../basic_user_card/basic_user_card.vue | 2 ++ src/components/chat_title/chat_title.js | 6 ++++ src/components/chat_title/chat_title.vue | 2 ++ src/components/notification/notification.js | 6 ++++ src/components/notification/notification.vue | 2 ++ src/components/poll/poll.js | 6 ++++ src/components/poll/poll.vue | 2 ++ src/components/rich_content/rich_content.jsx | 29 ++++++++++++++----- src/components/rich_content/rich_content.scss | 17 ++++++++++- .../settings_modal/tabs/posts_tab.vue | 10 +++++++ src/components/status/status.js | 6 ++++ src/components/status/status.vue | 2 ++ src/components/status_body/status_body.js | 6 ++++ src/components/status_body/status_body.vue | 4 +++ src/components/user_card/user_card.js | 6 ++++ src/components/user_card/user_card.vue | 8 +++++ .../user_list_popover/user_list_popover.js | 6 ++++ .../user_list_popover/user_list_popover.vue | 2 ++ src/i18n/en.json | 2 ++ src/modules/default_config_state.js | 8 +++++ 21 files changed, 130 insertions(+), 8 deletions(-) diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index ae1f1c9c6..27e275bfb 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -36,6 +36,12 @@ const BasicUserCard = { allowNonSquareEmoji() { return useMergedConfigStore().mergedConfig.nonSquareEmoji }, + pauseMfm() { + return useMergedConfigStore().mergedConfig.pauseMfm + }, + scaleMfm() { + return useMergedConfigStore().mergedConfig.scaleMfm + }, }, } diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 49786bf1b..39b269ea8 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -32,6 +32,8 @@ :html="user.name" :emoji="user.emoji" :allow-non-square-emoji="allowNonSquareEmoji" + :pause-mfm="pauseMfm" + :scale-mfm="scaleMfm" />
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js index 1d12384cc..e552ce9fd 100644 --- a/src/components/chat_title/chat_title.js +++ b/src/components/chat_title/chat_title.js @@ -21,5 +21,11 @@ export default { allowNonSquareEmoji() { return useMergedConfigStore().mergedConfig.nonSquareEmoji }, + pauseMfm() { + return useMergedConfigStore().mergedConfig.pauseMfm + }, + scaleMfm() { + return useMergedConfigStore().mergedConfig.scaleMfm + }, }, } diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index 313e66ce3..764e0de61 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -20,6 +20,8 @@ :html="htmlTitle" :emoji="user.emoji || []" :allow-non-square-emoji="allowNonSquareEmoji" + :pause-mfm="pauseMfm" + :scale-mfm="scaleMfm" :is-local="user.is_local" />
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index b6ee27f9c..1bfe540a0 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -217,6 +217,12 @@ const Notification = { allowNonSquareEmoji() { return this.mergedConfig.nonSquareEmoji }, + pauseMfm() { + return this.mergedConfig.pauseMfm + }, + scaleMfm() { + return this.mergedConfig.scaleMfm + }, shouldConfirmApprove() { return this.mergedConfig.modalOnApproveFollow }, diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 39bd15426..daa208f09 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -72,6 +72,8 @@ :html="notification.from_profile.name_html" :emoji="notification.from_profile.emoji" :allow-non-square-emoji="allowNonSquareEmoji" + :pause-mfm="pauseMfm" + :scale-mfm="scaleMfm" :is-local="notification.from_profile.is_local" /> diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js index 3ea9a1890..b93a6699d 100644 --- a/src/components/poll/poll.js +++ b/src/components/poll/poll.js @@ -57,6 +57,12 @@ export default { allowNonSquareEmoji() { return useMergedConfigStore().mergedConfig.nonSquareEmoji }, + pauseMfm() { + return useMergedConfigStore().mergedConfig.pauseMfm + }, + scaleMfm() { + return useMergedConfigStore().mergedConfig.scaleMfm + }, loggedIn() { return this.$store.state.users.currentUser }, diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue index 9ac859824..89bb1324e 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -25,6 +25,8 @@ :handle-links="false" :emoji="emoji" :allow-non-square-emoji="allowNonSquareEmoji" + :pause-mfm="pauseMfm" + :scale-mfm="scaleMfm" />
x).join(' ') newAttrs['data-mfm-operator'] = mfmOperator switch(mfmOperator) { case 'position': { - const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 0 - const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 0 + const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 0 + const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 0 newAttrs.style = [ 'transform:', `translate(calc(${x} * (var(--emoji-size) / 2)), `, @@ -334,8 +348,8 @@ export default { break } case 'scale': { - const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 1 - const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 1 + const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 1 + const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 1 newAttrs.style = [ 'transform:', `scale(${x}, ${y})`, @@ -343,7 +357,7 @@ export default { break } case 'rotate': { - const deg = fullAttrs['data-mfm-deg'] || 0 + const deg = Number.parseFloat(fullAttrs['data-mfm-deg']) || 0 newAttrs.style = [ `transform: rotate(${deg}deg)`, 'transform-origin: center', @@ -418,7 +432,8 @@ export default { case 'twitch': case 'shake': case 'jump': - case 'bounce': { + case 'bounce': + case 'rainbow': { const speed = fullAttrs['data-mfm-speed'] || '1s' const delay = fullAttrs['data-mfm-delay'] || 0 diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss index f048e529e..3ef82c9ac 100644 --- a/src/components/rich_content/rich_content.scss +++ b/src/components/rich_content/rich_content.scss @@ -3,7 +3,18 @@ .mfm { display: inline-block; - font-size: calc(var(--emoji-size) / 2); + + &.-scale { + font-size: calc(var(--emoji-size) / 2); + } + + &:not(.-scale) { + --emoji-size: 2em; + } + + &.-pause { + animation-play-state: paused; + } .emoji { /* Misskey's emoji width knows no bounds */ @@ -12,6 +23,10 @@ } } + &:hover .mfm { + animation-play-state: running; + } + &.-faint { color: var(--text); /* stylelint-disable declaration-no-important */ diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue index fc33d5476..cbba67f12 100644 --- a/src/components/settings_modal/tabs/posts_tab.vue +++ b/src/components/settings_modal/tabs/posts_tab.vue @@ -174,6 +174,16 @@ {{ $t('settings.non_square_emoji') }} +
  • + + {{ $t('settings.scale_mfm') }} + +
    • +
  • + + {{ $t('settings.pause_mfm') }} + +
  • diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 7a46a1a3b..e6752cb1a 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -59,6 +59,12 @@ const StatusBody = { allowNonSquareEmoji() { return this.mergedConfig.nonSquareEmoji }, + pauseMfm() { + return this.mergedConfig.pauseMfm + }, + scaleMfm() { + return this.mergedConfig.scaleMfm + }, // This is a bit hacky, but we want to approximate post height before rendering // so we count newlines (masto uses

    for paragraphs, GS uses
    between them) // as well as approximate line count by counting characters and approximating ~80 diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index b611d69b8..e8994180a 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -16,6 +16,8 @@ :emoji="status.emojis" :is-local="status.isLocal" :allow-non-square-emoji="allowNonSquareEmoji" + :pause-mfm="pauseMfm" + :scale-mfm="scaleMfm" />