Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Quick pick click to close and over nav bar #2758

Merged
merged 3 commits into from Jun 8, 2023
Merged

fix: Quick pick click to close and over nav bar #2758

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db6eeae
fix: Quick pick click to close and over nav bar
deboer-tim Jun 6, 2023
603e66a
chore: Better variable name and typing
deboer-tim Jun 7, 2023
d705a58
chore: Prettier
deboer-tim Jun 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/renderer/src/App.svelte
View file
Open in desktop
Expand Up @@ -77,6 +77,7 @@ window.events?.receive('display-help', () => {

<div class="overflow-x-hidden flex flex-1">
<MessageBox />
<QuickPickInput />
<AppNavigation meta="{meta}" exitSettingsCallback="{() => router.goto(nonSettingsPage)}" />
{#if meta.url.startsWith('/preferences')}
<PreferencesNavigation meta="{meta}" />
Expand All @@ -89,7 +90,6 @@ window.events?.receive('display-help', () => {
<TaskManager />
<SendFeedback />
<ToastHandler />
<QuickPickInput />
<Route path="/" breadcrumb="Dashboard Page">
<DashboardPage />
</Route>
Expand Down
14 changes: 11 additions & 3 deletions packages/renderer/src/lib/dialogs/QuickPickInput.svelte
View file
Open in desktop
Expand Up @@ -27,6 +27,7 @@ let quickPickSelectedFilteredIndex = 0;
let quickPickCanPickMany = false;

let inputElement: HTMLInputElement | HTMLTextAreaElement = undefined;
let outerDiv: HTMLDivElement = undefined;

const showInputCallback = async (options?: InputBoxOptions) => {
mode = 'InputBox';
Expand Down Expand Up @@ -247,17 +248,24 @@ function handleKeydown(e: KeyboardEvent) {
}
}
}

function handleMousedown(e: MouseEvent) {
if (outerDiv && !e.defaultPrevented && e.target instanceof Node && !outerDiv.contains(e.target)) {
window.sendShowQuickPickValues(currentId, []);
cleanup();
}
}
</script>

<svelte:window on:keydown="{handleKeydown}" />
<svelte:window on:keydown="{handleKeydown}" on:mousedown="{handleMousedown}"/>

{#if display}
<!-- Create overlay-->
<div class="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60 h-full z-40"></div>

<div class="absolute m-auto left-0 right-0 z-50">
<div class=" flex justify-center items-center mt-1">
<div
<div class="flex justify-center items-center mt-1">
<div bind:this={outerDiv}
class="bg-charcoal-800 w-[700px] {mode === 'InputBox'
? 'h-fit'
: ''} shadow-sm p-2 rounded shadow-zinc-700 text-sm">
Expand Down