diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index 27e275bfb..ae1f1c9c6 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -36,12 +36,6 @@ 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 39b269ea8..49786bf1b 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -32,8 +32,6 @@ :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 e552ce9fd..1d12384cc 100644 --- a/src/components/chat_title/chat_title.js +++ b/src/components/chat_title/chat_title.js @@ -21,11 +21,5 @@ 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 764e0de61..313e66ce3 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -20,8 +20,6 @@ :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 1bfe540a0..b6ee27f9c 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -217,12 +217,6 @@ 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 daa208f09..39bd15426 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -72,8 +72,6 @@ :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 b93a6699d..3ea9a1890 100644 --- a/src/components/poll/poll.js +++ b/src/components/poll/poll.js @@ -57,12 +57,6 @@ 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 89bb1324e..9ac859824 100644 --- a/src/components/poll/poll.vue +++ b/src/components/poll/poll.vue @@ -25,8 +25,6 @@ :handle-links="false" :emoji="emoji" :allow-non-square-emoji="allowNonSquareEmoji" - :pause-mfm="pauseMfm" - :scale-mfm="scaleMfm" />
x).join(' ') + newAttrs['class'] = 'mfm' newAttrs['data-mfm-operator'] = mfmOperator switch(mfmOperator) { case 'position': { - const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 0 - const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 0 + const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 0 + const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 0 newAttrs.style = [ 'transform:', `translate(calc(${x} * (var(--emoji-size) / 2)), `, @@ -348,8 +334,8 @@ export default { break } case 'scale': { - const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 1 - const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 1 + const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 1 + const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 1 newAttrs.style = [ 'transform:', `scale(${x}, ${y})`, @@ -357,7 +343,7 @@ export default { break } case 'rotate': { - const deg = Number.parseFloat(fullAttrs['data-mfm-deg']) || 0 + const deg = fullAttrs['data-mfm-deg'] || 0 newAttrs.style = [ `transform: rotate(${deg}deg)`, 'transform-origin: center', @@ -432,8 +418,7 @@ export default { case 'twitch': case 'shake': case 'jump': - case 'bounce': - case 'rainbow': { + case 'bounce': { 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 b2d756da2..f048e529e 100644 --- a/src/components/rich_content/rich_content.scss +++ b/src/components/rich_content/rich_content.scss @@ -3,44 +3,7 @@ .mfm { display: inline-block; - - &.-scale { - font-size: calc(var(--emoji-size) / 2); - } - - &:not(.-scale) { - --emoji-size: 2em; - } - - &.-pause { - animation-play-state: paused; - } - - &[data-mfm-operator="sparkle"] { - position: relative; - - &::before, - &::after { - content: '✨'; - position: absolute; - opacity: 0.4; - z-index: -1; - animation-name: cheap-sparkle; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - } - - &::before { - left: 0; - animation-direction: alternate; - } - - &::after { - right: 0; - animation-direction: alternate-reverse; - } - } + font-size: calc(var(--emoji-size) / 2); .emoji { /* Misskey's emoji width knows no bounds */ @@ -49,10 +12,6 @@ } } - &:hover .mfm { - animation-play-state: running; - } - &.-faint { color: var(--text); /* stylelint-disable declaration-no-important */ @@ -190,269 +149,257 @@ a .RichContent { } @keyframes mfm-jump { - 0% { - transform: translateY(0); - } + 0% { + transform: translateY(0) + } - 25% { - transform: translateY(-1em); - } + 25% { + transform: translateY(-1em) + } - 50% { - transform: translateY(0); - } + 50% { + transform: translateY(0) + } - 75% { - transform: translateY(-0.5em); - } + 75% { + transform: translateY(-0.5em) + } - 100% { - transform: translateY(0); - } + 100% { + transform: translateY(0) + } } @keyframes mfm-bounce { - 0% { - transform: translateY(0) scale(1); - } + 0% { + transform: translateY(0) scale(1) + } - 25% { - transform: translateY(-16px) scale(1); - } + 25% { + transform: translateY(-16px) scale(1) + } - 50% { - transform: translateY(0) scale(1); - } + 50% { + transform: translateY(0) scale(1) + } - 75% { - transform: translateY(0) scale(1.5,.75); - } + 75% { + transform: translateY(0) scale(1.5,.75) + } - 100% { - transform: translateY(0) scale(1); - } + 100% { + transform: translateY(0) scale(1) + } } @keyframes mfm-twitch { - 0% { - transform: translate(7px, -2px); - } + 0% { + transform: translate(7px,-2px) + } - 5% { - transform: translate(-3px, 1px); - } + 5% { + transform: translate(-3px,1px) + } - 10% { - transform: translate(-7px, -1px); - } + 10% { + transform: translate(-7px,-1px) + } - 15% { - transform: translateY(-1px); - } + 15% { + transform: translateY(-1px) + } - 20% { - transform: translate(-8px, 6px); - } + 20% { + transform: translate(-8px,6px) + } - 25% { - transform: translate(-4px, -3px); - } + 25% { + transform: translate(-4px,-3px) + } - 30% { - transform: translate(-4px, -6px); - } + 30% { + transform: translate(-4px,-6px) + } - 35% { - transform: translate(-8px, -8px); - } + 35% { + transform: translate(-8px,-8px) + } - 40% { - transform: translate(4px, 6px); - } + 40% { + transform: translate(4px,6px) + } - 45% { - transform: translate(-3px, 1px); - } + 45% { + transform: translate(-3px,1px) + } - 50% { - transform: translate(2px, -10px); - } + 50% { + transform: translate(2px,-10px) + } - 55% { - transform: translate(-7px); - } + 55% { + transform: translate(-7px) + } - 60% { - transform: translate(-2px, 4px); - } + 60% { + transform: translate(-2px,4px) + } - 65% { - transform: translate(3px, -8px); - } + 65% { + transform: translate(3px,-8px) + } - 70% { - transform: translate(6px, 7px); - } + 70% { + transform: translate(6px,7px) + } - 75% { - transform: translate(-7px, -2px); - } + 75% { + transform: translate(-7px,-2px) + } - 80% { - transform: translate(-7px, -8px); - } + 80% { + transform: translate(-7px,-8px) + } - 85% { - transform: translate(9px, 3px); - } + 85% { + transform: translate(9px,3px) + } - 90% { - transform: translate(-3px, -2px); - } + 90% { + transform: translate(-3px,-2px) + } - 95% { - transform: translate(-10px, 2px); - } + 95% { + transform: translate(-10px,2px) + } - 100% { - transform: translate(-2px, -6px); - } + 100% { + transform: translate(-2px,-6px) + } } @keyframes mfm-shake { - 0% { - transform: translate(-3px, -1px) rotate(-8deg); - } + 0% { + transform: translate(-3px,-1px) rotate(-8deg) + } - 5% { - transform: translateY(-1px) rotate(-10deg); - } + 5% { + transform: translateY(-1px) rotate(-10deg) + } - 10% { - transform: translate(1px, -3px) rotate(0); - } + 10% { + transform: translate(1px,-3px) rotate(0) + } - 15% { - transform: translate(1px, 1px) rotate(11deg); - } + 15% { + transform: translate(1px,1px) rotate(11deg) + } - 20% { - transform: translate(-2px, 1px) rotate(1deg); - } + 20% { + transform: translate(-2px,1px) rotate(1deg) + } - 25% { - transform: translate(-1px, -2px) rotate(-2deg); - } + 25% { + transform: translate(-1px,-2px) rotate(-2deg) + } - 30% { - transform: translate(-1px, 2px) rotate(-3deg); - } + 30% { + transform: translate(-1px,2px) rotate(-3deg) + } - 35% { - transform: translate(2px, 1px) rotate(6deg); - } + 35% { + transform: translate(2px,1px)rotate(6deg) + } - 40% { - transform: translate(-2px, -3px) rotate(-9deg); - } + 40% { + transform: translate(-2px,-3px)rotate(-9deg) + } - 45% { - transform: translateY(-1px) rotate(-12deg); - } + 45% { + transform: translateY(-1px)rotate(-12deg) + } - 50% { - transform: translate(1px, 2px) rotate(10deg); - } + 50% { + transform: translate(1px,2px)rotate(10deg) + } - 55% { - transform: translateY(-3px) rotate(8deg); - } + 55% { + transform: translateY(-3px)rotate(8deg) + } - 60% { - transform: translate(1px, -1px) rotate(8deg); - } + 60% { + transform: translate(1px,-1px)rotate(8deg) + } - 65% { - transform: translateY(-1px) rotate(-7deg); - } + 65% { + transform: translateY(-1px)rotate(-7deg) + } - 70% { - transform: translate(-1px, -3px) rotate(6deg); - } + 70% { + transform: translate(-1px,-3px)rotate(6deg) + } - 75% { - transform: translateY(-2px) rotate(4deg); - } + 75% { + transform: translateY(-2px)rotate(4deg) + } - 80% { - transform: translate(-2px, -1px) rotate(3deg); - } + 80% { + transform: translate(-2px,-1px)rotate(3deg) + } - 85% { - transform: translate(1px, -3px) rotate(-10deg); - } + 85% { + transform: translate(1px,-3px)rotate(-10deg) + } - 90% { - transform: translate(1px) rotate(3deg); - } + 90% { + transform: translate(1px)rotate(3deg) + } - 95% { - transform: translate(-2px) rotate(-3deg); - } + 95% { + transform: translate(-2px)rotate(-3deg) + } - 100% { - transform: translate(2px, 1px) rotate(2deg); - } + 100% { + transform: translate(2px,1px)rotate(2deg) + } } @keyframes mfm-rubberBand { - 0% { - transform: scale(1); - } + 0% { + transform: scale(1) + } - 30% { - transform: scale(1.25, .75); - } + 30% { + transform: scale(1.25,.75) + } - 40% { - transform: scale(.75, 1.25); - } + 40% { + transform: scale(.75,1.25) + } - 50% { - transform: scale(1.15, .85); - } + 50% { + transform: scale(1.15,.85) + } - 65% { - transform: scale(.95, 1.05); - } + 65% { + transform: scale(.95,1.05) + } - 75% { - transform: scale(1.05, .95); - } + 75% { + transform: scale(1.05,.95) + } - 100% { - transform: scale(1); - } + 100% { + transform: scale(1) + } } @keyframes mfm-rainbow { - 0% { - filter: hue-rotate() contrast(150%) saturate(150%); - } + 0% { + filter: hue-rotate()contrast(150%)saturate(150%) + } - 100% { - filter: hue-rotate(360deg) contrast(150%) saturate(150%); - } -} - -@keyframes cheap-sparkle { - 0% { - filter: hue-rotate() contrast(150%) saturate(150%); - transform: translateY(-0.5em); - } - - 100% { - filter: hue-rotate(360deg) contrast(150%) saturate(150%); - transform: translateY(0.5em); - } + 100% { + filter: hue-rotate(360deg)contrast(150%)saturate(150%) + } } diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue index cbba67f12..fc33d5476 100644 --- a/src/components/settings_modal/tabs/posts_tab.vue +++ b/src/components/settings_modal/tabs/posts_tab.vue @@ -174,16 +174,6 @@ {{ $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 e6752cb1a..7a46a1a3b 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -59,12 +59,6 @@ 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 e8994180a..b611d69b8 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -16,8 +16,6 @@ :emoji="status.emojis" :is-local="status.isLocal" :allow-non-square-emoji="allowNonSquareEmoji" - :pause-mfm="pauseMfm" - :scale-mfm="scaleMfm" />