fix: Add zen mode to preferences, remove shortcut (#2003)
parent
9564985a4e
commit
56405f52bb
|
@ -66,10 +66,6 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
|||
description: t('magic_keys.groups.actions.boost'),
|
||||
shortcut: { keys: ['b'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.zen_mode'),
|
||||
shortcut: { keys: ['z'], isSequence: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
@ -93,9 +93,9 @@ onBeforeUnmount(() => {
|
|||
transition-colors duration-200 transform
|
||||
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
|
||||
:aria-label="$t('nav.zen_mode')"
|
||||
@click="userSettings.zenMode = !userSettings.zenMode"
|
||||
@click="togglePreferences('zenMode')"
|
||||
>
|
||||
<span :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
|
||||
<span :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
|
||||
{{ $t('nav.zen_mode') }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -23,9 +23,9 @@ function toggleDark() {
|
|||
<button
|
||||
flex
|
||||
text-lg
|
||||
:class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
|
||||
:class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
|
||||
:aria-label="$t('nav.zen_mode')"
|
||||
@click="userSettings.zenMode = !userSettings.zenMode"
|
||||
@click="togglePreferences('zenMode')"
|
||||
/>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('settings.about.sponsor_action')">
|
||||
|
|
|
@ -125,7 +125,7 @@ function showFavoritedAndBoostedBy() {
|
|||
|
||||
<template #popper>
|
||||
<div flex="~ col">
|
||||
<template v-if="userSettings.zenMode">
|
||||
<template v-if="getPreferences(userSettings, 'zenMode')">
|
||||
<CommonDropdownItem
|
||||
:text="$t('action.reply')"
|
||||
icon="i-ri:chat-1-line"
|
||||
|
|
|
@ -154,7 +154,7 @@ const forceShow = ref(false)
|
|||
<StatusAccountDetails :account="status.account" />
|
||||
</AccountHoverWrapper>
|
||||
<div flex-auto />
|
||||
<div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
|
||||
<div v-show="!getPreferences(userSettings, 'zenMode')" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
|
||||
<AccountBotIndicator v-if="status.account.bot" me-2 />
|
||||
<div flex="~ gap1" items-center>
|
||||
<StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
|
||||
|
@ -182,7 +182,7 @@ const forceShow = ref(false)
|
|||
:in-notification="inNotification"
|
||||
mb2 :class="{ 'mt-2 mb1': isDM }"
|
||||
/>
|
||||
<StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
|
||||
<StatusActions v-if="actions !== false" v-show="!getPreferences(userSettings, 'zenMode')" :status="status" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
@ -274,10 +274,10 @@ export function provideGlobalCommands() {
|
|||
scope: 'Preferences',
|
||||
|
||||
name: () => t('command.toggle_zen_mode'),
|
||||
icon: () => userSettings.value.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
|
||||
icon: () => userSettings.value.preferences.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
|
||||
|
||||
onActivate() {
|
||||
userSettings.value.zenMode = !userSettings.value.zenMode
|
||||
togglePreferences('zenMode')
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
@ -20,6 +20,7 @@ export interface PreferencesSettings {
|
|||
enableAutoplay: boolean
|
||||
enableDataSaving: boolean
|
||||
enablePinchToZoom: boolean
|
||||
zenMode: boolean
|
||||
experimentalVirtualScroller: boolean
|
||||
experimentalGitHubCards: boolean
|
||||
experimentalUserPicker: boolean
|
||||
|
@ -31,7 +32,6 @@ export interface UserSettings {
|
|||
fontSize: FontSize
|
||||
language: string
|
||||
disabledTranslationLanguages: string[]
|
||||
zenMode: boolean
|
||||
themeColors?: ThemeColors
|
||||
}
|
||||
|
||||
|
@ -57,16 +57,6 @@ export function getDefaultLanguage(languages: string[]) {
|
|||
return matchLanguages(languages, navigator.languages) || 'en-US'
|
||||
}
|
||||
|
||||
export function getDefaultUserSettings(locales: string[]): UserSettings {
|
||||
return {
|
||||
language: getDefaultLanguage(locales),
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
disabledTranslationLanguages: [],
|
||||
zenMode: false,
|
||||
preferences: {},
|
||||
}
|
||||
}
|
||||
|
||||
export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
|
||||
hideAltIndicatorOnPosts: false,
|
||||
hideBoostCount: false,
|
||||
|
@ -80,7 +70,17 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
|
|||
enableAutoplay: true,
|
||||
enableDataSaving: false,
|
||||
enablePinchToZoom: false,
|
||||
zenMode: false,
|
||||
experimentalVirtualScroller: true,
|
||||
experimentalGitHubCards: true,
|
||||
experimentalUserPicker: true,
|
||||
}
|
||||
|
||||
export function getDefaultUserSettings(locales: string[]): UserSettings {
|
||||
return {
|
||||
language: getDefaultLanguage(locales),
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
disabledTranslationLanguages: [],
|
||||
preferences: DEFAULT__PREFERENCES_SETTINGS,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -208,8 +208,7 @@
|
|||
"command_mode": "Command mode",
|
||||
"compose": "Compose",
|
||||
"favourite": "Favourite",
|
||||
"title": "Actions",
|
||||
"zen_mode": "Zen mode"
|
||||
"title": "Actions"
|
||||
},
|
||||
"media": {
|
||||
"title": "Media"
|
||||
|
@ -453,7 +452,9 @@
|
|||
"title": "Experimental Features",
|
||||
"user_picker": "User Picker",
|
||||
"virtual_scroll": "Virtual Scrolling",
|
||||
"wellbeing": "Wellbeing"
|
||||
"wellbeing": "Wellbeing",
|
||||
"zen_mode": "Zen mode",
|
||||
"zen_mode_description": "Hide asides unless the mouse cursor is over them. Also hide some elements from the timeline."
|
||||
},
|
||||
"profile": {
|
||||
"appearance": {
|
||||
|
|
|
@ -92,6 +92,15 @@ const userSettings = useUserSettings()
|
|||
{{ $t('settings.preferences.hide_username_emojis_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'zenMode')"
|
||||
@click="togglePreferences('zenMode')"
|
||||
>
|
||||
{{ $t("settings.preferences.zen_mode") }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.zen_mode_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
||||
<div i-ri-flask-line />
|
||||
{{ $t('settings.preferences.title') }}
|
||||
|
|
|
@ -2,7 +2,6 @@ import type { RouteLocationRaw } from 'vue-router'
|
|||
import { useMagicSequence } from '~/composables/magickeys'
|
||||
|
||||
export default defineNuxtPlugin(({ $scrollToTop }) => {
|
||||
const userSettings = useUserSettings()
|
||||
const keys = useMagicKeys()
|
||||
const router = useRouter()
|
||||
|
||||
|
@ -23,7 +22,6 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
|
|||
}
|
||||
|
||||
whenever(logicAnd(notUsingInput, keys['?']), toggleKeyboardShortcuts)
|
||||
whenever(logicAnd(notUsingInput, keys.z), () => userSettings.value.zenMode = !userSettings.value.zenMode)
|
||||
|
||||
const defaultPublishDialog = () => {
|
||||
const current = keys.current
|
||||
|
|
|
@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
|
|||
html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
|
||||
})
|
||||
watchEffect(() => {
|
||||
html.classList.toggle('zen', userSettings.value.zenMode)
|
||||
html.classList.toggle('zen', userSettings.value.preferences.zenMode)
|
||||
})
|
||||
watchEffect(() => {
|
||||
Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))
|
||||
|
|
|
@ -25,7 +25,7 @@ export default defineNuxtPlugin(() => {
|
|||
if (settings.language) {
|
||||
html.setAttribute('lang', settings.language)
|
||||
}
|
||||
if (settings.zenMode) {
|
||||
if (settings.preferences.zenMode) {
|
||||
html.classList.add('zen')
|
||||
}
|
||||
if (settings.themeColors) {
|
||||
|
|
Loading…
Reference in New Issue