From 7783c1e0e1062e2aed01ff8719b2b26aeacb303d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 24 Oct 2021 13:54:31 +0900
Subject: [PATCH] :art:
---
.../components/reactions-viewer.details.vue | 54 ++++++++++++-------
.../components/reactions-viewer.reaction.vue | 2 +-
2 files changed, 37 insertions(+), 19 deletions(-)
diff --git a/src/client/components/reactions-viewer.details.vue b/src/client/components/reactions-viewer.details.vue
index 6e7da58e20..7c49bd1d9c 100644
--- a/src/client/components/reactions-viewer.details.vue
+++ b/src/client/components/reactions-viewer.details.vue
@@ -1,23 +1,25 @@
<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="info">
- <div>{{ reaction.replace('@.', '') }}</div>
+ <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;"/>
+ <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;"/>
+ <MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+ </b>
+ <span slot="omitted">+{{ count - 10 }}</span>
+ </template>
</div>
- <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;"/>
- <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;"/>
- <MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
- </b>
- <span slot="omitted">+{{ count - 10 }}</span>
- </template>
</div>
</MkTooltip>
</template>
@@ -59,8 +61,11 @@ export default defineComponent({
<style lang="scss" scoped>
.bqxuuuey {
- > .info {
- padding: 0 0 8px 0;
+ display: flex;
+
+ > .reaction {
+ flex: 1;
+ max-width: 100px;
text-align: center;
> .icon {
@@ -68,6 +73,19 @@ export default defineComponent({
width: 60px;
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>
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 0e09ab7557..f47ba83f61 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -177,7 +177,7 @@ export default defineComponent({
> span {
font-size: 0.9em;
line-height: 32px;
- margin: 0 0 0 8px;
+ margin: 0 0 0 4px;
}
}
</style>