diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d455ccf6..503de98d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -354,13 +354,15 @@ </div> </transition> - <div class="emoji-reactions"> + <div v-if="isFocused" class="emoji-reactions"> <button v-for="(users, emoji) in emojiReactions" :key="emoji" class="emoji-reaction btn btn-default" + :class="{ 'picked-reaction': reactedWith(emoji) }" + @click="emojiOnClick(emoji, $event)" > - <span>{{ users.length }}</span> + <span v-if="users">{{ users.length }}</span> <span>{{ emoji }}</span> </button> </div> @@ -788,19 +790,33 @@ $status-margin: 0.75em; .emoji-reactions { display: flex; - margin-top: 0.75em; + margin-top: 0.25em; + flex-wrap: wrap; } .emoji-reaction { padding: 0 0.5em; margin-right: 0.5em; + margin-top: 0.5em; display: flex; align-items: center; justify-content: center; - + box-sizing: border-box; :first-child { margin-right: 0.25em; } + :last-child { + width: 1.5em; + } + &:focus { + outline: none; + } +} + +.picked-reaction { + border: 1px solid var(--link, $fallback--link); + margin-left: -1px; // offset the border, can't use inset shadows either + margin-right: calc(0.5em - 1px); } .button-icon.icon-reply { |