OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: image preview element styling issue

Browse Source
This commit is contained in:
Timothy J. Baek 2024-08-03 14:42:06 +02:00
parent 6657f28694
commit 774defd184
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/common/ImagePreview.svelte
View File

@ -7,6 +7,8 @@
let mounted = false; let mounted = false;
let previewElement = null;
const downloadImage = (url, filename) => { const downloadImage = (url, filename) => {
fetch(url) fetch(url)
.then((response) => response.blob()) .then((response) => response.blob())
@ -34,14 +36,14 @@
mounted = true; mounted = true;
}); });
$: if (mounted) { $: if (show && previewElement) {
if (show) { document.body.appendChild(previewElement);
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else { } else if (previewElement) {
window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset'; document.body.removeChild(previewElement);
} document.body.style.overflow = 'unset';
} }
</script> </script>
@ -49,7 +51,8 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain" bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
> >
<div class=" absolute left-0 w-full flex justify-between"> <div class=" absolute left-0 w-full flex justify-between">
<div> <div>