mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
fix: Add zen mode to preferences, remove shortcut (#2003)
This commit is contained in:
parent
9564985a4e
commit
56405f52bb
12 changed files with 35 additions and 31 deletions
|
@ -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 },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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')">
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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')
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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') }}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue