upd: Allow users to change default like emoji

When users change the default like emoji in reactions tab from heart to another one it will be send out as that specific emoji.

If reset back to heart it will default to the instance like emoji again which is heart by default.

Closes transfem-org/Sharkey#95
This commit is contained in:
Mar0xy 2023-11-16 00:22:12 +01:00
parent 62bb0d1eaa
commit 490b249407
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
5 changed files with 36 additions and 6 deletions

View file

@ -280,6 +280,7 @@ const translating = ref(false);
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i.id)); const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i.id));
let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId || $i.id === appearNote.userId)) || (appearNote.myReaction != null))); let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId || $i.id === appearNote.userId)) || (appearNote.myReaction != null)));
const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : props.meta.defaultLike);
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
@ -513,7 +514,7 @@ function like(): void {
} }
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: props.meta.defaultLike, reaction: defaultLike.value,
}); });
const el = likeButton.value as HTMLElement | null | undefined; const el = likeButton.value as HTMLElement | null | undefined;
if (el) { if (el) {
@ -534,7 +535,7 @@ function react(viaKeyboard = false): void {
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: props.meta.defaultLike, reaction: defaultLike.value,
}); });
const el = reactButton.value as HTMLElement | null | undefined; const el = reactButton.value as HTMLElement | null | undefined;
if (el) { if (el) {

View file

@ -323,6 +323,7 @@ const conversation = ref<Misskey.entities.Note[]>([]);
const replies = ref<Misskey.entities.Note[]>([]); const replies = ref<Misskey.entities.Note[]>([]);
const quotes = ref<Misskey.entities.Note[]>([]); const quotes = ref<Misskey.entities.Note[]>([]);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id); const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : meta.defaultLike);
watch(() => props.expandAllCws, (expandAllCws) => { watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws; if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
@ -558,7 +559,7 @@ function react(viaKeyboard = false): void {
if (appearNote.reactionAcceptance === 'likeOnly') { if (appearNote.reactionAcceptance === 'likeOnly') {
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: meta.defaultLike, reaction: defaultLike.value,
}); });
const el = reactButton.value as HTMLElement | null | undefined; const el = reactButton.value as HTMLElement | null | undefined;
if (el) { if (el) {
@ -588,7 +589,7 @@ function like(): void {
showMovedDialog(); showMovedDialog();
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: meta.defaultLike, reaction: defaultLike.value,
}); });
const el = likeButton.value as HTMLElement | null | undefined; const el = likeButton.value as HTMLElement | null | undefined;
if (el) { if (el) {

View file

@ -134,6 +134,7 @@ const menuButton = shallowRef<HTMLElement>();
const likeButton = shallowRef<HTMLElement>(); const likeButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note); let appearNote = $computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : props.meta.defaultLike);
const isRenote = ( const isRenote = (
props.note.renote != null && props.note.renote != null &&
@ -189,7 +190,7 @@ function react(viaKeyboard = false): void {
if (props.note.reactionAcceptance === 'likeOnly') { if (props.note.reactionAcceptance === 'likeOnly') {
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: props.note.id, noteId: props.note.id,
reaction: props.meta.defaultLike, reaction: defaultLike.value,
}); });
const el = reactButton.value as HTMLElement | null | undefined; const el = reactButton.value as HTMLElement | null | undefined;
if (el) { if (el) {
@ -219,7 +220,7 @@ function like(): void {
showMovedDialog(); showMovedDialog();
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: props.note.id, noteId: props.note.id,
reaction: props.meta.defaultLike, reaction: defaultLike.value,
}); });
const el = reactButton.value as HTMLElement | null | undefined; const el = reactButton.value as HTMLElement | null | undefined;
if (el) { if (el) {

View file

@ -23,6 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template> <template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
</FromSlot> </FromSlot>
<FromSlot>
<template #label>Default like emoji</template>
<MkCustomEmoji v-if="like.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :class="$style.reaction" :name="like" :normal="true" :noStyle="true"/>
<MkEmoji v-else :emoji="like" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
<div class="_gaps_s" style="padding-top: 8px;">
<MkButton rounded :small="true" @click="chooseNewLike"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
<MkButton rounded :small="true" @click="resetLike"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
</div>
</FromSlot>
<MkRadios v-model="reactionPickerSize"> <MkRadios v-model="reactionPickerSize">
<template #label>{{ i18n.ts.size }}</template> <template #label>{{ i18n.ts.size }}</template>
<option :value="1">{{ i18n.ts.small }}</option> <option :value="1">{{ i18n.ts.small }}</option>
@ -74,6 +84,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
import { deepClone } from '@/scripts/clone.js'; import { deepClone } from '@/scripts/clone.js';
let reactions = $ref(deepClone(defaultStore.state.reactions)); let reactions = $ref(deepClone(defaultStore.state.reactions));
const like = $computed(defaultStore.makeGetterSetter('like'));
const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize')); const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth')); const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
@ -120,6 +131,18 @@ function chooseEmoji(ev: MouseEvent) {
}); });
} }
function chooseNewLike(ev: MouseEvent) {
os.pickEmoji(ev.currentTarget ?? ev.target, {
showPinned: false,
}).then(emoji => {
defaultStore.set('like', emoji as string);
});
}
function resetLike() {
defaultStore.set('like', '❤️');
}
watch($$(reactions), () => { watch($$(reactions), () => {
save(); save();
}, { }, {

View file

@ -110,6 +110,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'account', where: 'account',
default: 'nonSensitiveOnly' as 'likeOnly' | 'likeOnlyForRemote' | 'nonSensitiveOnly' | 'nonSensitiveOnlyForLocalLikeOnlyForRemote' | null, default: 'nonSensitiveOnly' as 'likeOnly' | 'likeOnlyForRemote' | 'nonSensitiveOnly' | 'nonSensitiveOnlyForLocalLikeOnlyForRemote' | null,
}, },
like: {
where: 'account',
default: '❤️',
},
mutedAds: { mutedAds: {
where: 'account', where: 'account',
default: [] as string[], default: [] as string[],