gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-23 09:33:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve click outside detection for modals

Browse Source
This commit is contained in:
Nikita Galaiko 2023-05-23 10:12:10 +02:00
parent f8bb9741e4
commit b17f704efb
4 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -71,6 +71,8 @@
"svelte-check": "^3.0.1",
"svelte-floating-ui": "^1.5.2",
"svelte-french-toast": "^1.0.3",
"svelte-loadable-store": "^1.0.1",
"svelte-outclick": "^3.5.0",
"svelte-resize-observer": "^2.0.0",
"tailwindcss": "^3.1.5",
"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log",
@ -84,7 +86,6 @@
"xterm-addon-fit": "^0.7.0",
"xterm-addon-ligatures": "^0.6.0",
"xterm-addon-unicode11": "^0.5.0",
"xterm-addon-webgl": "^0.14.0",
"svelte-loadable-store": "^1.0.1"
"xterm-addon-webgl": "^0.14.0"
}
}

11
pnpm-lock.yaml
View File

@ -169,6 +169,9 @@ devDependencies:
svelte-loadable-store:
specifier: ^1.0.1
version: 1.0.1
svelte-outclick:
specifier: ^3.5.0
version: 3.5.0(svelte@3.55.1)
svelte-resize-observer:
specifier: ^2.0.0
version: 2.0.0
@ -3658,6 +3661,14 @@ packages:
svelte: 3.59.1
dev: true
/svelte-outclick@3.5.0(svelte@3.55.1):
resolution: {integrity: sha512-mny/D6aOoAjw2rmMy1dUKUkNnLhqZXZ218t38gLLW790LLtloTk/FsZzSRfVqb3+oCLTAYGVBQxwiMy6i5TlHw==}
peerDependencies:
svelte: 3.x
dependencies:
svelte: 3.55.1
dev: true
/svelte-preprocess@5.0.1(postcss-load-config@4.0.1)(postcss@8.4.21)(svelte@3.55.1)(typescript@4.9.5):
resolution: {integrity: sha512-0HXyhCoc9rsW4zGOgtInylC6qj259E1hpFnJMJWTf+aIfeqh4O/QHT31KT2hvPEqQfdjmqBR/kO2JDkkciBLrQ==}
engines: {node: '>= 14.10.0'}

10
src/lib/components/Overlay/Overlay.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { scale } from 'svelte/transition';
import clickOutside from './click_outside';
import OutClick from 'svelte-outclick';
let dialog: HTMLDialogElement;
@ -28,8 +28,10 @@
on:close
>
{#if open}
<div use:clickOutside on:outclick={close} class="flex">
<slot {close} isOpen={open} />
</div>
<OutClick on:outclick={close}>
<div class="flex">
<slot {close} isOpen={open} />
</div>
</OutClick>
{/if}
</dialog>

21
src/lib/components/Overlay/click_outside.ts
View File

@ -1,21 +0,0 @@
import type { ActionReturn } from 'svelte/action';
interface Attributes {
'on:outclick': (e: CustomEvent<void>) => void;
}
export default (node: HTMLElement): ActionReturn<any, Attributes> => {
const handleClick = (event: Event) => {
if (event.target && !node.contains(event.target as Node | null)) {
node.dispatchEvent(new CustomEvent('outclick'));
}
};
document.addEventListener('click', handleClick, true);
return {
destroy() {
document.removeEventListener('click', handleClick, true);
}
};
};