fix: Add zen mode to preferences, remove shortcut (#2003)

zio/stable
manuq 2023-04-23 07:21:33 -03:00 committed by GitHub
parent 9564985a4e
commit 56405f52bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 35 additions and 31 deletions

View File

@ -66,10 +66,6 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
description: t('magic_keys.groups.actions.boost'), description: t('magic_keys.groups.actions.boost'),
shortcut: { keys: ['b'], isSequence: false }, shortcut: { keys: ['b'], isSequence: false },
}, },
{
description: t('magic_keys.groups.actions.zen_mode'),
shortcut: { keys: ['z'], isSequence: false },
},
], ],
}, },
{ {

View File

@ -93,9 +93,9 @@ onBeforeUnmount(() => {
transition-colors duration-200 transform transition-colors duration-200 transform
hover="bg-gray-100 dark:(bg-gray-700 text-white)" hover="bg-gray-100 dark:(bg-gray-700 text-white)"
:aria-label="$t('nav.zen_mode')" :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') }} {{ $t('nav.zen_mode') }}
</button> </button>
</div> </div>

View File

@ -23,9 +23,9 @@ function toggleDark() {
<button <button
flex flex
text-lg 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')" :aria-label="$t('nav.zen_mode')"
@click="userSettings.zenMode = !userSettings.zenMode" @click="togglePreferences('zenMode')"
/> />
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('settings.about.sponsor_action')"> <CommonTooltip :content="$t('settings.about.sponsor_action')">

View File

@ -125,7 +125,7 @@ function showFavoritedAndBoostedBy() {
<template #popper> <template #popper>
<div flex="~ col"> <div flex="~ col">
<template v-if="userSettings.zenMode"> <template v-if="getPreferences(userSettings, 'zenMode')">
<CommonDropdownItem <CommonDropdownItem
:text="$t('action.reply')" :text="$t('action.reply')"
icon="i-ri:chat-1-line" icon="i-ri:chat-1-line"

View File

@ -154,7 +154,7 @@ const forceShow = ref(false)
<StatusAccountDetails :account="status.account" /> <StatusAccountDetails :account="status.account" />
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex-auto /> <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 /> <AccountBotIndicator v-if="status.account.bot" me-2 />
<div flex="~ gap1" items-center> <div flex="~ gap1" items-center>
<StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" /> <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
@ -182,7 +182,7 @@ const forceShow = ref(false)
:in-notification="inNotification" :in-notification="inNotification"
mb2 :class="{ 'mt-2 mb1': isDM }" 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> </div>
</template> </template>
</div> </div>

View File

@ -274,10 +274,10 @@ export function provideGlobalCommands() {
scope: 'Preferences', scope: 'Preferences',
name: () => t('command.toggle_zen_mode'), 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() { onActivate() {
userSettings.value.zenMode = !userSettings.value.zenMode togglePreferences('zenMode')
}, },
}) })

View File

@ -20,6 +20,7 @@ export interface PreferencesSettings {
enableAutoplay: boolean enableAutoplay: boolean
enableDataSaving: boolean enableDataSaving: boolean
enablePinchToZoom: boolean enablePinchToZoom: boolean
zenMode: boolean
experimentalVirtualScroller: boolean experimentalVirtualScroller: boolean
experimentalGitHubCards: boolean experimentalGitHubCards: boolean
experimentalUserPicker: boolean experimentalUserPicker: boolean
@ -31,7 +32,6 @@ export interface UserSettings {
fontSize: FontSize fontSize: FontSize
language: string language: string
disabledTranslationLanguages: string[] disabledTranslationLanguages: string[]
zenMode: boolean
themeColors?: ThemeColors themeColors?: ThemeColors
} }
@ -57,16 +57,6 @@ export function getDefaultLanguage(languages: string[]) {
return matchLanguages(languages, navigator.languages) || 'en-US' 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 = { export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
hideAltIndicatorOnPosts: false, hideAltIndicatorOnPosts: false,
hideBoostCount: false, hideBoostCount: false,
@ -80,7 +70,17 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
enableAutoplay: true, enableAutoplay: true,
enableDataSaving: false, enableDataSaving: false,
enablePinchToZoom: false, enablePinchToZoom: false,
zenMode: false,
experimentalVirtualScroller: true, experimentalVirtualScroller: true,
experimentalGitHubCards: true, experimentalGitHubCards: true,
experimentalUserPicker: true, experimentalUserPicker: true,
} }
export function getDefaultUserSettings(locales: string[]): UserSettings {
return {
language: getDefaultLanguage(locales),
fontSize: DEFAULT_FONT_SIZE,
disabledTranslationLanguages: [],
preferences: DEFAULT__PREFERENCES_SETTINGS,
}
}

View File

@ -208,8 +208,7 @@
"command_mode": "Command mode", "command_mode": "Command mode",
"compose": "Compose", "compose": "Compose",
"favourite": "Favourite", "favourite": "Favourite",
"title": "Actions", "title": "Actions"
"zen_mode": "Zen mode"
}, },
"media": { "media": {
"title": "Media" "title": "Media"
@ -453,7 +452,9 @@
"title": "Experimental Features", "title": "Experimental Features",
"user_picker": "User Picker", "user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling", "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": { "profile": {
"appearance": { "appearance": {

View File

@ -92,6 +92,15 @@ const userSettings = useUserSettings()
{{ $t('settings.preferences.hide_username_emojis_description') }} {{ $t('settings.preferences.hide_username_emojis_description') }}
</template> </template>
</SettingsToggleItem> </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> <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
<div i-ri-flask-line /> <div i-ri-flask-line />
{{ $t('settings.preferences.title') }} {{ $t('settings.preferences.title') }}

View File

@ -2,7 +2,6 @@ import type { RouteLocationRaw } from 'vue-router'
import { useMagicSequence } from '~/composables/magickeys' import { useMagicSequence } from '~/composables/magickeys'
export default defineNuxtPlugin(({ $scrollToTop }) => { export default defineNuxtPlugin(({ $scrollToTop }) => {
const userSettings = useUserSettings()
const keys = useMagicKeys() const keys = useMagicKeys()
const router = useRouter() const router = useRouter()
@ -23,7 +22,6 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
} }
whenever(logicAnd(notUsingInput, keys['?']), toggleKeyboardShortcuts) whenever(logicAnd(notUsingInput, keys['?']), toggleKeyboardShortcuts)
whenever(logicAnd(notUsingInput, keys.z), () => userSettings.value.zenMode = !userSettings.value.zenMode)
const defaultPublishDialog = () => { const defaultPublishDialog = () => {
const current = keys.current const current = keys.current

View File

@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE) html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
}) })
watchEffect(() => { watchEffect(() => {
html.classList.toggle('zen', userSettings.value.zenMode) html.classList.toggle('zen', userSettings.value.preferences.zenMode)
}) })
watchEffect(() => { watchEffect(() => {
Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v)) Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))

View File

@ -25,7 +25,7 @@ export default defineNuxtPlugin(() => {
if (settings.language) { if (settings.language) {
html.setAttribute('lang', settings.language) html.setAttribute('lang', settings.language)
} }
if (settings.zenMode) { if (settings.preferences.zenMode) {
html.classList.add('zen') html.classList.add('zen')
} }
if (settings.themeColors) { if (settings.themeColors) {