diff options
| author | Dorra <dorra.jaoued7@gmail.com> | 2024-06-28 18:54:19 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-06-28 18:54:19 +0200 |
| commit | 16b20c5a3079bb93817789c11eb503fba9b26ff0 (patch) | |
| tree | 6ae712c9f48564663514c2405ace6f06bdd5148a | |
| parent | f356c048fa8129ebeba88f3128a664d3c4def6a5 (diff) | |
| parent | cc63fd2b9374ed87c1dfab9ff2e5fa202c4ada47 (diff) | |
Merge pull request #12602 from nextcloud/fix/12398/more-reactions-button
fix(Reactions): improve styling in popover
| -rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue index efc293625..1d4c664d2 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue @@ -22,12 +22,15 @@ </template> <div v-if="hasReactionsLoaded" class="reaction-details"> - <span>{{ getReactionSummary(reaction) }}</span> - <NcButton v-if="reactionsCount(reaction) > 3" - type="tertiary-no-background" - @click="showAllReactions = true"> - {{ remainingReactionsLabel(reaction) }} - </NcButton> + <span>{{ getReactionSummary(reaction) }} + <a v-if="reactionsCount(reaction) > 3" + class="more-reactions-button" + role="button" + tabindex="0" + @click.prevent="showAllReactions = true"> + {{ remainingReactionsLabel(reaction) }} + </a> + </span> </div> <div v-else class="details-loading"> <NcLoadingIcon /> @@ -289,6 +292,7 @@ export default { .reaction-details { padding: 8px; + max-width: 250px; } .details-loading { @@ -297,4 +301,10 @@ export default { width: 38px; } +.more-reactions-button { + text-decoration: underline; + &:hover { + text-decoration: none; + } +} </style> |