feat: migrate MessageBox to modal component (podman-desktop#7172)

* feat: migrate MessageBox to modal component Signed-off-by: axel7083 <[email protected]> * fix: better modal design Signed-off-by: axel7083 <[email protected]> * refactor(Modal): uses flex instead of top/left Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
axel7083 · May 13, 2024 · ec47bf8 · ec47bf8
1 parent 66c870c
commit ec47bf8
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 72 deletions.
diff --git a/packages/renderer/src/lib/dialogs/MessageBox.svelte b/packages/renderer/src/lib/dialogs/MessageBox.svelte
@@ -5,9 +5,9 @@ import { Button, type ButtonType } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Fa from 'svelte-fa';
 
+import Modal from '/@/lib/dialogs/Modal.svelte';
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
-import { tabWithinParent } from './dialog-utils';
 import type { MessageBoxOptions } from './messagebox-input';
 
 let currentId = 0;
@@ -22,8 +22,6 @@ let buttonOrder: number[];
 
 let display = false;
 
-let messageBox: HTMLDivElement;
-
 const showMessageBoxCallback = (messageBoxParameter: unknown) => {
   const options: MessageBoxOptions | undefined = messageBoxParameter as MessageBoxOptions;
   currentId = options?.id || 0;
@@ -97,21 +95,9 @@ function clickButton(index?: number) {
   cleanup();
 }
 
-function handleKeydown(e: KeyboardEvent) {
-  if (!display) {
-    return;
-  }
-
-  if (e.key === 'Escape') {
-    // if there is a cancel button use its id, otherwise undefined
-    window.sendShowMessageBoxOnSelect(currentId, cancelId >= 0 ? cancelId : undefined);
-    cleanup();
-    e.preventDefault();
-  }
-
-  if (e.key === 'Tab') {
-    tabWithinParent(e, messageBox);
-  }
+function onClose() {
+  window.sendShowMessageBoxOnSelect(currentId, cancelId >= 0 ? cancelId : undefined);
+  cleanup();
 }
 
 function getButtonType(b: boolean): ButtonType {
@@ -123,52 +109,42 @@ function getButtonType(b: boolean): ButtonType {
 }
 </script>
 
-<svelte:window on:keydown="{handleKeydown}" />
-
 {#if display}
-  <!-- Create overlay-->
-  <div class="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60 bg-blend-multiply h-full grid z-50">
-    <div
-      class="flex flex-col place-self-center w-[550px] rounded-xl bg-charcoal-800 shadow-xl shadow-black"
-      role="dialog"
-      aria-labelledby="{title}"
-      aria-label="{title}"
-      bind:this="{messageBox}">
-      <div class="flex items-center justify-between pl-4 pr-3 py-3 space-x-2 text-gray-400">
-        {#if type === 'error'}
-          <Fa class="h-4 w-4 text-red-500" icon="{faCircleExclamation}" />
-        {:else if type === 'warning'}
-          <Fa class="h-4 w-4 text-amber-400" icon="{faTriangleExclamation}" />
-        {:else if type === 'info'}
-          <div class="flex">
-            <Fa class="h-4 w-4 place-content-center" icon="{faCircle}" />
-            <Fa class="h-4 w-4 place-content-center -ml-4 mt-px text-xs" icon="{faInfo}" />
-          </div>
-        {:else if type === 'question'}
-          <Fa class="h-4 w-4" icon="{faCircleQuestion}" />
-        {/if}
-        <h1 class="grow text-lg font-bold capitalize">{title}</h1>
+  <Modal name="{title}" on:close="{onClose}">
+    <div class="flex items-center justify-between pl-4 pr-3 py-3 space-x-2 text-gray-400">
+      {#if type === 'error'}
+        <Fa class="h-4 w-4 text-red-500" icon="{faCircleExclamation}" />
+      {:else if type === 'warning'}
+        <Fa class="h-4 w-4 text-amber-400" icon="{faTriangleExclamation}" />
+      {:else if type === 'info'}
+        <div class="flex">
+          <Fa class="h-4 w-4 place-content-center" icon="{faCircle}" />
+          <Fa class="h-4 w-4 place-content-center -ml-4 mt-px text-xs" icon="{faInfo}" />
+        </div>
+      {:else if type === 'question'}
+        <Fa class="h-4 w-4" icon="{faCircleQuestion}" />
+      {/if}
+      <h1 class="grow text-lg font-bold capitalize">{title}</h1>
+
+      <CloseButton on:click="{() => clickButton(cancelId >= 0 ? cancelId : undefined)}" />
+    </div>
 
-        <CloseButton on:click="{() => clickButton(cancelId >= 0 ? cancelId : undefined)}" />
-      </div>
+    <div class="max-h-80 overflow-auto">
+      <div class="px-10 py-4 text-sm text-gray-500 leading-5" aria-label="Dialog Message">{message}</div>
 
-      <div class="max-h-80 overflow-auto">
-        <div class="px-10 py-4 text-sm text-gray-500 leading-5" aria-label="Dialog Message">{message}</div>
+      {#if detail}
+        <div class="px-10 pb-4 text-sm text-gray-500 leading-5" aria-label="Dialog Details">{detail}</div>
+      {/if}
+    </div>
 
-        {#if detail}
-          <div class="px-10 pb-4 text-sm text-gray-500 leading-5" aria-label="Dialog Details">{detail}</div>
+    <div class="px-5 py-5 mt-2 flex flex-row w-full justify-end space-x-5">
+      {#each buttonOrder as i}
+        {#if i === cancelId}
+          <Button type="link" aria-label="Cancel" on:click="{() => clickButton(i)}">Cancel</Button>
+        {:else}
+          <Button type="{getButtonType(defaultId === i)}" on:click="{() => clickButton(i)}">{buttons[i]}</Button>
         {/if}
-      </div>
-
-      <div class="px-5 py-5 mt-2 flex flex-row w-full justify-end space-x-5">
-        {#each buttonOrder as i}
-          {#if i === cancelId}
-            <Button type="link" aria-label="Cancel" on:click="{() => clickButton(i)}">Cancel</Button>
-          {:else}
-            <Button type="{getButtonType(defaultId === i)}" on:click="{() => clickButton(i)}">{buttons[i]}</Button>
-          {/if}
-        {/each}
-      </div>
+      {/each}
     </div>
-  </div>
+  </Modal>
 {/if}
diff --git a/packages/renderer/src/lib/dialogs/Modal.svelte b/packages/renderer/src/lib/dialogs/Modal.svelte
@@ -31,16 +31,18 @@ if (previously_focused) {
 
 <svelte:window on:keydown="{handle_keydown}" />
 
-<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="absolute top-1/2 left-1/2 z-50 rounded translate-x-[-50%] translate-y-[-50%] overflow-auto w-[calc(200vw-4em)] max-w-[42em] max-h-[calc(100vh-4em)]"
-  role="dialog"
-  aria-label="{name}"
-  aria-modal="true"
-  bind:this="{modal}">
-  <slot />
+<div class="absolute w-full h-full flex justify-center items-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)]"
+    role="dialog"
+    aria-label="{name}"
+    aria-modal="true"
+    bind:this="{modal}">
+    <slot />
+  </div>
 </div>