Page index improvements

ui/package-lock.json

@@ -62,6 +62,19 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+      "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -2058,6 +2071,12 @@
         }
       }
     },
+    "fa-svelte": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fa-svelte/-/fa-svelte-3.1.0.tgz",
+      "integrity": "sha512-RqBOWwt7sc+ta9GFjbu5GOwKFRzn3rMPPSqvSGpIwsfVnpMjiI5ttv84lwNsCMEYI6/lu/iH21HUcE3TLz8RGQ==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",

ui/package.json

@@ -20,6 +20,7 @@
     "test": "web-test-runner \"src/**/*.test.ts\""
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "pdfjs-dist": "^2.5.207",
     "svelte-file-dropzone": "0.0.15",
     "uuid": "^8.3.2"
@@ -34,6 +35,7 @@
     "@types/snowpack-env": "^2.3.2",
     "@web/test-runner": "^0.10.0",
     "chai": "^4.2.0",
+    "fa-svelte": "^3.1.0",
     "postcss": "^8.2.2",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.0",

ui/src/actions/clickOutside.ts

@@ -0,0 +1,29 @@
+/**
+ * Executes the given callback once an outside click is recognized.
+ * If the 'opening' click triggers the callback right away, try using 'on:click|stopPropagation'.
+ * @param node
+ * @param param1
+ */
+export function clickOutside(node: HTMLElement, { enabled: initialEnabled, cb }) {
+    const handleOutsideClick = ({ target }) => {
+        if (!node.contains(target)) {
+            cb();
+        }
+    };
+
+    function update({ enabled }) {
+        if (enabled) {
+            window.addEventListener('click', handleOutsideClick);
+        } else {
+            window.removeEventListener('click', handleOutsideClick);
+        }
+    }
+
+    update({ enabled: initialEnabled });
+    return {
+        update,
+        destroy() {
+            window.removeEventListener('click', handleOutsideClick);
+        },
+    };
+}

ui/src/debug/DebugView.svelte

@@ -1,8 +1,11 @@
 <script>
-    import { fade, slide } from 'svelte/transition';
+    import { slide } from 'svelte/transition';
+    import { clickOutside } from '../actions/clickOutside';
+    import Icon from 'fa-svelte';
+    import { faMapPin as pin } from '@fortawesome/free-solid-svg-icons/faMapPin';
+    import { Collection, BookOpen, ArrowLeft, ArrowRight } from 'svelte-hero-icons';
     import type Debugger from '@core/Debugger';
     import type Item from '@core/Item';
-    import { Collection, BookOpen, ArrowLeft, ArrowRight } from 'svelte-hero-icons';
     import ItemTable from './ItemTable.svelte';
 
     export let debug: Debugger;
@@ -50,21 +53,24 @@
         <div class="flex items-center space-x-2">
             {#if pageFocus}
                 <span on:click={showAllPages} transition:slide>
-                    <Collection size="1x" class="hover:text-green-700 cursor-pointer opacity-75" />
+                    <Icon class="text-xs hover:text-green-700 hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
                 </span>
             {/if}
             <span>
-                <span on:click={() => (openedPageIndex = !openedPageIndex)}>
+                <span on:click|stopPropagation={() => (openedPageIndex = !openedPageIndex)}>
                     <BookOpen size="1x" class="hover:text-green-700 cursor-pointer" />
                 </span>
 
                 <!-- Page selection popup-->
                 {#if openedPageIndex}
                     <div
+                        use:clickOutside={{ enabled: openedPageIndex, cb: () => (openedPageIndex = false) }}
                         class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96"
                         transition:slide>
-                        <span class="mt-1 pr-2" on:click={showAllPages}>
-                            <Collection size="1x" class="hover:text-green-700 cursor-pointer" />
+                        <span class="mt-1 pr-2" on:click={!!focusedPage && showAllPages}>
+                            <Collection
+                                size="1x"
+                                class={!!focusedPage ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
                         </span>
                         <div
                             class="grid gap-3"
@@ -72,7 +78,7 @@
                             {#each new Array(maxPage + 1) as _, idx}
                                 <div
                                     on:click={() => pagesNumbers.has(idx) && focusOnPage(idx)}
-                                    class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? 'hover:text-green-700 hover:border-green-700 cursor-pointer' : 'opacity-50'}">
+                                    class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? (focusedPage === idx ? 'bg-green-600' : 'hover:text-green-700 hover:border-green-700 cursor-pointer') : 'opacity-50'}">
                                     {idx}
                                 </div>
                             {/each}