heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Change icons for like and favorite

Browse source 
"Like" will now use a star emoji, like mastodon's faves
"Favorite" will now use a bookmark emoji, since it functions as a bookmark
This commit is contained in:
jaina heartles 2024-02-26 21:36:53 -08:00
parent 6ecb0dcacf
commit 3ae5cfd720
23 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/backend/src/core/ReactionService.ts
View file

@ -29,7 +29,7 @@ import { CustomEmojiService } from '@/core/CustomEmojiService.js';
import { RoleService } from '@/core/RoleService.js';
import { FeaturedService } from '@/core/FeaturedService.js';
const FALLBACK = '❤';
const FALLBACK = '⭐';
const PER_NOTE_REACTION_USER_PAIR_CACHE_MAX = 16;
const legacies: Record<string, string> = {

4
packages/frontend/src/components/MkNote.vue
View file

@ -133,10 +133,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.footerButton" class="_button" @click.stop @click="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click.stop @click="undoReact(appearNote)">

4
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -142,10 +142,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(appearNote)">

4
packages/frontend/src/components/MkNoteSub.vue
View file

@ -49,10 +49,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-prohibit ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(note)">

4
packages/frontend/src/components/MkPostForm.vue
View file

@ -37,8 +37,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-else><i class="ph-rocket ph-bold ph-lg"></i></span>
</button>
<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
<span v-if="reactionAcceptance === 'likeOnly'"><i class="ph-heart ph-bold ph-lg"></i></span>
<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ph-heart ph-bold ph-lg"></i></span>
<span v-if="reactionAcceptance === 'likeOnly'"><i class="ph-star ph-bold ph-lg"></i></span>
<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ph-star ph-bold ph-lg"></i></span>
<span v-else><i class="ph-smiley ph-bold ph-lg"></i></span>
</button>
<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">

4
packages/frontend/src/components/SkNote.vue
View file

@ -135,10 +135,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.footerButton" class="_button" @click.stop @click="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click.stop @click="undoReact(appearNote)">

4
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -150,10 +150,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(appearNote)">

4
packages/frontend/src/components/SkNoteSub.vue
View file

@ -57,10 +57,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-prohibit ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-star ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(note)">

2
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -67,7 +67,7 @@
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button class="_button" :class="$style.noteFooterButton">
<i class="ph-heart ph-bold ph-lg"></i>
<i class="ph-star ph-bold ph-lg"></i>
</button>
</footer>
</article>

2
packages/frontend/src/navbar.ts
View file

@ -82,7 +82,7 @@ export const navbarItemDef = reactive({
},
favorites: {
title: i18n.ts.favorites,
icon: 'ph-star ph-bold ph-lg',
icon: 'ph-bookmarks ph-bold ph-lg',
show: computed(() => $i != null),
to: '/my/favorites',
},

4
packages/frontend/src/pages/channel.vue
View file

@ -10,8 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer">
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ph-star ph-bold ph-lg"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ph-star ph-bold ph-lg"></i></MkButton>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ph-bookmark-simple ph-bold ph-lg"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ph-bookmark-simple ph-bold ph-lg"></i></MkButton>
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : undefined }" :class="$style.banner">
<div :class="$style.bannerStatus">
<div><i class="ph-users ph-bold ph-lg ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>

4
packages/frontend/src/pages/clip.vue
View file

@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="clip.description" :class="$style.description">
<Mfm :text="clip.description" :isNote="false"/>
</div>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike rounded primary @click="unfavorite()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike rounded @click="favorite()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike rounded primary @click="unfavorite()"><i class="ph-star ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike rounded @click="favorite()"><i class="ph-star ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<div :class="$style.user">
<MkAvatar :user="clip.user" :class="$style.avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/>
</div>

2
packages/frontend/src/pages/favorites.vue
View file

@ -40,7 +40,7 @@ const pagination = {
definePageMetadata({
title: i18n.ts.favorites,
icon: 'ph-star ph-bold ph-lg',
icon: 'ph-bookmarks-simple ph-bold ph-lg',
});
</script>

2
packages/frontend/src/pages/flash/flash-index.vue
View file

@ -84,7 +84,7 @@ const headerTabs = computed(() => [{
}, {
key: 'liked',
title: i18n.ts._play.liked,
icon: 'ph-heart ph-bold ph-lg',
icon: 'ph-star ph-bold ph-lg',
}]);
definePageMetadata(computed(() => ({

6
packages/frontend/src/pages/flash/flash.vue
View file

@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAsUi v-if="root" :component="root" :components="components"/>
</div>
<div class="actions _panel">
<MkButton v-if="flash.isLiked" v-tooltip="i18n.ts.unlike" asLike class="button" rounded primary @click="unlike()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.like" asLike class="button" rounded @click="like()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
<MkButton v-if="flash.isLiked" v-tooltip="i18n.ts.unlike" asLike class="button" rounded primary @click="unlike()"><i class="ph-star ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.like" asLike class="button" rounded @click="like()"><i class="ph-star ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
<MkButton v-tooltip="i18n.ts.shareWithNote" class="button" rounded @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ti-fw"></i></MkButton>
<MkButton v-tooltip="i18n.ts.copyLink" class="button" rounded @click="copyLink"><i class="ph-share-network ph-bold ph-lg ti-fw"></i></MkButton>
<MkButton v-if="isSupportShare()" v-tooltip="i18n.ts.share" class="button" rounded @click="share"><i class="ph-share-network ph-bold ph-lg ti-fw"></i></MkButton>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="summary">{{ flash.summary }}</div>
<MkButton class="start" gradate rounded large @click="start">Play</MkButton>
<div class="info">
<span v-tooltip="i18n.ts.numberOfLikes"><i class="ph-heart ph-bold ph-lg"></i> {{ flash.likedCount }}</span>
<span v-tooltip="i18n.ts.numberOfLikes"><i class="ph-star ph-bold ph-lg"></i> {{ flash.likedCount }}</span>
</div>
</div>
</div>

2
packages/frontend/src/pages/gallery/index.vue
View file

@ -111,7 +111,7 @@ const headerTabs = computed(() => [{
}, {
key: 'liked',
title: i18n.ts._gallery.liked,
icon: 'ph-heart ph-bold ph-lg',
icon: 'ph-star ph-bold ph-lg',
}, {
key: 'my',
title: i18n.ts._gallery.my,

4
packages/frontend/src/pages/gallery/post.vue
View file

@ -23,8 +23,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="actions">
<div class="like">
<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-heart-break ph-bold ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-star-break ph-bold ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ph-star ph-bold ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
</div>
<div class="other">
<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ph-pencil ph-bold ph-lg ti-fw"></i></button>

4
packages/frontend/src/pages/list.vue
View file

@ -26,8 +26,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
<MkButton v-if="list.isLiked" v-tooltip="i18n.ts.unlike" inline :class="$style.button" asLike primary @click="unlike()"><i class="ph-heart-break ph-bold ph-lg"></i><span v-if="list.likedCount > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton v-if="!list.isLiked" v-tooltip="i18n.ts.like" inline :class="$style.button" asLike @click="like()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="1 > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton v-if="list.isLiked" v-tooltip="i18n.ts.unlike" inline :class="$style.button" asLike primary @click="unlike()"><i class="ph-star-break ph-bold ph-lg"></i><span v-if="list.likedCount > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton v-if="!list.isLiked" v-tooltip="i18n.ts.like" inline :class="$style.button" asLike @click="like()"><i class="ph-star ph-bold ph-lg"></i><span v-if="1 > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton inline @click="create()"><i class="ph-download ph-bold ph-lg" :class="$style.import"></i>{{ i18n.ts.import }}</MkButton>
</MkSpacer>
</MkStickyContainer>

2
packages/frontend/src/pages/my-clips/index.vue
View file

@ -96,7 +96,7 @@ const headerTabs = computed(() => [{
}, {
key: 'favorites',
title: i18n.ts.favorites,
icon: 'ph-heart ph-bold ph-lg',
icon: 'ph-star ph-bold ph-lg',
}]);
definePageMetadata({

4
packages/frontend/src/pages/page.vue
View file

@ -29,8 +29,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="actions">
<div class="like">
<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" asLike primary @click="unlike()"><i class="ph-heart-break ph-bold ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" asLike @click="like()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" asLike primary @click="unlike()"><i class="ph-star-break ph-bold ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" asLike @click="like()"><i class="ph-star ph-bold ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
</div>
<div class="other">
<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-rocket-launch ph-bold ph-lg ti-fw"></i></button>

2
packages/frontend/src/pages/pages.vue
View file

@ -82,7 +82,7 @@ const headerTabs = computed(() => [{
}, {
key: 'liked',
title: i18n.ts._pages.liked,
icon: 'ph-heart ph-bold ph-lg',
icon: 'ph-star ph-bold ph-lg',
}]);
definePageMetadata(computed(() => ({

2
packages/frontend/src/pages/settings/import-export.vue
View file

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</FormSection>
<FormSection>
<template #label><i class="ph-star ph-bold ph-lg"></i> {{ i18n.ts._exportOrImport.favoritedNotes }}</template>
<template #label><i class="ph-bookmark-simple ph-bold ph-lg"></i> {{ i18n.ts._exportOrImport.favoritedNotes }}</template>
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ph-download ph-bold ph-lg"></i></template>

4
packages/frontend/src/scripts/get-note-menu.ts
View file

@ -318,11 +318,11 @@ export function getNoteMenu(props: {
} : undefined,
{ type: 'divider' },
statePromise.then(state => state.isFavorited ? {
icon: 'ph-star-half ph-bold ph-lg',
icon: 'ph-bookmarks ph-bold ph-lg',
text: i18n.ts.unfavorite,
action: () => toggleFavorite(false),
} : {
icon: 'ph-star ph-bold ph-lg',
icon: 'ph-bookmark-simple ph-bold ph-lg',
text: i18n.ts.favorite,
action: () => toggleFavorite(true),
}),