feat(QuickPickInput): using modal component (podman-desktop#7180)

* feat(QuickPickInput): using modal component Signed-off-by: axel7083 <[email protected]> * fix(QuickPickInput): close mechanism Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
axel7083 · May 14, 2024 · ae68c04 · ae68c04
1 parent d4e0dfd
commit ae68c04
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/packages/renderer/src/lib/dialogs/Modal.spec.ts b/packages/renderer/src/lib/dialogs/Modal.spec.ts
@@ -20,7 +20,7 @@ import '@testing-library/jest-dom/vitest';
 
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { expect, test, vi } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 
 import Modal from '/@/lib/dialogs/Modal.svelte';
 
@@ -52,3 +52,19 @@ test('Escape key should trigger close', async () => {
   await userEvent.keyboard('{Escape}');
   expect(closeMock).toHaveBeenCalled();
 });
+
+describe('translation-y', () => {
+  test('default modal should have translate-y', async () => {
+    render(Modal);
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.classList).toContain('translate-y-[-20%]');
+  });
+
+  test('modal with top should not have translate-y', async () => {
+    render(Modal, { top: true });
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.classList).not.toContain('translate-y-[-20%]');
+  });
+});
diff --git a/packages/renderer/src/lib/dialogs/Modal.svelte b/packages/renderer/src/lib/dialogs/Modal.svelte
@@ -8,6 +8,7 @@ const close = () => dispatch('close');
 
 let modal: HTMLDivElement;
 export let name = '';
+export let top: boolean = false;
 
 const handle_keydown = (e: any) => {
   if (e.key === 'Escape') {
@@ -31,14 +32,15 @@ if (previously_focused) {
 
 <svelte:window on:keydown="{handle_keydown}" />
 
-<div class="absolute w-full h-full flex justify-center items-center">
+<div class:items-center="{!top}" class="absolute w-full h-full flex justify-center">
   <button
     aria-label="close"
     class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-60 bg-blend-multiply z-40"
     on:click="{close}"></button>
 
   <div
-    class="bg-charcoal-800 z-50 rounded-xl overflow-auto w-[calc(200vw-4em)] h-fit translate-y-[-20%] max-w-[42em] max-h-[calc(100vh-4em)]"
+    class:translate-y-[-20%]="{!top}"
+    class="bg-charcoal-800 z-50 rounded-xl overflow-auto w-[calc(200vw-4em)] h-fit max-w-[42em] max-h-[calc(100vh-4em)]"
     role="dialog"
     aria-label="{name}"
     aria-modal="true"

diff --git a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
@@ -2,9 +2,9 @@
 import { Button, Checkbox } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount, tick } from 'svelte';
 
+import Modal from '/@/lib/dialogs/Modal.svelte';
 import Markdown from '/@/lib/markdown/Markdown.svelte';
 
-import { tabWithinParent } from './dialog-utils';
 import type { InputBoxOptions, QuickPickOptions } from './quickpick-input';
 
 const ENTER = 'Enter';
@@ -124,6 +124,18 @@ onMount(() => {
   window.events?.receive('showQuickPick:add', showQuickPickCallback);
 });
 
+const onClose = () => {
+  if (validationError) {
+    return;
+  }
+  if (mode === 'QuickPick') {
+    window.sendShowQuickPickValues(currentId, []);
+  } else if (mode === 'InputBox') {
+    window.sendShowInputBoxValue(currentId, undefined, undefined);
+  }
+  cleanup();
+};
+
 async function onInputChange(event: any) {
   // in case of quick pick, filter the items
   if (mode === 'QuickPick') {
@@ -213,21 +225,7 @@ function handleKeydown(e: KeyboardEvent) {
     return;
   }
 
-  if (e.key === 'Escape') {
-    // In case of validating error, do not proceed
-    if (validationError) {
-      e.preventDefault();
-      return;
-    }
-    if (mode === 'QuickPick') {
-      window.sendShowQuickPickValues(currentId, []);
-    } else if (mode === 'InputBox') {
-      window.sendShowInputBoxValue(currentId, undefined, undefined);
-    }
-    cleanup();
-    e.preventDefault();
-    return;
-  } else if (e.key === 'Enter') {
+  if (e.key === 'Enter') {
     if (mode === 'InputBox') {
       // In case of validating error, do not proceed
       if (validationError) {
@@ -279,10 +277,6 @@ function handleKeydown(e: KeyboardEvent) {
       return;
     }
   }
-
-  if (e.key === 'Tab' && outerDiv) {
-    tabWithinParent(e, outerDiv);
-  }
 }
 
 function handleMousedown(e: MouseEvent) {
@@ -296,10 +290,7 @@ function handleMousedown(e: MouseEvent) {
 <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">
+  <Modal on:close="{onClose}" name="{title}" top>
     <div class="flex justify-center items-center mt-1">
       <div
         bind:this="{outerDiv}"
@@ -383,5 +374,5 @@ function handleMousedown(e: MouseEvent) {
         {/if}
       </div>
     </div>
-  </div>
+  </Modal>
 {/if}