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

This commit is contained in:
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

@ -56,6 +56,7 @@ const visible = defineModel<boolean>({ required: true })
const deactivated = useDeactivated()
const route = useRoute()
const userSettings = useUserSettings()
/** scrollable HTML element */
const elDialogMain = ref<HTMLDivElement>()
@ -156,7 +157,13 @@ useEventListener('keydown', (e: KeyboardEvent) => {
<!-- corresponding to issue: #106, so please don't remove it. -->
<!-- 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 -->
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container -->