Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: upstream

Browse source
This commit is contained in:
Marie 2023-12-23 02:09:23 +01:00
commit 5db583a3eb
701 changed files with 50809 additions and 13660 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
@click="toggleReaction()"
>
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]" @click="toggleReaction()"/>
<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]" @click="toggleReaction()"/>
<span :class="$style.count">{{ count }}</span>
</button>
</template>
@ -28,6 +28,7 @@ import MkReactionEffect from '@/components/MkReactionEffect.vue';
import { claimAchievement } from '@/scripts/achievements.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
reaction: string;
@ -59,6 +60,10 @@ async function toggleReaction() {
});
if (confirm.canceled) return;
if (oldReaction !== props.reaction) {
sound.play('reaction');
}
if (mock) {
emit('reactionToggled', props.reaction, (props.count - 1));
return;
@ -75,6 +80,8 @@ async function toggleReaction() {
}
});
} else {
sound.play('reaction');
if (mock) {
emit('reactionToggled', props.reaction, (props.count + 1));
return;
@ -132,12 +139,14 @@ if (!mock) {
<style lang="scss" module>
.root {
display: inline-block;
display: inline-flex;
height: 42px;
margin: 2px;
padding: 0 6px;
font-size: 1.5em;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
&.canToggle {
background: var(--buttonBg);
@ -176,7 +185,7 @@ if (!mock) {
&.reacted, &.reacted:hover {
background: var(--accentedBg);
color: var(--accent);
box-shadow: 0 0 0px 1px var(--accent) inset;
box-shadow: 0 0 0 1px var(--accent) inset;
> .count {
color: var(--accent);
@ -188,7 +197,7 @@ if (!mock) {
}
}
.icon {
.limitWidth {
max-width: 150px;
}