diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-24 13:54:31 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-24 13:54:31 +0900 |
| commit | 7783c1e0e1062e2aed01ff8719b2b26aeacb303d (patch) | |
| tree | 36f24f2aaac9e9e2ca51f5f4c77cedd84815f424 /src/client | |
| parent | Update reactions-viewer.reaction.vue (#7909) (diff) | |
| download | sharkey-7783c1e0e1062e2aed01ff8719b2b26aeacb303d.tar.gz sharkey-7783c1e0e1062e2aed01ff8719b2b26aeacb303d.tar.bz2 sharkey-7783c1e0e1062e2aed01ff8719b2b26aeacb303d.zip | |
:art:
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/reactions-viewer.details.vue | 54 | ||||
| -rw-r--r-- | src/client/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> |