fix(popup): correct incorrect transform on switches

2026-06-06 11:44:40 +00:00 · 2024-09-06 07:00:48 +10:00
parent 220d15ebbc
commit 7f93aef9cc
6 changed files with 56 additions and 25 deletions
@@ -1,13 +1,10 @@
 <script lang="ts">
  import { animate, spring } from 'motion';
-  import { onMount } from "svelte";
+  import { createStandalone } from '../utils/standalone.svelte'

  let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
  let handle: HTMLElement | null = null;
-
-  const toggleSwitch = () => {
-    onChange(!state);
-  };
+  let standalone = createStandalone();

  const springParams = {
    stiffness: 600,
@@ -19,8 +16,7 @@
    animate(
      handle,
      {
-        x: enabled ? 20 : 0,
-        scaleX: [1, 2, 1]
+        x: enabled ? (standalone.standalone ? 24 : 20) : 0,
      },
      {
        easing: spring(springParams),
@@ -30,18 +26,13 @@

  // Trigger animation whenever state changes
  $effect(() => animateSwitch(state));
-
-  onMount(() => {
-    // Initialize the position of the switch
-    animateSwitch(state);
-  });
 </script>

 <div
-  class="flex w-14 p-1 cursor-pointer transition rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-500 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
  data-ison={state}
-  onclick={toggleSwitch}
-  onkeydown={(e) => e.key === "Enter" && toggleSwitch()}
+  onclick={() => onChange(!state)}
+  onkeydown={(e) => e.key === "Enter" && onChange(!state)}
  role="switch"
  aria-checked={state}
  tabindex="0"
@@ -5,8 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BetterSEQTA+ Settings</title>
  </head>
-  <body style="background-color: red;">
+  <body>
+    <script type="module" src="./index.ts"></script>
    asdasds - I (Crazypersonalph) agree with this statement.
  </body>
-</html>
-
+</html>
@@ -0,0 +1,16 @@
+import { mount } from 'svelte';
+import Settings from './pages/settings.svelte';
+import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState';
+import './index.css';
+
+
+initializeSettingsState();
+
+const app = mount(Settings, {
+  target: document.body,
+  props: {
+    standalone: true
+  }
+});
+
+console.log(app);
@@ -5,22 +5,23 @@ import Settings from './pages/settings.svelte';
 import styles from './index.css?inline';
 import { mount } from 'svelte';

-export default function initSvelteInterface(shadow: ShadowRoot) {
-  console.log(shadow)
-
+export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) {
  /* routes.set({
    'settings': Settings,
    '*': Settings
  }) */
  
  const app = mount(Settings, {
-    target: shadow,
+    target: mountPoint,
+    props: {
+      standalone: false
+    }
  });

  const style2 = document.createElement("style");
  style2.setAttribute("type", "text/css");
  style2.innerHTML = styles;
-  shadow.appendChild(style2);
+  mountPoint.appendChild(style2);
  
  return app;
 }
@@ -5,14 +5,23 @@
  import Theme from './settings/theme.svelte';
  import browser from 'webextension-polyfill';

+  import { createStandalone } from '../utils/standalone.svelte';
+  import { onMount } from 'svelte'
+
  const openChangelog = () => {
    browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
  };
    
-  let standalone = $state(false);
+  let { standalone } = $props<{ standalone: boolean }>();
+
+  onMount(() => {
+    if (!standalone) return;
+    let globalStandalone = createStandalone();
+    globalStandalone = standalone;
+  });
 </script>

-<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white {standalone ? '' : 'rounded-xl'} h-[100vh] overflow-clip dark:bg-zinc-800 dark:text-white">
+<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white { standalone ? 'h-[600px]' : 'h-[100vh] rounded-xl' } overflow-clip dark:bg-zinc-800 dark:text-white">
  <div class="grid border-b border-b-zinc-200/40 place-items-center">
    <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" />
    <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
@@ -0,0 +1,14 @@
+export function createStandalone() {
+	let standalone = $state(false);
+
+	function setStandalone(value: boolean) {
+		standalone = value;
+	}
+
+	return {
+		get standalone() {
+			return standalone;
+		},
+		setStandalone
+	};
+}