feat: Add settings popup close trigger to improve user experience

src/SEQTA.ts

@@ -38,6 +38,7 @@ import documentLoadCSS from '@/css/documentload.scss?inline'
 import renderSvelte from '@/svelte-interface/main'
 import Settings from '@/svelte-interface/pages/settings.svelte'
 import { renderStore } from './seqta/ui/renderStore'
+import { settingsPopup } from './svelte-interface/hooks/SettingsPopup'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -1095,7 +1096,8 @@ export function addExtensionSettings() {
       extensionPopup.style.opacity = '0'
       extensionPopup.style.transform = 'scale(0)'
     }
-    // tell it popup closed
+    
+    settingsPopup.triggerClose()
     SettingsClicked = false
   }
 
@@ -1336,7 +1338,7 @@ export function setupSettingsButton() {
   var AddedSettings = document.getElementById('AddedSettings');
   var extensionPopup = document.getElementById('ExtensionPopup');
 
-  AddedSettings!.addEventListener('click', function () {
+  AddedSettings!.addEventListener('click', async function () {
     if (SettingsClicked) {
       extensionPopup!.classList.add('hide');
       if (settingsState.animations) {
@@ -1345,12 +1347,22 @@ export function setupSettingsButton() {
         extensionPopup!.style.opacity = '0'
         extensionPopup!.style.transform = 'scale(0)'
       }
-      /* (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); */
+      settingsPopup.triggerClose()
       SettingsClicked = false;
     } else {
-      extensionPopup!.classList.remove('hide');
       if (settingsState.animations) {
-        animate('#ExtensionPopup', { opacity: [0, 1], scale: [0, 1] }, { easing: spring({ stiffness: 260, damping: 24 }) });
+        //animate('#ExtensionPopup', { opacity: [0, 1], scale: [0, 1] }, { easing: spring({ stiffness: 260, damping: 24 }) });
+        animate((progress) => {
+          console.log(progress)
+          extensionPopup!.style.opacity = progress.toString()
+          extensionPopup!.style.transform = `scale(${progress})`
+        }, { easing: spring({ stiffness: 260, damping: 24 }) });
+
+        await delay(10)
+
+        extensionPopup!.classList.remove('hide');
+        //extensionPopup!.style.opacity = '1'
+        //extensionPopup!.style.transform = 'scale(1)'
       } else {
         extensionPopup!.style.opacity = '1'
         extensionPopup!.style.transform = 'scale(1)'

src/css/injected/popup.scss

@@ -36,4 +36,5 @@
   transform-origin: 70% 0;
   will-change: opacity, transform;
   transform: translateZ(0); // promotes GPU rendering
+  transition: opacity 0.05s, transform 0.05s;
 }

src/svelte-interface/components/ColourPicker.svelte

@@ -60,13 +60,13 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   bind:this={background}
-  class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black/20"
+  class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
   onclick={handleBackgroundClick}
   onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
 >
   <div
     bind:this={content}
-    class="h-auto p-4 bg-white border shadow-lg rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+    class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
   >
     <ReactAdapter el={ColourPicker} />
   </div>

src/svelte-interface/hooks/SettingsPopup.ts

@@ -0,0 +1,37 @@
+type SettingsPopupCallback = () => void;
+
+/** 
+ * This is a singleton that triggers an update when the settings popup is closed.
+ * This is used to close the colour picker.
+ * Usage:
+ *  settingsPopup.addListener(() => {
+ *    console.log('Settings popup closed');
+ *  });
+*/ 
+class SettingsPopup {
+  private static instance: SettingsPopup;
+  private listeners: Set<SettingsPopupCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): SettingsPopup {
+    if (!SettingsPopup.instance) {
+      SettingsPopup.instance = new SettingsPopup();
+    }
+    return SettingsPopup.instance;
+  }
+
+  public addListener(callback: SettingsPopupCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: SettingsPopupCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerClose(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const settingsPopup = SettingsPopup.getInstance();

src/svelte-interface/pages/settings.svelte

@@ -11,6 +11,7 @@
 
   import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
   import ColourPicker from '../components/ColourPicker.svelte'
+  import { settingsPopup } from '../hooks/SettingsPopup'
 
 
   const openColourPicker = () => {
@@ -31,10 +32,15 @@
   let showColourPicker = $state<boolean>(false);
 
   onMount(() => {
+    settingsPopup.addListener(() => {
+      showColourPicker = false;
+    });
+    
     if (!standalone) return;
     // @ts-ignore
     let globalStandalone = createStandalone();
     globalStandalone = standalone;
+
   });
 </script>