HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: horizontally scrolling reactions

Browse source
This commit is contained in:
freeplay 2023-06-26 23:22:43 -04:00
parent 666d723b36
commit 9f14f0ad9b
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/MkReactionsViewer.reaction.vue
View file

@ -36,6 +36,10 @@ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
}>(); }>();
const emit = defineEmits<{
(ev: "reacted", v): void;
}>();
const buttonRef = ref<HTMLElement>(); const buttonRef = ref<HTMLElement>();
const canToggle = computed(() => !props.reaction.match(/@\w/) && $i); const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
@ -60,6 +64,7 @@ const toggleReaction = () => {
noteId: props.note.id, noteId: props.note.id,
reaction: props.reaction, reaction: props.reaction,
}); });
emit("reacted");
} }
}; };
@ -101,6 +106,7 @@ useTooltip(
padding: 0 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
pointer-events: all; pointer-events: all;
min-width: max-content;
&.newlyAdded { &.newlyAdded {
animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2); animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
:deep(.mk-emoji) { :deep(.mk-emoji) {
@ -132,6 +138,7 @@ useTooltip(
} }
&.reacted { &.reacted {
order: -1;
background: var(--accent); background: var(--accent);
&:hover { &:hover {

20
packages/client/src/components/MkReactionsViewer.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="tdflqwzn" :class="{ isMe }"> <div ref="reactionsEl" class="reactions-list tdflqwzn" :class="{ isMe }">
<XReaction <XReaction
v-for="(count, reaction) in note.reactions" v-for="(count, reaction) in note.reactions"
:key="reaction" :key="reaction"
@ -7,12 +7,13 @@
:count="count" :count="count"
:is-initial="initialReactions.has(reaction)" :is-initial="initialReactions.has(reaction)"
:note="note" :note="note"
@reacted="reactionsEl.scrollTo(0,0)"
/> />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed, ref } from "vue";
import * as misskey from "calckey-js"; import * as misskey from "calckey-js";
import { $i } from "@/account"; import { $i } from "@/account";
import XReaction from "@/components/MkReactionsViewer.reaction.vue"; import XReaction from "@/components/MkReactionsViewer.reaction.vue";
@ -21,16 +22,27 @@ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
}>(); }>();
const reactionsEl = ref<HTMLElement>();
const initialReactions = new Set(Object.keys(props.note.reactions)); const initialReactions = new Set(Object.keys(props.note.reactions));
const isMe = computed(() => $i && $i.id === props.note.userId); const isMe = computed(() => $i && $i.id === props.note.userId);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tdflqwzn { .reactions-list {
margin-inline: -2px;
margin-top: 0.2em; margin-top: 0.2em;
width: 100%; width: 100%;
display: flex;
overflow-x: auto;
margin-inline: -24px;
padding-inline: 22px 160px;
mask: linear-gradient(to right, transparent, black 24px calc(100% - 160px), transparent);
-webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 160px), transparent);
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&:empty { &:empty {
display: none; display: none;