mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-17 16:18:27 +09:00
0f9a6417b0
The profile picture and name should be grouped together as they belong, and it should be clear which picture belongs to which name.
94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
|
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
|
|
<div class="bqxuuuey">
|
|
<div class="reaction">
|
|
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
|
|
<div class="name">{{ reaction.replace('@.', '') }}</div>
|
|
</div>
|
|
<div class="users">
|
|
<template v-if="users.length <= 10">
|
|
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
|
|
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
|
|
<br/>
|
|
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
|
|
</b>
|
|
</template>
|
|
<template v-if="10 < users.length">
|
|
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
|
|
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
|
|
<br/>
|
|
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
|
|
</b>
|
|
<span slot="omitted">+{{ count - 10 }}</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</MkTooltip>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import MkTooltip from './ui/tooltip.vue';
|
|
import XReactionIcon from './reaction-icon.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
MkTooltip,
|
|
XReactionIcon
|
|
},
|
|
props: {
|
|
reaction: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
users: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
count: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
emojis: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
source: {
|
|
required: true,
|
|
}
|
|
},
|
|
emits: ['closed'],
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bqxuuuey {
|
|
display: flex;
|
|
|
|
> .reaction {
|
|
max-width: 100px;
|
|
text-align: center;
|
|
|
|
> .icon {
|
|
display: block;
|
|
width: 60px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
> .name {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
> .users {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 0.9em;
|
|
border-left: solid 0.5px var(--divider);
|
|
padding-left: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|