fix(dialog): made content scrollable, header & footer sticky

Muhammed-Rahif · Nov 30, 2024 · a71db51 · a71db51
1 parent 9a49a7c
commit a71db51
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 139 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -13,7 +13,7 @@
   import GoToDialog from '@/components/GoToDialog.svelte';
   import FindDialog from '@/components/FindDialog.svelte';
   import Loading from '@/components/Loading.svelte';
-  import ShortCutDialog from '@/components/ShortCutDialog.svelte';
+  import ShortcutsDialog from '@/components/ShortcutsDialog.svelte';
 </script>
 
 {#await Notpad.init()}
@@ -30,7 +30,7 @@
   <FontDialog />
   <LicenseDialog />
   <AboutDialog />
-  <ShortCutDialog />
+  <ShortcutsDialog />
   <GoToDialog />
   <FindDialog />
   <Shortcuts />

diff --git a/src/lib/components/AboutDialog.svelte b/src/lib/components/AboutDialog.svelte
@@ -1,7 +1,7 @@
 <script context="module">
   import { writable } from 'svelte/store';
 
-  const open = writable(false);
+  const open = writable(true);
 
   export function openAboutDialog() {
     open.set(true);
@@ -40,21 +40,34 @@
 </script>
 
 <Dialog.Root open={$open} onOpenChange={open.set}>
-  <Dialog.Content class="max-h-[80vh] max-w-2xl overflow-y-auto [&_a]:text-blue-500">
-    <Dialog.Title>About Notpad</Dialog.Title>
-    <hr />
+  <Dialog.Content class="max-w-2xl overflow-y-auto [&_a]:text-blue-500">
+    <Dialog.Header>
+      <Dialog.Title>About Notpad</Dialog.Title>
+    </Dialog.Header>
 
-    <Dialog.Header class="flex flex-row items-center justify-start gap-4 text-left">
-      <img class="w-20" alt="icon" src={$mode == 'dark' ? appIconDark : appIconLight} />
+    <div class="max-h-[60vh] overflow-y-auto pr-3 text-base">
+      <div class="mb-3 flex flex-row items-center justify-start gap-4 text-left">
+        <img class="w-20" alt="icon" src={$mode == 'dark' ? appIconDark : appIconLight} />
 
-      <div>
-        <span class="text-xl font-bold">Notpad</span><br />
-        Version {appJson.version}<br />
-        <a href="https://github.com/Muhammed-Rahif" target="_blank">Muhammed-Rahif</a>
-        <span class="text-sm">© 2024. All rights reserved.</span>
+        <div>
+          <span class="text-xl font-bold">Notpad</span><br />
+          Version {appJson.version}<br />
+          <a href="https://github.com/Muhammed-Rahif" target="_blank">Muhammed-Rahif</a>
+          <span class="text-sm">© 2024. All rights reserved.</span>
+        </div>
       </div>
-    </Dialog.Header>
-    <Dialog.Description class="text-base">
+
+      <p class="mb-3">
+        Notpad is a simple, open source, beautiful note-taking app that helps you to take notes and
+        organize your thoughts. It is designed to be minimal and distraction-free, so you can focus
+        on your ideas. Notpad is an open-source project. You can contribute to the project by fixing
+        bugs, improving the codebase, or adding new features. The project is hosted on
+        <a href="https://github.com/Muhammed-Rahif/Notpad/" target="_blank">GitHub.</a>
+        If you have any questions, feedback, or suggestions, feel free to
+        <a href="https://github.com/Muhammed-Rahif/Notpad/issues/new/" target="_blank">
+          create an issue.
+        </a>
+      </p>
       <p class="mb-3">
         Notpad is a simple, open source, beautiful note-taking app that helps you to take notes and
         organize your thoughts. It is designed to be minimal and distraction-free, so you can focus
@@ -71,7 +84,7 @@
         {#if contributors}
           <div transition:slide|global>
             <p>Our Valuable Contributors:</p>
-            <ul class="mt-1 max-h-36 overflow-y-auto">
+            <ul class="mt-1">
               {#each contributors as contributor}
                 {@const isAuthor = contributor.login == 'Muhammed-Rahif'}
                 <a href={contributor.html_url} target="_blank">
@@ -117,7 +130,7 @@
           <a href="https://github.com/Muhammed-Rahif" target="_blank">Muhammed-Rahif.</a>
         </small>
       </p>
-    </Dialog.Description>
+    </div>
 
     <Dialog.Footer class="gap-y-2">
       <Button variant="secondary" class="relative sm:pr-20" on:click={showLicense}>

diff --git a/src/lib/components/FindDialog.svelte b/src/lib/components/FindDialog.svelte
@@ -41,12 +41,12 @@
 </script>
 
 <Dialog.Root open={$open} onOpenChange={open.set} preventScroll={false}>
-  <Dialog.Content
-    overlayClass="bg-transparent backdrop-blur-[.8px]"
-    class="top-14 translate-y-0 bg-neutral-100 dark:bg-neutral-900"
-  >
-    <Dialog.Title>Find And Replace</Dialog.Title>
-    <Dialog.Description class="flex flex-col gap-3">
+  <Dialog.Content class="top-14 translate-y-0">
+    <Dialog.Header>
+      <Dialog.Title>Find And Replace</Dialog.Title>
+    </Dialog.Header>
+
+    <div class="flex flex-col gap-3">
       <div class="flex">
         <Input
           autocomplete="off"
@@ -110,7 +110,7 @@
           Case sensitive
         </Label>
       </div>
-    </Dialog.Description>
+    </div>
     <Dialog.Footer class="gap-y-2">
       <Button
         type="button"

diff --git a/src/lib/components/GoToDialog.svelte b/src/lib/components/GoToDialog.svelte
@@ -38,12 +38,12 @@
 </script>
 
 <Dialog.Root open={$open} onOpenChange={open.set} preventScroll={false}>
-  <Dialog.Content
-    overlayClass="bg-transparent backdrop-blur-[.8px]"
-    class="top-14 translate-y-0 bg-neutral-100 dark:bg-neutral-900"
-  >
-    <Dialog.Title>Go To</Dialog.Title>
-    <Dialog.Description class="flex gap-3">
+  <Dialog.Content class="top-14 translate-y-0">
+    <Dialog.Header>
+      <Dialog.Title>Go To</Dialog.Title>
+    </Dialog.Header>
+
+    <div class="flex gap-3">
       <div class="flex w-full max-w-sm flex-col gap-1.5">
         <Label for="line">Line</Label>
         <Input
@@ -71,6 +71,6 @@
       </div>
 
       <Button type="button" class="mt-auto" on:click={submitGoTo}>Go</Button>
-    </Dialog.Description>
+    </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/LicenseDialog.svelte b/src/lib/components/LicenseDialog.svelte
@@ -37,7 +37,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.`;
 
   $: licenseParagraphs = licenseText.split(/\n\n/g).map((line) => {
-    return { text: line, br: '<br><br>' };
+    return { text: line, br: true };
   });
 
   onMount(async () => {
@@ -47,12 +47,18 @@ SOFTWARE.`;
 
 <Dialog.Root open={$open} onOpenChange={open.set}>
   <Dialog.Content class="[&_a]:text-blue-500">
-    <Dialog.Title>Notpad License</Dialog.Title>
-    <hr />
+    <Dialog.Header>
+      <Dialog.Title>Notpad License</Dialog.Title>
+    </Dialog.Header>
+
     <Dialog.Description class="max-h-96 overflow-y-auto pr-2">
       {#each licenseParagraphs as { text, br }}
         {text}
-        {br}
+
+        {#if br}
+          <br />
+          <br />
+        {/if}
       {/each}
     </Dialog.Description>
     <Dialog.Footer>

diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
@@ -13,7 +13,7 @@
   import { openAboutDialog } from '@/components/AboutDialog.svelte';
   import { toggleGoToDialog } from '@/components/GoToDialog.svelte';
   import { toggleFindDialog } from '@/components/FindDialog.svelte';
-  import { openShortCutDialog } from '@/components/ShortCutDialog.svelte';
+  import { openShortcutsDialog } from '@/src/lib/components/ShortcutsDialog.svelte';
   import InfoIcon from './icons/Info.svelte';
   import KeyboardIcon from '@/components/icons/Keyboard.svelte';
   import GithubOultineIcon from './icons/GithubOultine.svelte';
@@ -147,7 +147,7 @@
   <Menubar.Menu>
     <Menubar.Trigger>Help</Menubar.Trigger>
     <Menubar.Content>
-      <Menubar.Item class="flex items-center gap-2" on:click={openShortCutDialog}>
+      <Menubar.Item class="flex items-center gap-2" on:click={openShortcutsDialog}>
         <KeyboardIcon class="text-xl" />
         Shortcuts
       </Menubar.Item>

diff --git a/src/lib/components/ShortCutDialog.svelte b/src/lib/components/ShortCutDialog.svelte
diff --git a/src/lib/components/ShortcutsDialog.svelte b/src/lib/components/ShortcutsDialog.svelte
@@ -0,0 +1,77 @@
+<script context="module">
+  import { writable } from 'svelte/store';
+
+  // Store to control the dialog's open state
+  const open = writable(false);
+
+  // Function to open the dialog
+  export function openShortcutsDialog() {
+    open.set(true);
+  }
+</script>
+
+<script lang="ts">
+  import * as Table from '@/components/ui/table';
+  import * as Dialog from '@/components/ui/dialog';
+  import * as Menubar from '@/components/ui/menubar';
+
+  const shortcuts = {
+    New: 'Ctrl + Alt + N',
+    Open: 'Ctrl + O',
+    Save: 'Ctrl + S',
+    Print: 'Ctrl + P',
+    Undo: 'Ctrl + Z',
+    Redo: 'Ctrl + Y',
+    Cut: 'Ctrl + X',
+    Copy: 'Ctrl + C',
+    Paste: 'Ctrl + V',
+    'Select All': 'Ctrl + A',
+    'Find/Replace': 'Ctrl + F',
+    'Go To': 'Ctrl + G',
+    'Full Screen': 'F11'
+  };
+</script>
+
+<Dialog.Root open={$open} onOpenChange={open.set}>
+  <Dialog.Trigger />
+
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Shortcuts</Dialog.Title>
+      <Dialog.Description>
+        Here is a list of keyboard shortcuts that you can use to quickly perform actions in this
+        application.
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <div class="w-full">
+      <div class="sticky top-0 bg-muted">
+        <Table.Root class="table w-full">
+          <Table.Header>
+            <Table.Row>
+              <Table.Head class="text-center">Function</Table.Head>
+              <Table.Head class="text-center">Shortcuts</Table.Head>
+            </Table.Row>
+          </Table.Header>
+        </Table.Root>
+      </div>
+
+      <div class="max-h-[60vh] overflow-y-auto">
+        <Table.Root class="table w-full">
+          <Table.Body>
+            {#each Object.entries(shortcuts) as [action, shortcut]}
+              <Table.Row>
+                <Table.Cell class="text-center">{action}</Table.Cell>
+                <Table.Cell class="text-center">
+                  <Menubar.Shortcut>
+                    {shortcut}
+                  </Menubar.Shortcut>
+                </Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/font-dialog/FontDialog.svelte b/src/lib/components/font-dialog/FontDialog.svelte
@@ -39,15 +39,15 @@
 </script>
 
 <Dialog.Root open={$open} onOpenChange={open.set}>
-  <Dialog.Content class="max-h-[80vh] overflow-y-auto sm:max-w-[600px]">
+  <Dialog.Content>
     <Dialog.Header>
       <Dialog.Title>Font</Dialog.Title>
       <Dialog.Description>
         Select a font family and size from the list below to change the appearance of your text.
       </Dialog.Description>
     </Dialog.Header>
 
-    <div class="flex gap-3 py-4 max-[464px]:flex-col">
+    <div class="flex gap-3 max-[464px]:flex-col">
       <FontFamilyCombobox bind:value={fontFamily} />
       <FontSizeCombobox bind:value={fontSize} />
     </div>