akkoma-fe/src/components/emoji_reactions/emoji_reactions.vue

106 lines
2.4 KiB
Vue
Raw Normal View History

2020-01-14 08:06:14 +00:00
<template>
<div class="emoji-reactions">
<UserListPopover
v-for="(reaction) in emojiReactions"
:key="reaction.url || reaction.name"
:users="accountsForEmoji[reaction.url || reaction.name]"
2020-01-14 08:06:14 +00:00
>
<button
class="emoji-reaction btn button-default"
2020-02-17 20:28:14 +00:00
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()"
>
2022-06-08 01:40:20 +00:00
<span
v-if="reaction.url !== null"
>
<StillImage
2022-06-08 01:40:20 +00:00
:src="reaction.url"
2022-06-08 08:57:39 +00:00
:title="reaction.name"
:alt="reaction.name"
2022-06-08 01:40:20 +00:00
class="reaction-emoji"
height="2.55em"
/>
2022-06-08 01:40:20 +00:00
{{ reaction.count }}
</span>
<span v-else>
2022-06-08 16:22:45 +00:00
<span class="reaction-emoji unicode-emoji">
2022-06-08 01:40:20 +00:00
{{ reaction.name }}
</span>
<span>{{ reaction.count }}</span>
</span>
</button>
</UserListPopover>
<a
2020-02-28 16:39:47 +00:00
v-if="tooManyReactions"
class="emoji-reaction-expand faint"
href="javascript:void(0)"
@click="toggleShowAll"
>
{{ showAll ? $t('general.show_less') : showMoreString }}
</a>
2020-01-14 08:06:14 +00:00
</div>
</template>
<script src="./emoji_reactions.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.emoji-reactions {
display: flex;
margin-top: 0.25em;
flex-wrap: wrap;
2023-02-20 14:18:04 +00:00
container-type: inline-size;
2020-01-14 08:06:14 +00:00
}
2022-06-08 16:22:45 +00:00
.unicode-emoji {
font-size: 210%;
}
2020-01-14 08:06:14 +00:00
.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;
.reaction-emoji {
2023-02-20 14:18:04 +00:00
width: auto;
2023-02-20 14:27:41 +00:00
max-width: 96cqw;
height: 2.55em !important;
2020-01-14 08:06:14 +00:00
margin-right: 0.25em;
}
&:focus {
outline: none;
}
&.not-clickable {
cursor: default;
&:hover {
box-shadow: $fallback--buttonShadow;
box-shadow: var(--buttonShadow);
}
}
}
.emoji-reaction-expand {
padding: 0 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
display: flex;
align-items: center;
justify-content: center;
&:hover {
text-decoration: underline;
}
2020-01-14 08:06:14 +00:00
}
.button-default.picked-reaction {
2020-02-17 20:28:14 +00:00
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);
}
2020-01-14 08:06:14 +00:00
</style>