Michcio/lost-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: remove reaction-icon component

Browse source 
The removed component does not contain any special script or styling.
It's template only contains a MkEmoji. To remove this unnecessary
indirection, the components was replaced with the MkEmoji component.
This commit is contained in:
Johann150 2022-08-20 16:03:09 +02:00
parent ffc23ae458
commit 6a3d98fbc1
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
6 changed files with 8 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/notification.vue
View file

@ -16,11 +16,13 @@
<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
<i v-else-if="notification.type === 'pollEnded'" class="fas fa-poll-h"></i>
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
<XReactionIcon
<MkEmoji
v-else-if="notification.type === 'reaction'"
ref="reactionRef"
:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
:emoji="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
:custom-emojis="notification.note.emojis"
:is-reaction="true"
:normal="true"
:no-style="true"
/>
</div>
@ -75,7 +77,6 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as misskey from 'misskey-js';
import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue';
import XReactionTooltip from './reaction-tooltip.vue';
import { getNoteSummary } from '@/scripts/get-note-summary';

14
packages/client/src/components/reaction-icon.vue
View file

@ -1,14 +0,0 @@
<template>
<MkEmoji :emoji="reaction" :custom-emojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{
reaction: string;
customEmojis?: Record<string, any>[]; // TODO
noStyle?: boolean;
}>(), {
customEmojis: [],
});
</script>

3
packages/client/src/components/reaction-tooltip.vue
View file

@ -1,7 +1,7 @@
<template>
<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
<div class="beeadbfb">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<MkEmoji :emoji="reaction" :custom-emojis="emojis" :is-reaction="true" :normal="true" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
</div>
</MkTooltip>
@ -9,7 +9,6 @@
<script lang="ts" setup>
import MkTooltip from './ui/tooltip.vue';
import XReactionIcon from './reaction-icon.vue';
defineProps<{
reaction: string;

3
packages/client/src/components/reactions-viewer.details.vue
View file

@ -2,7 +2,7 @@
<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
<div class="bqxuuuey">
<div class="reaction">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<MkEmoji :emoji="reaction" :custom-emojis="emojis" class="icon" :is-reaction="true" :normal="true" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
</div>
<div class="users">
@ -18,7 +18,6 @@
<script lang="ts" setup>
import MkTooltip from './ui/tooltip.vue';
import XReactionIcon from './reaction-icon.vue';
defineProps<{
reaction: string;

3
packages/client/src/components/reactions-viewer.reaction.vue
View file

@ -7,7 +7,7 @@
:class="{ reacted: note.myReaction == reaction, canToggle }"
@click="toggleReaction()"
>
<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
<MkEmoji class="icon" :emoji="reaction" :custom-emojis="note.emojis" :is-reaction="true" :normal="true"/>
<span class="count">{{ count }}</span>
</button>
</template>
@ -16,7 +16,6 @@
import { computed, onMounted, ref, watch } from 'vue';
import * as misskey from 'misskey-js';
import XDetails from '@/components/reactions-viewer.details.vue';
import XReactionIcon from '@/components/reaction-icon.vue';
import * as os from '@/os';
import { useTooltip } from '@/scripts/use-tooltip';
import { $i } from '@/account';

3
packages/client/src/pages/user/reactions.vue
View file

@ -4,7 +4,7 @@
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
<div class="header">
<MkAvatar class="avatar" :user="user"/>
<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
<MkEmoji class="reaction" :emoji="item.type" :custom-emojis="item.note.emojis" :is-reaction="true" :normal="true" :no-style="true"/>
<MkTime :time="item.createdAt" class="createdAt"/>
</div>
<MkNote :key="item.id" :note="item.note"/>
@ -18,7 +18,6 @@ import { computed } from 'vue';
import * as misskey from 'misskey-js';
import MkPagination from '@/components/ui/pagination.vue';
import MkNote from '@/components/note.vue';
import MkReactionIcon from '@/components/reaction-icon.vue';
const props = defineProps<{
user: misskey.entities.User;