🎨
This commit is contained in:
parent
6afa67089a
commit
7783c1e0e1
2 changed files with 37 additions and 19 deletions
src/client/components
|
@ -1,10 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')">
|
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
|
||||||
<div class="bqxuuuey">
|
<div class="bqxuuuey">
|
||||||
<div class="info">
|
<div class="reaction">
|
||||||
<div>{{ reaction.replace('@.', '') }}</div>
|
|
||||||
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
|
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
|
||||||
|
<div class="name">{{ reaction.replace('@.', '') }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="users">
|
||||||
<template v-if="users.length <= 10">
|
<template v-if="users.length <= 10">
|
||||||
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
|
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
|
||||||
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
|
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
|
||||||
|
@ -19,6 +20,7 @@
|
||||||
<span slot="omitted">+{{ count - 10 }}</span>
|
<span slot="omitted">+{{ count - 10 }}</span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</MkTooltip>
|
</MkTooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -59,8 +61,11 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.bqxuuuey {
|
.bqxuuuey {
|
||||||
> .info {
|
display: flex;
|
||||||
padding: 0 0 8px 0;
|
|
||||||
|
> .reaction {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 100px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
> .icon {
|
> .icon {
|
||||||
|
@ -68,6 +73,19 @@ export default defineComponent({
|
||||||
width: 60px;
|
width: 60px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .name {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .users {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
border-left: solid 0.5px var(--divider);
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -177,7 +177,7 @@ export default defineComponent({
|
||||||
> span {
|
> span {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
margin: 0 0 0 8px;
|
margin: 0 0 0 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue