qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix picked emoji not being highlighted #1196 + updated its CSS structure

Browse source
This commit is contained in:
Henry Jameson 2022-10-17 22:11:07 +03:00
parent eba5d3f4d7
commit 8f55cae515
1 changed files with 42 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="emoji-reactions"> <div class="EmojiReactions">
<UserListPopover <UserListPopover
v-for="(reaction) in emojiReactions" v-for="(reaction) in emojiReactions"
:key="reaction.name" :key="reaction.name"
@ -7,7 +7,7 @@
> >
<button <button
class="emoji-reaction btn button-default" class="emoji-reaction btn button-default"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()" @mouseenter="fetchEmojiReactionsByIfMissing()"
> >
@ -30,13 +30,12 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.emoji-reactions { .EmojiReactions {
display: flex; display: flex;
margin-top: 0.25em; margin-top: 0.25em;
flex-wrap: wrap; flex-wrap: wrap;
}
.emoji-reaction { .emoji-reaction {
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
@ -44,10 +43,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
.reaction-emoji { .reaction-emoji {
width: 1.25em; width: 1.25em;
margin-right: 0.25em; margin-right: 0.25em;
} }
&:focus { &:focus {
outline: none; outline: none;
} }
@ -59,9 +60,15 @@
box-shadow: var(--buttonShadow); box-shadow: var(--buttonShadow);
} }
} }
}
.emoji-reaction-expand { &.-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);
}
}
.emoji-reaction-expand {
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
@ -71,12 +78,7 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.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);
} }
</style> </style>