natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
Kainoa Kanter 2023-04-06 22:28:44 -07:00
parent c2097f9244
commit df7c71b1b4
5 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/MkNote.vue
View File

@ -104,7 +104,7 @@
</MkA>
</template>
<template #reason>
<b>{{ muted.matched.join(", ") }}</b>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
</template>
</I18n>
</div>

11
packages/client/src/components/MkNoteDetailed.vue
View File

@ -110,7 +110,7 @@
</MkA>
</template>
<template #reason>
<b class="_mfm_blur_">{{ muted.matched.join(", ") }}</b>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
</template>
</I18n>
</div>
@ -354,15 +354,6 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
._mfm_blur_ {
filter: blur(6px);
transition: filter 0.3s;
&:hover {
filter: blur(0px);
}
}
.lxwezrsl {
font-size: 1.05em;
position: relative;

9
packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
View File

@ -22,15 +22,6 @@ const props = withDefaults(defineProps<{
</script>
<style lang="scss">
._mfm_blur_ {
filter: blur(6px);
transition: filter 0.3s;
&:hover {
filter: blur(0px);
}
}
.mfm-x2 {
--mfm-zoom-size: 200%;
}

21
packages/client/src/components/mfm.ts
View File

@ -14,6 +14,7 @@ import MkA from "@/components/global/MkA.vue";
import { host } from "@/config";
import { MFM_TAGS } from "@/scripts/mfm-tags";
import { reducedMotion } from "@/scripts/reduced-motion";
import { defaultStore } from "@/store";
export default defineComponent({
props: {
@ -103,7 +104,7 @@ export default defineComponent({
case "tada": {
const speed = validTime(token.props.args.speed) || "1s";
style = `font-size: 150%;${
this.$store.state.animatedMfm
defaultStore.state.animatedMfm
? `animation: tada ${speed} linear infinite both;`
: ""
}`;
@ -112,7 +113,7 @@ export default defineComponent({
case "jelly": {
const speed = validTime(token.props.args.speed) || "1s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-rubberBand ${speed} linear infinite both;`
: "";
break;
@ -120,7 +121,7 @@ export default defineComponent({
case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-twitch ${speed} ease infinite;`
: "";
break;
@ -128,7 +129,7 @@ export default defineComponent({
case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-shake ${speed} ease infinite;`
: "";
break;
@ -146,7 +147,7 @@ export default defineComponent({
: "mfm-spin";
const speed = validTime(token.props.args.speed) || "1.5s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
: "";
break;
@ -154,7 +155,7 @@ export default defineComponent({
case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-jump ${speed} linear infinite;`
: "";
break;
@ -162,7 +163,7 @@ export default defineComponent({
case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`
: "";
break;
@ -170,13 +171,13 @@ export default defineComponent({
case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s";
style =
this.$store.state.animatedMfm && !reducedMotion()
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-rainbow ${speed} linear infinite;`
: "";
break;
}
case "sparkle": {
if (!(this.$store.state.animatedMfm || reducedMotion())) {
if (!(defaultStore.state.animatedMfm || reducedMotion())) {
return genEl(token.children);
}
return h(MkSparkle, {}, genEl(token.children));
@ -239,7 +240,7 @@ export default defineComponent({
return h(
"span",
{
class: "_mfm_blur_",
class: "_blur_text",
},
genEl(token.children),
);

8
packages/client/src/style.scss
View File

@ -689,6 +689,14 @@ hr {
display: inline-flex;
}
._blur_text {
filter: blur(6px);
transition: filter 0.3s;
&:hover {
filter: blur(0px);
}
}
@media(prefers-reduced-motion: no-preference) {
@keyframes scaleIn {