diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/emoji_reactions/emoji_reactions.js | 26 | ||||
| -rw-r--r-- | src/components/emoji_reactions/emoji_reactions.vue | 127 | ||||
| -rw-r--r-- | src/components/notification/notification.vue | 3 | ||||
| -rw-r--r-- | src/components/react_button/react_button.js | 2 |
4 files changed, 136 insertions, 22 deletions
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js index bb11b840..b4936424 100644 --- a/src/components/emoji_reactions/emoji_reactions.js +++ b/src/components/emoji_reactions/emoji_reactions.js @@ -1,5 +1,17 @@ import UserAvatar from '../user_avatar/user_avatar.vue' import UserListPopover from '../user_list_popover/user_list_popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faPlus, + faMinus, + faCheck +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faPlus, + faMinus, + faCheck +) const EMOJI_REACTION_COUNT_CUTOFF = 12 @@ -33,6 +45,9 @@ const EmojiReactions = { }, loggedIn () { return !!this.$store.state.users.currentUser + }, + remoteInteractionLink () { + return this.$store.getters.remoteInteractionLink({ statusId: this.status.id }) } }, methods: { @@ -62,6 +77,17 @@ const EmojiReactions = { } else { this.reactWith(emoji) } + }, + counterTriggerAttrs (reaction) { + return { + class: [ + 'btn', + 'button-default', + 'emoji-reaction-count-button', + { '-picked-reaction': this.reactedWith(reaction.name) } + ], + 'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count }) + } } } } diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index eb46018e..92fc58ca 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -1,15 +1,19 @@ <template> <div class="EmojiReactions"> - <UserListPopover + <span v-for="(reaction) in emojiReactions" :key="reaction.url || reaction.name" - :users="accountsForEmoji[reaction.name]" + class="emoji-reaction-container btn-group" > - <button + <component + :is="loggedIn ? 'button' : 'a'" + v-bind="!loggedIn ? { href: remoteInteractionLink } : {}" + role="button" class="emoji-reaction btn button-default" - :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" + :class="{ '-picked-reaction': reactedWith(reaction.name) }" + :title="reaction.url ? reaction.name : undefined" + :aria-pressed="reactedWith(reaction.name)" @click="emojiOnClick(reaction.name, $event)" - @mouseenter="fetchEmojiReactionsByIfMissing()" > <span class="reaction-emoji" @@ -17,7 +21,6 @@ <img v-if="reaction.url" :src="reaction.url" - :title="reaction.name" class="reaction-emoji-content" width="1em" > @@ -26,9 +29,36 @@ class="reaction-emoji reaction-emoji-content" >{{ reaction.name }}</span> </span> - <span>{{ reaction.count }}</span> - </button> - </UserListPopover> + <FALayers> + <FAIcon + v-if="reactedWith(reaction.name)" + class="active-marker" + transform="shrink-6 up-9" + icon="check" + /> + <FAIcon + v-if="!reactedWith(reaction.name)" + class="focus-marker" + transform="shrink-6 up-9" + icon="plus" + /> + <FAIcon + v-else + class="focus-marker" + transform="shrink-6 up-9" + icon="minus" + /> + </FALayers> + </component> + <UserListPopover + :users="accountsForEmoji[reaction.name]" + class="emoji-reaction-popover" + :trigger-attrs="counterTriggerAttrs(reaction)" + @show="fetchEmojiReactionsByIfMissing()" + > + <span class="emoji-reaction-counts">{{ reaction.count }}</span> + </UserListPopover> + </span> <a v-if="tooManyReactions" class="emoji-reaction-expand faint" @@ -43,6 +73,7 @@ <script src="./emoji_reactions.js"></script> <style lang="scss"> @import "../../variables"; +@import "../../mixins"; .EmojiReactions { display: flex; @@ -51,14 +82,44 @@ --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1)); - .emoji-reaction { - padding: 0 0.5em; - margin-right: 0.5em; + .emoji-reaction-container { + display: flex; + align-items: stretch; margin-top: 0.5em; + margin-right: 0.5em; + + .emoji-reaction-popover { + padding: 0; + + .emoji-reaction-count-button { + background-color: var(--btn); + height: 100%; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + box-sizing: border-box; + min-width: 2em; + display: inline-flex; + justify-content: center; + align-items: center; + color: $fallback--text; + color: var(--btnText, $fallback--text); + + &.-picked-reaction { + border: 1px solid var(--accent, $fallback--link); + margin-right: -1px; + } + } + } + } + + .emoji-reaction { + padding-left: 0.5em; display: flex; align-items: center; justify-content: center; box-sizing: border-box; + border-top-right-radius: 0; + border-bottom-right-radius: 0; .reaction-emoji { width: var(--emoji-size); @@ -85,19 +146,45 @@ outline: none; } - &.not-clickable { - cursor: default; - - &:hover { - box-shadow: $fallback--buttonShadow; - box-shadow: var(--buttonShadow); - } + .svg-inline--fa { + color: $fallback--text; + color: var(--btnText, $fallback--text); } &.-picked-reaction { border: 1px solid var(--accent, $fallback--link); margin-left: -1px; // offset the border, can't use inset shadows either - margin-right: calc(0.5em - 1px); + margin-right: -1px; + + .svg-inline--fa { + color: $fallback--link; + color: var(--accent, $fallback--link); + } + } + + @include unfocused-style { + .focus-marker { + visibility: hidden; + } + + .active-marker { + visibility: visible; + } + } + + @include focused-style { + .svg-inline--fa { + color: $fallback--link; + color: var(--accent, $fallback--link); + } + + .focus-marker { + visibility: visible; + } + + .active-marker { + visibility: hidden; + } } } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 4d801c5e..5a32fc70 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -125,7 +125,8 @@ v-if="notification.emoji_url" class="emoji-reaction-emoji emoji-reaction-emoji-image" :src="notification.emoji_url" - :name="notification.emoji" + :alt="notification.emoji" + :title="notification.emoji" > <span v-else diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 8eed4b60..0d252155 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -46,7 +46,7 @@ const ReactButton = { }, computed: { hideCustomEmoji () { - return !this.$store.state.instance.pleromaChatMessagesAvailable + return !this.$store.state.instance.pleromaCustomEmojiReactionsAvailable } } } |