Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make emoji reactions clickable when not logged in

Browse Source
This commit is contained in:
tusooa 2023-05-22 22:09:04 -04:00
parent ed23f51838
commit 8a1074336c
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/emoji_reactions/emoji_reactions.js
View File

@ -45,6 +45,9 @@ const EmojiReactions = {
}, },
loggedIn () { loggedIn () {
return !!this.$store.state.users.currentUser return !!this.$store.state.users.currentUser
},
remoteInteractionLink () {
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
} }
}, },
methods: { methods: {

20
src/components/emoji_reactions/emoji_reactions.vue
View File

@ -5,9 +5,12 @@
:key="reaction.url || reaction.name" :key="reaction.url || reaction.name"
class="emoji-reaction-container btn-group" 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="emoji-reaction btn button-default"
:class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" :class="{ '-picked-reaction': reactedWith(reaction.name) }"
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
> >
<span <span
@ -45,7 +48,7 @@
icon="minus" icon="minus"
/> />
</FALayers> </FALayers>
</button> </component>
<UserListPopover <UserListPopover
:users="accountsForEmoji[reaction.name]" :users="accountsForEmoji[reaction.name]"
class="emoji-reaction-popover" class="emoji-reaction-popover"
@ -112,6 +115,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.reaction-emoji { .reaction-emoji {
width: var(--emoji-size); width: var(--emoji-size);
@ -138,15 +143,6 @@
outline: none; outline: none;
} }
&.not-clickable {
cursor: default;
&:hover {
box-shadow: $fallback--buttonShadow;
box-shadow: var(--buttonShadow);
}
}
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either margin-left: -1px; // offset the border, can't use inset shadows either