feat: add 'use star favorite icon' preference (#2067)
This commit is contained in:
parent
126cd4d535
commit
582a9847a1
@ -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" />
|
||||
|
@ -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" />
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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()"
|
||||
|
@ -21,6 +21,7 @@ export interface PreferencesSettings {
|
||||
enableAutoplay: boolean
|
||||
enableDataSaving: boolean
|
||||
enablePinchToZoom: boolean
|
||||
useStarFavoriteIcon: boolean
|
||||
zenMode: boolean
|
||||
experimentalVirtualScroller: boolean
|
||||
experimentalGitHubCards: boolean
|
||||
@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
|
||||
enableAutoplay: true,
|
||||
enableDataSaving: false,
|
||||
enablePinchToZoom: false,
|
||||
useStarFavoriteIcon: false,
|
||||
zenMode: false,
|
||||
experimentalVirtualScroller: true,
|
||||
experimentalGitHubCards: true,
|
||||
|
@ -454,6 +454,7 @@
|
||||
"hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
|
||||
"label": "Preferences",
|
||||
"title": "Experimental Features",
|
||||
"use_star_favorite_icon": "Use star favorite icon",
|
||||
"user_picker": "User Picker",
|
||||
"virtual_scroll": "Virtual Scrolling",
|
||||
"wellbeing": "Wellbeing",
|
||||
|
@ -454,6 +454,7 @@
|
||||
"hide_username_emojis_description": "タイムライン上でユーザー名に含まれる絵文字を隠します。プロフィールでは絵文字は引き続き表示されます。",
|
||||
"label": "環境設定",
|
||||
"title": "実験的機能",
|
||||
"use_star_favorite_icon": "星のお気に入りアイコンを使用する",
|
||||
"user_picker": "ユーザーピッカー",
|
||||
"virtual_scroll": "仮想スクロール",
|
||||
"wellbeing": "ウェルビーイング",
|
||||
|
@ -4,6 +4,7 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
|
||||
useHydratedHead({
|
||||
title: () => t('nav.favourites'),
|
||||
@ -14,7 +15,7 @@ useHydratedHead({
|
||||
<MainContent>
|
||||
<template #title>
|
||||
<NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||
<div i-ri:heart-3-line />
|
||||
<div :class="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" />
|
||||
<span>{{ t('nav.favourites') }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
@ -49,6 +49,12 @@ const userSettings = useUserSettings()
|
||||
>
|
||||
{{ $t('settings.preferences.enable_pinch_to_zoom') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
|
||||
@click="togglePreferences('useStarFavoriteIcon')"
|
||||
>
|
||||
{{ $t('settings.preferences.use_star_favorite_icon') }}
|
||||
</SettingsToggleItem>
|
||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
||||
<div i-ri-hearts-line />
|
||||
{{ $t('settings.preferences.wellbeing') }}
|
||||
|
Loading…
Reference in New Issue
Block a user