feat: add 'use star favorite icon' preference (#2067)

This commit is contained in:
TAKAHASHI Shuuji 2023-05-07 00:52:33 +09:00 committed by GitHub
parent 126cd4d535
commit 582a9847a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 37 additions and 10 deletions

View file

@ -16,6 +16,7 @@ const isSelf = $(useSelfAccount(() => account))
const { t } = useI18n()
const { client } = $(useMasto())
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
async function toggleMute() {
if (!relationship!.muting && await openConfirmDialog({
@ -198,7 +199,7 @@ async function removeUserNote() {
<CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
</NuxtLink>
<NuxtLink to="/favourites">
<CommonDropdownItem :text="$t('account.favourites')" icon="i-ri:heart-3-line" :command="command" />
<CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
</NuxtLink>
<NuxtLink to="/mutes">
<CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />

View file

@ -3,6 +3,7 @@ const { command } = defineProps<{
command?: boolean
}>()
const { notifications } = useNotifications()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
</script>
<template>
@ -22,7 +23,7 @@ const { notifications } = useNotifications()
</template>
</NavSideItem>
<NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
<NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
<NavSideItem :text="$t('nav.favourites')" to="/favourites" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" user-only :command="command" />
<NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />

View file

@ -12,6 +12,7 @@ const focusEditor = inject<typeof noop>('focus-editor', noop)
const { details, command } = $(props)
const userSettings = useUserSettings()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const {
status,
@ -77,9 +78,11 @@ function reply() {
<StatusActionButton
:content="$t('action.favourite')"
:text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
color="text-rose" hover="text-rose" elk-group-hover="bg-rose/10"
icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill"
:color="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
:hover="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
:elk-group-hover="useStarFavoriteIcon ? 'bg-yellow/10' : 'bg-rose/10'"
:icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'"
:active-icon="useStarFavoriteIcon ? 'i-ri:star-fill' : 'i-ri:heart-3-fill'"
:active="!!status.favourited"
:disabled="isLoading.favourited"
:command="command"
@ -97,7 +100,9 @@ function reply() {
<div flex-none>
<StatusActionButton
:content="$t('action.bookmark')"
color="text-yellow" hover="text-yellow" elk-group-hover="bg-yellow/10"
:color="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
:hover="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
:elk-group-hover="useStarFavoriteIcon ? 'bg-rose/10' : 'bg-yellow/10' "
icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill"
:active="!!status.bookmarked"

View file

@ -28,6 +28,7 @@ const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const userSettings = useUserSettings()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
@ -149,8 +150,13 @@ function showFavoritedAndBoostedBy() {
<CommonDropdownItem
:text="status.favourited ? $t('action.favourited') : $t('action.favourite')"
:icon="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
:class="status.favourited ? 'text-rose' : ''"
:icon="useStarFavoriteIcon
? status.favourited ? 'i-ri:star-fill' : 'i-ri:star-line'
: status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
:class="status.favourited
? useStarFavoriteIcon ? 'text-yellow' : 'text-rose'
: ''
"
:command="command"
:disabled="isLoading.favourited"
@click="toggleFavourite()"
@ -159,7 +165,10 @@ function showFavoritedAndBoostedBy() {
<CommonDropdownItem
:text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')"
:icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'"
:class="status.bookmarked ? 'text-yellow' : ''"
:class="status.bookmarked
? useStarFavoriteIcon ? 'text-rose' : 'text-yellow'
: ''
"
:command="command"
:disabled="isLoading.bookmarked"
@click="toggleBookmark()"