diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d291e762..4ea1b74b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -354,6 +354,19 @@ </div> </transition> + <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 v-if="users">{{ users.length }}</span> + <span>{{ emoji }}</span> + </button> + </div> + <div v-if="!noHeading && !isPreview" class="status-actions media-body" @@ -382,6 +395,10 @@ :logged-in="loggedIn" :status="status" /> + <ReactButton + :logged-in="loggedIn" + :status="status" + /> <extra-buttons :status="status" @onError="showError" @@ -772,6 +789,37 @@ $status-margin: 0.75em; } } +.emoji-reactions { + display: flex; + 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 { &:not(.button-icon-disabled):hover, &.button-icon-active { |