Disable the blur effect on dialog overlays when GPU acceleration is disabled

This commit is contained in:
pa
2026-02-23 15:00:40 +09:00
committed by Natsumi
parent 8296d31e67
commit b5b5776275
2 changed files with 10 additions and 2 deletions

View File

@@ -1,7 +1,8 @@
<template>
<Dialog v-model:open="open">
<DialogPortal :to="portalTo">
<RekaDialogOverlay class="fixed inset-0 bg-background/80 backdrop-blur-sm" />
<RekaDialogOverlay
:class="cn('fixed inset-0 bg-background/80', !disableGpuAcceleration && 'backdrop-blur-sm')" />
<RekaDialogContent
class="fixed inset-0 p-6 sm:p-10 border-0 bg-transparent shadow-none outline-none"
@@ -101,8 +102,10 @@
import { Button } from '@/components/ui/button';
import { Dialog } from '@/components/ui/dialog';
import { acquireModalPortalLayer } from '@/lib/modalPortalLayers';
import { cn } from '@/lib/utils';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useGeneralSettingsStore } from '@/stores/settings/general';
import { useI18n } from 'vue-i18n';
import Noty from 'noty';
@@ -112,6 +115,7 @@
const galleryStore = useGalleryStore();
const { fullscreenImageDialog } = storeToRefs(galleryStore);
const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
const { t } = useI18n();
const viewerEl = ref(null);

View File

@@ -2,6 +2,8 @@
import { DialogOverlay } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { useGeneralSettingsStore } from '@/stores/settings/general';
const props = defineProps({
forceMount: { type: Boolean, required: false },
@@ -11,6 +13,7 @@
});
const delegatedProps = reactiveOmit(props, 'class');
const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
</script>
<template>
@@ -19,7 +22,8 @@
v-bind="delegatedProps"
:class="
cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-xs',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40',
!disableGpuAcceleration && 'backdrop-blur-xs',
props.class
)
">