e2net/iceshrimp-legacy
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Activity

Reactions tab

Browse source
This commit is contained in:
Freeplay 2023-05-20 00:14:14 -04:00
parent 7e93391ac3
commit c3b8ce2e57
5 changed files with 145 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/client/src/components/MkNoteDetailed.vue
View file

@ -55,6 +55,13 @@
</template>
{{ i18n.ts._notification._types.quote }}
</option>
<option value="reactions">
<i class="ph-smiley ph-bold ph-lg"></i>
<template v-if="reactionsCount > 0">
<span class="count">{{ reactionsCount }}</span>
</template>
{{ i18n.ts.reaction }}
</option>
<option value="clips">
<i class="ph-paperclip ph-bold ph-lg"></i>
<template v-if="clips?.length > 0">
@ -128,6 +135,11 @@
</MkA>
</div>
<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
<MkReactedUsers
v-if="tab === 'reactions'"
:note-id="appearNote.id"
></MkReactedUsers>
</div>
<div v-else class="_panel muted" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
@ -165,6 +177,7 @@ import XStarButton from "@/components/MkStarButton.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue";
import MkReactedUsers from "@/components/MkReactedUsers.vue";
import { pleaseLogin } from "@/scripts/please-login";
import { getWordSoftMute } from "@/scripts/check-word-mute";
import { userPage } from "@/filters/user";
@ -240,6 +253,8 @@ let clips = $ref();
let renotes = $ref();
let isScrolling;
const reactionsCount = Object.values(props.note.reactions).reduce((x,y) => x + y);
const keymap = {
r: () => reply(true),
"e|a|plus": () => react(true),
@ -509,14 +524,19 @@ onUnmounted(() => {
}
}
> :deep(.chips) {
padding: 6px 32px 12px;
> :deep(.chips), {
padding-block: 6px 12px;
padding-left: 32px;
}
> :deep(.user-card-mini) {
> :deep(.user-card-mini),
> :deep(.reacted-users > *) {
padding-inline: 32px;
border-top: 1px solid var(--divider);
border-radius: 0;
}
> :deep(.reacted-users > div) {
padding-block: 12px;
}
> .reply {
border-top: solid 0.5px var(--divider);
@ -612,10 +632,13 @@ onUnmounted(() => {
}
}
> .clips,
> .chips,
> :deep(.user-card-mini) {
> :deep(.user-card-mini),
> :deep(.reacted-users > *) {
padding-inline: 16px !important;
}
> .chips {
padding-left: 16px !important;
}
}
&.max-width_300px {

108
packages/client/src/components/MkReactedUsers.vue Normal file
View file

@ -0,0 +1,108 @@
<template>
<div v-if="note" class="_gaps reacted-users">
<div v-if="reactions.length === 0" class="_fullinfo">
<img
src="/static-assets/badges/info.png"
class="_ghost"
alt="Info"
/>
<div>{{ i18n.ts.nothing }}</div>
</div>
<template v-else>
<div :class="$style.tabs">
<button
v-for="reaction in reactions"
:key="reaction"
:class="[
$style.tab,
{ [$style.tabActive]: tab === reaction },
]"
class="_button"
@click="tab = reaction"
>
<MkReactionIcon
ref="reactionRef"
:reaction="
reaction
? reaction.replace(
/^:(\w+):$/,
':$1@.:'
)
: reaction
"
:custom-emojis="note.emojis"
/>
<span style="margin-left: 4px">{{
note.reactions[reaction]
}}</span>
</button>
</div>
<MkUserCardMini
v-for="user in users"
:key="user.id"
:user="user"
:with-chart="false"
/>
</template>
</div>
<div v-else>
<MkLoading />
</div>
</template>
<script lang="ts" setup>
import { onMounted, watch } from "vue";
import * as misskey from "calckey-js";
import MkReactionIcon from "@/components/MkReactionIcon.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue";
import { userPage } from "@/filters/user";
import { i18n } from "@/i18n";
import * as os from "@/os";
const props = defineProps<{
noteId: misskey.entities.Note["id"];
}>();
let note = $ref<misskey.entities.Note>();
let tab = $ref<string>();
let reactions = $ref<string[]>();
let users = $ref();
watch($$(tab), async () => {
const res = await os.api("notes/reactions", {
noteId: props.noteId,
type: tab,
limit: 30,
});
users = res.map((x) => x.user);
});
onMounted(() => {
os.api("notes/show", {
noteId: props.noteId,
}).then((res) => {
reactions = Object.keys(res.reactions);
tab = reactions[0];
note = res;
});
});
</script>
<style lang="scss" module>
.tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tab {
padding: 4px 6px;
border: solid 1px var(--divider);
border-radius: 6px;
}
.tabActive {
border-color: var(--accent);
}
</style>

128
packages/client/src/components/MkReactedUsersDialog.vue
View file

@ -1,128 +0,0 @@
<template>
<MkModalWindow
ref="dialog"
:width="400"
:height="450"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.reaction }}</template>
<MkSpacer :margin-min="20" :margin-max="28">
<div v-if="note" class="_gaps">
<div v-if="reactions.length === 0" class="_fullinfo">
<img
src="/static-assets/badges/info.png"
class="_ghost"
alt="Info"
/>
<div>{{ i18n.ts.nothing }}</div>
</div>
<template v-else>
<div :class="$style.tabs">
<button
v-for="reaction in reactions"
:key="reaction"
:class="[
$style.tab,
{ [$style.tabActive]: tab === reaction },
]"
class="_button"
@click="tab = reaction"
>
<MkReactionIcon
ref="reactionRef"
:reaction="
reaction
? reaction.replace(
/^:(\w+):$/,
':$1@.:'
)
: reaction
"
:custom-emojis="note.emojis"
/>
<span style="margin-left: 4px">{{
note.reactions[reaction]
}}</span>
</button>
</div>
<MkA
v-for="user in users"
:key="user.id"
:to="userPage(user)"
>
<MkUserCardMini :user="user" :with-chart="false" />
</MkA>
</template>
</div>
<div v-else>
<MkLoading />
</div>
</MkSpacer>
</MkModalWindow>
</template>
<script lang="ts" setup>
import { onMounted, watch } from "vue";
import * as misskey from "calckey-js";
import MkModalWindow from "@/components/MkModalWindow.vue";
import MkReactionIcon from "@/components/MkReactionIcon.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue";
import { userPage } from "@/filters/user";
import { i18n } from "@/i18n";
import * as os from "@/os";
const emit = defineEmits<{
(ev: "closed"): void;
}>();
const props = defineProps<{
noteId: misskey.entities.Note["id"];
}>();
const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let note = $ref<misskey.entities.Note>();
let tab = $ref<string>();
let reactions = $ref<string[]>();
let users = $ref();
watch($$(tab), async () => {
const res = await os.api("notes/reactions", {
noteId: props.noteId,
type: tab,
limit: 30,
});
users = res.map((x) => x.user);
});
onMounted(() => {
os.api("notes/show", {
noteId: props.noteId,
}).then((res) => {
reactions = Object.keys(res.reactions);
tab = reactions[0];
note = res;
});
});
</script>
<style lang="scss" module>
.tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tab {
padding: 4px 6px;
border: solid 1px var(--divider);
border-radius: 6px;
}
.tabActive {
border-color: var(--accent);
}
</style>

9
packages/client/src/components/MkTab.vue
View file

@ -89,6 +89,12 @@ export default defineComponent({
padding: 12px 32px;
font-size: 0.85em;
overflow-x: auto;
mask: linear-gradient(to right, black calc(100% - 90px), transparent);
-webkit-mask: linear-gradient(to right, black calc(100% - 90px), transparent);
padding-right: 90px !important;
&::-webkit-scrollbar {
display: none;
}
> button {
display: flex;
gap: 6px;
@ -102,6 +108,9 @@ export default defineComponent({
> i {
margin-top: -0.1em;
}
> .count {
margin-right: -.2em;
}
}
}

18
packages/client/src/scripts/get-note-menu.ts
View file

@ -230,19 +230,6 @@ export function getNoteMenu(props: {
});
}
function showReactions(): void {
os.popup(
defineAsyncComponent(
() => import("@/components/MkReactedUsersDialog.vue"),
),
{
noteId: appearNote.id,
},
{},
"closed",
);
}
async function translate(): Promise<void> {
if (props.translation.value != null) return;
props.translating.value = true;
@ -282,11 +269,6 @@ export function getNoteMenu(props: {
action: edit,
}
: undefined,
{
icon: "ph-smiley ph-bold ph-lg",
text: i18n.ts.reaction,
action: showReactions,
},
{
icon: "ph-clipboard-text ph-bold ph-lg",
text: i18n.ts.copyContent,