This commit is contained in:
hijiki 2024-10-23 15:14:16 +09:00
parent 23beea0a65
commit cdfc91f80f
4 changed files with 28 additions and 42 deletions

7
locales/index.d.ts vendored
View File

@ -605,9 +605,14 @@ export interface Locale extends ILocale {
*/
"mutedReactions": string;
/**
*
*
*/
"remoteCustomEmojiMuted": string;
"muteThisReaction": string;
/**
*
*/
"unmuteThisReaction": string;
/**
*
*/

View File

@ -32,29 +32,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@chosen="chosen"
@esc="modal?.close()"
/>
<div v-if="manualReactionInput" :class="$style.remoteReactionInputWrapper">
<span>{{ i18n.ts.remoteCustomEmojiMuted }}</span>
<MkInput v-model="remoteReactionName" placeholder=":emojiname@host:" autocapitalize="off"/>
<MkButton :disabled="!(remoteReactionName && remoteReactionName[0] === ':')" @click="chosen(remoteReactionName)">
{{ i18n.ts.add }}
</MkButton>
<div :class="$style.emojiContainer">
<MkCustomEmoji v-if="remoteReactionName && remoteReactionName[0] === ':' " :class="$style.emoji" :name="remoteReactionName" :normal="true"/>
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { shallowRef, ref } from 'vue';
import { i18n } from '@/i18n.js';
import { shallowRef } from 'vue';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
import { defaultStore } from '@/store.js';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
const props = withDefaults(defineProps<{
manualShowing?: boolean | null;
@ -64,14 +50,12 @@ const props = withDefaults(defineProps<{
asReactionPicker?: boolean;
targetNote?: Misskey.entities.Note;
choseAndClose?: boolean;
manualReactionInput?: boolean;
}>(), {
manualShowing: null,
showPinned: true,
pinnedEmojis: undefined,
asReactionPicker: false,
choseAndClose: true,
manualReactionInput: false,
});
const emit = defineEmits<{
@ -83,8 +67,6 @@ const emit = defineEmits<{
const modal = shallowRef<InstanceType<typeof MkModal>>();
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
const remoteReactionName = ref('');
function chosen(emoji: string) {
emit('done', emoji);
if (props.choseAndClose) {
@ -109,16 +91,4 @@ function opening() {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.remoteReactionInputWrapper {
margin-top: var(--margin);
padding: 16px;
border-radius: var(--radius);
background: var(--popup);
}
.emojiContainer {
height: 48px;
width: 48px;
}
</style>

View File

@ -201,7 +201,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<span style="margin-left: 4px;">{{ appearNote.reactions[reaction] }}</span>
</button>
</div>
<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabType)"> <i :class="!mutedReactions.includes(reactionTabType) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"></i> {{ !mutedReactions.includes(reactionTabType) ? i18n.ts.muteThisReaction : i18n.ts.unmuteThisReaction }} </MkButton>
<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabTypeTrimLocal)">
<i :class="!mutedReactions.includes(reactionTabTypeTrimLocal) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"/>
{{ !mutedReactions.includes(reactionTabTypeTrimLocal) ? i18n.ts.muteThisReaction : i18n.ts.unmuteThisReaction }}
</MkButton>
<MkPagination v-if="reactionTabType" :key="reactionTabType" :pagination="reactionsPagination" :disableAutoLoad="true">
<template #default="{ items }">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
@ -385,6 +388,7 @@ provide('react', (reaction: string) => {
const tab = ref(props.initialTab);
const reactionTabType = ref<string | null>(null);
const reactionTabTypeTrimLocal = computed(() => reactionTabType.value?.replace('@.', '') ?? null);
const renotesPagination = computed<Paging>(() => ({
endpoint: 'notes/renotes',
@ -738,12 +742,13 @@ async function clip(): Promise<void> {
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus);
}
async function reactionMuteToggle(emojiName: string) {
if (!mutedReactions.value.includes(emojiName)) {
mutedReactions.value.push(emojiName);
async function reactionMuteToggle(reactionName: string | null) {
if (reactionName == null) return;
if (!mutedReactions.value.includes(reactionName)) {
mutedReactions.value.push(reactionName);
defaultStore.set('mutedReactions', mutedReactions.value);
} else {
mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
mutedReactions.value = mutedReactions.value.filter(x => x !== reactionName);
defaultStore.set('mutedReactions', mutedReactions.value);
}
}

View File

@ -208,7 +208,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<span style="margin-left: 4px;">{{ appearNote.reactions[reaction] }}</span>
</button>
</div>
<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabType)"> <i :class="!mutedReactions.includes(reactionTabType) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"></i> {{ !mutedReactions.includes(reactionTabType) ? i18n.ts.muteThisReaction : i18n.ts.unmuteThisReaction }} </MkButton>
<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabTypeTrimLocal)">
<i :class="!mutedReactions.includes(reactionTabTypeTrimLocal) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"/>
{{ !mutedReactions.includes(reactionTabTypeTrimLocal) ? i18n.ts.muteThisReaction : i18n.ts.unmuteThisReaction }}
</MkButton>
<MkPagination v-if="reactionTabType" :key="reactionTabType" :pagination="reactionsPagination" :disableAutoLoad="true">
<template #default="{ items }">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
@ -393,6 +396,8 @@ provide('react', (reaction: string) => {
const tab = ref(props.initialTab);
const reactionTabType = ref<string | null>(null);
const reactionTabTypeTrimLocal = computed(() => reactionTabType.value?.replace('@.', '') ?? null);
const renotesPagination = computed<Paging>(() => ({
endpoint: 'notes/renotes',
@ -746,12 +751,13 @@ async function clip(): Promise<void> {
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus);
}
async function reactionMuteToggle(emojiName: string) {
if (!mutedReactions.value.includes(emojiName)) {
mutedReactions.value.push(emojiName);
async function reactionMuteToggle(reactionName: string | null) {
if (reactionName == null) return;
if (!mutedReactions.value.includes(reactionName)) {
mutedReactions.value.push(reactionName);
defaultStore.set('mutedReactions', mutedReactions.value);
} else {
mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
mutedReactions.value = mutedReactions.value.filter(x => x !== reactionName);
defaultStore.set('mutedReactions', mutedReactions.value);
}
}