feat: add new setting to disable blur for low-performance device (#2561)

zio/stable
TAKAHASHI Shuuji 2024-01-18 17:18:49 +09:00 committed by GitHub
parent b0125eb3fc
commit f79d84ad6e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 28 additions and 4 deletions

View File

@ -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>

View File

@ -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 -->

View File

@ -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 -->

View File

@ -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,

View File

@ -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",

View File

@ -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')"