Merge branch 'tusooa/reaction-accessibility' into 'develop'
Reaction accessibility See merge request pleroma/pleroma-fe!1827
This commit is contained in:
commit
b6cef856f9
|
@ -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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -933,7 +933,8 @@
|
|||
"show_all_conversation_with_icon": "{icon} {text}",
|
||||
"show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)",
|
||||
"show_only_conversation_under_this": "Only show replies to this status",
|
||||
"status_history": "Status history"
|
||||
"status_history": "Status history",
|
||||
"reaction_count_label": "{num} person reacted | {num} people reacted"
|
||||
},
|
||||
"user_card": {
|
||||
"approve": "Approve",
|
||||
|
|
Loading…
Reference in New Issue