feat: add new setting to disable blur for low-performance device (#2561)
This commit is contained in:
parent
b0125eb3fc
commit
f79d84ad6e
|
@ -10,6 +10,7 @@ defineProps<{
|
||||||
|
|
||||||
const container = ref()
|
const container = ref()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const userSettings = useUserSettings()
|
||||||
const { height: windowHeight } = useWindowSize()
|
const { height: windowHeight } = useWindowSize()
|
||||||
const { height: containerHeight } = useElementBounding(container)
|
const { height: containerHeight } = useElementBounding(container)
|
||||||
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
|
@ -26,10 +27,13 @@ const containerClass = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<div ref="container" :class="containerClass">
|
<div ref="container" :class="containerClass">
|
||||||
<div
|
<div
|
||||||
sticky top-0 z10 backdrop-blur
|
sticky top-0 z10
|
||||||
pt="[env(safe-area-inset-top,0)]"
|
pt="[env(safe-area-inset-top,0)]"
|
||||||
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
||||||
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
|
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
|
||||||
|
:class="{
|
||||||
|
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
||||||
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
|
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
|
||||||
|
|
|
@ -56,6 +56,7 @@ const visible = defineModel<boolean>({ required: true })
|
||||||
|
|
||||||
const deactivated = useDeactivated()
|
const deactivated = useDeactivated()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
/** scrollable HTML element */
|
/** scrollable HTML element */
|
||||||
const elDialogMain = ref<HTMLDivElement>()
|
const elDialogMain = ref<HTMLDivElement>()
|
||||||
|
@ -156,7 +157,13 @@ useEventListener('keydown', (e: KeyboardEvent) => {
|
||||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||||
|
|
||||||
<!-- Mask layer: blur -->
|
<!-- Mask layer: blur -->
|
||||||
<div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
|
<div
|
||||||
|
class="dialog-mask"
|
||||||
|
:class="{
|
||||||
|
'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
||||||
|
}"
|
||||||
|
absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
|
||||||
|
/>
|
||||||
<!-- Mask layer: dimming -->
|
<!-- Mask layer: dimming -->
|
||||||
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
|
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
|
||||||
<!-- Dialog container -->
|
<!-- Dialog container -->
|
||||||
|
|
|
@ -13,7 +13,10 @@ function toggleVisible() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonEl = ref<HTMLDivElement>()
|
const buttonEl = ref<HTMLDivElement>()
|
||||||
/** Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened */
|
/**
|
||||||
|
* Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened
|
||||||
|
* @param mouse
|
||||||
|
*/
|
||||||
function clickEvent(mouse: MouseEvent) {
|
function clickEvent(mouse: MouseEvent) {
|
||||||
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
|
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
|
||||||
if (modelValue.value) {
|
if (modelValue.value) {
|
||||||
|
@ -141,11 +144,12 @@ const { dragging, dragDistance } = invoke(() => {
|
||||||
:class="{
|
:class="{
|
||||||
'duration-0': dragging,
|
'duration-0': dragging,
|
||||||
'duration-250': !dragging,
|
'duration-250': !dragging,
|
||||||
|
'backdrop-blur-md': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
||||||
}"
|
}"
|
||||||
transition="transform ease-in"
|
transition="transform ease-in"
|
||||||
flex-1 min-w-48 py-6 mb="-1px"
|
flex-1 min-w-48 py-6 mb="-1px"
|
||||||
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
|
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
|
||||||
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
|
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
|
||||||
border-t-1 border-base
|
border-t-1 border-base
|
||||||
>
|
>
|
||||||
<!-- Nav -->
|
<!-- Nav -->
|
||||||
|
|
|
@ -19,6 +19,7 @@ export interface PreferencesSettings {
|
||||||
hideNews: boolean
|
hideNews: boolean
|
||||||
grayscaleMode: boolean
|
grayscaleMode: boolean
|
||||||
enableAutoplay: boolean
|
enableAutoplay: boolean
|
||||||
|
optimizeForLowPerformanceDevice: boolean
|
||||||
enableDataSaving: boolean
|
enableDataSaving: boolean
|
||||||
enablePinchToZoom: boolean
|
enablePinchToZoom: boolean
|
||||||
useStarFavoriteIcon: boolean
|
useStarFavoriteIcon: boolean
|
||||||
|
@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
|
||||||
hideNews: false,
|
hideNews: false,
|
||||||
grayscaleMode: false,
|
grayscaleMode: false,
|
||||||
enableAutoplay: true,
|
enableAutoplay: true,
|
||||||
|
optimizeForLowPerformanceDevice: false,
|
||||||
enableDataSaving: false,
|
enableDataSaving: false,
|
||||||
enablePinchToZoom: false,
|
enablePinchToZoom: false,
|
||||||
useStarFavoriteIcon: false,
|
useStarFavoriteIcon: false,
|
||||||
|
|
|
@ -528,6 +528,7 @@
|
||||||
"hide_username_emojis": "Hide username emojis",
|
"hide_username_emojis": "Hide username emojis",
|
||||||
"hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
|
"hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
|
||||||
"label": "Preferences",
|
"label": "Preferences",
|
||||||
|
"optimize_for_low_performance_device": "Optimize for low performance device",
|
||||||
"title": "Experimental Features",
|
"title": "Experimental Features",
|
||||||
"use_star_favorite_icon": "Use star favorite icon",
|
"use_star_favorite_icon": "Use star favorite icon",
|
||||||
"user_picker": "User Picker",
|
"user_picker": "User Picker",
|
||||||
|
|
|
@ -34,6 +34,12 @@ const userSettings = useUserSettings()
|
||||||
>
|
>
|
||||||
{{ $t('settings.preferences.enable_autoplay') }}
|
{{ $t('settings.preferences.enable_autoplay') }}
|
||||||
</SettingsToggleItem>
|
</SettingsToggleItem>
|
||||||
|
<SettingsToggleItem
|
||||||
|
:checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
|
||||||
|
@click="togglePreferences('optimizeForLowPerformanceDevice')"
|
||||||
|
>
|
||||||
|
{{ $t('settings.preferences.optimize_for_low_performance_device') }}
|
||||||
|
</SettingsToggleItem>
|
||||||
<SettingsToggleItem
|
<SettingsToggleItem
|
||||||
:checked="getPreferences(userSettings, 'enableDataSaving')"
|
:checked="getPreferences(userSettings, 'enableDataSaving')"
|
||||||
@click="togglePreferences('enableDataSaving')"
|
@click="togglePreferences('enableDataSaving')"
|
||||||
|
|
Loading…
Reference in a new issue