amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
locales/index.d.ts vendored
View File

@ -605,9 +605,14 @@ export interface Locale extends ILocale {
*/ */
"mutedReactions": string; "mutedReactions": string;
/** /**
* リモートの絵文字をミュート * このリアクションをミュートする
*/ */
"remoteCustomEmojiMuted": string; "remoteCustomEmojiMuted": string;
"muteThisReaction": string;
/**
* このリアクションのミュートを解除する
*/
"unmuteThisReaction": string;
/** /**
* ブロック * ブロック
*/ */

32
packages/frontend/src/components/MkEmojiPickerDialog.vue
View File

@ -32,29 +32,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@chosen="chosen" @chosen="chosen"
@esc="modal?.close()" @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> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { shallowRef, ref } from 'vue'; import { shallowRef } from 'vue';
import { i18n } from '@/i18n.js';
import MkModal from '@/components/MkModal.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 MkEmojiPicker from '@/components/MkEmojiPicker.vue';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
manualShowing?: boolean | null; manualShowing?: boolean | null;
@ -64,14 +50,12 @@ const props = withDefaults(defineProps<{
asReactionPicker?: boolean; asReactionPicker?: boolean;
targetNote?: Misskey.entities.Note; targetNote?: Misskey.entities.Note;
choseAndClose?: boolean; choseAndClose?: boolean;
manualReactionInput?: boolean;
}>(), { }>(), {
manualShowing: null, manualShowing: null,
showPinned: true, showPinned: true,
pinnedEmojis: undefined, pinnedEmojis: undefined,
asReactionPicker: false, asReactionPicker: false,
choseAndClose: true, choseAndClose: true,
manualReactionInput: false,
}); });
const emit = defineEmits<{ const emit = defineEmits<{
@ -83,8 +67,6 @@ const emit = defineEmits<{
const modal = shallowRef<InstanceType<typeof MkModal>>(); const modal = shallowRef<InstanceType<typeof MkModal>>();
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>(); const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
const remoteReactionName = ref('');
function chosen(emoji: string) { function chosen(emoji: string) {
emit('done', emoji); emit('done', emoji);
if (props.choseAndClose) { if (props.choseAndClose) {
@ -109,16 +91,4 @@ function opening() {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-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> </style>

15
packages/frontend/src/components/MkNoteDetailed.vue
View File

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

16
packages/frontend/src/components/SkNoteDetailed.vue
View File

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