feat: add user preference to hide translation button (#1358)

This commit is contained in:
Niklas Wolf 2023-01-21 11:19:03 +01:00 committed by GitHub
parent 5d94eabff6
commit 801b8fe027
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 1 deletions

View file

@ -10,6 +10,9 @@ const {
translation, translation,
enabled: isTranslationEnabled, enabled: isTranslationEnabled,
} = useTranslation(status, getLanguageCode()) } = useTranslation(status, getLanguageCode())
const preferenceHideTranslation = usePreferences('hideTranslation')
const showButton = computed(() => !preferenceHideTranslation.value && isTranslationEnabled && status.language !== getLanguageCode())
let translating = $ref(false) let translating = $ref(false)
const toggleTranslation = async () => { const toggleTranslation = async () => {
@ -26,7 +29,7 @@ const toggleTranslation = async () => {
<template> <template>
<div> <div>
<button <button
v-if="isTranslationEnabled && status.language !== getLanguageCode()" p-0 flex="~ center" gap-2 text-sm v-if="showButton" p-0 flex="~ center" gap-2 text-sm
:disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation" :disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation"
> >
<span v-if="translating" block animate-spin preserve-3d> <span v-if="translating" block animate-spin preserve-3d>

View file

@ -7,6 +7,7 @@ export interface PreferencesSettings {
hideBoostCount: boolean hideBoostCount: boolean
hideFavoriteCount: boolean hideFavoriteCount: boolean
hideFollowerCount: boolean hideFollowerCount: boolean
hideTranslation: boolean
grayscaleMode: boolean grayscaleMode: boolean
enableAutoplay: boolean enableAutoplay: boolean
experimentalVirtualScroller: boolean experimentalVirtualScroller: boolean
@ -58,6 +59,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
hideBoostCount: false, hideBoostCount: false,
hideFavoriteCount: false, hideFavoriteCount: false,
hideFollowerCount: false, hideFollowerCount: false,
hideTranslation: false,
grayscaleMode: false, grayscaleMode: false,
enableAutoplay: true, enableAutoplay: true,
experimentalVirtualScroller: true, experimentalVirtualScroller: true,

View file

@ -335,6 +335,7 @@
"hide_boost_count": "Boost-Zähler ausblenden", "hide_boost_count": "Boost-Zähler ausblenden",
"hide_favorite_count": "Favoritenzahl ausblenden", "hide_favorite_count": "Favoritenzahl ausblenden",
"hide_follower_count": "Anzahl der Follower ausblenden", "hide_follower_count": "Anzahl der Follower ausblenden",
"hide_translation": "Übersetzungen ausblenden",
"label": "Einstellungen", "label": "Einstellungen",
"title": "Experimentelle Funktionen", "title": "Experimentelle Funktionen",
"user_picker": "Benutzerauswahl", "user_picker": "Benutzerauswahl",

View file

@ -372,6 +372,7 @@
"hide_boost_count": "Hide boost count", "hide_boost_count": "Hide boost count",
"hide_favorite_count": "Hide favorite count", "hide_favorite_count": "Hide favorite count",
"hide_follower_count": "Hide follower count", "hide_follower_count": "Hide follower count",
"hide_translation": "Hide translation",
"label": "Preferences", "label": "Preferences",
"title": "Experimental Features", "title": "Experimental Features",
"user_picker": "User Picker", "user_picker": "User Picker",

View file

@ -33,6 +33,12 @@ const userSettings = useUserSettings()
> >
{{ $t('settings.preferences.hide_follower_count') }} {{ $t('settings.preferences.hide_follower_count') }}
</SettingsToggleItem> </SettingsToggleItem>
<SettingsToggleItem
:checked="getPreferences(userSettings, 'hideTranslation')"
@click="togglePreferences('hideTranslation')"
>
{{ $t('settings.preferences.hide_translation') }}
</SettingsToggleItem>
<SettingsToggleItem <SettingsToggleItem
:checked="getPreferences(userSettings, 'grayscaleMode')" :checked="getPreferences(userSettings, 'grayscaleMode')"
@click="togglePreferences('grayscaleMode')" @click="togglePreferences('grayscaleMode')"