BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(popup): correct incorrect transform on switches

Browse Source
This commit is contained in:
sethburkart123
2024-09-06 07:00:48 +10:00
parent 220d15ebbc
commit 7f93aef9cc
6 changed files with 56 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/components/Switch.svelte
+6 -15
View File
@@ -1,13 +1,10 @@
<script lang="ts"> <script lang="ts">
import { animate, spring } from 'motion'; 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 { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
let handle: HTMLElement | null = null; let handle: HTMLElement | null = null;
let standalone = createStandalone();
const toggleSwitch = () => {
onChange(!state);
};
const springParams = { const springParams = {
stiffness: 600, stiffness: 600,
@@ -19,8 +16,7 @@
animate( animate(
handle, handle,
{ {
x: enabled ? 20 : 0, x: enabled ? (standalone.standalone ? 24 : 20) : 0,
scaleX: [1, 2, 1]
}, },
{ {
easing: spring(springParams), easing: spring(springParams),
@@ -30,18 +26,13 @@
// Trigger animation whenever state changes // Trigger animation whenever state changes
$effect(() => animateSwitch(state)); $effect(() => animateSwitch(state));
onMount(() => {
// Initialize the position of the switch
animateSwitch(state);
});
</script> </script>
<div <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} data-ison={state}
onclick={toggleSwitch} onclick={() => onChange(!state)}
onkeydown={(e) => e.key === "Enter" && toggleSwitch()} onkeydown={(e) => e.key === "Enter" && onChange(!state)}
role="switch" role="switch"
aria-checked={state} aria-checked={state}
tabindex="0" tabindex="0"
src/svelte-interface/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title> <title>BetterSEQTA+ Settings</title>
</head> </head>
<body style="background-color: red;"> <body>
<script type="module" src="./index.ts"></script>
asdasds - I (Crazypersonalph) agree with this statement. asdasds - I (Crazypersonalph) agree with this statement.
</body> </body>
</html> </html>
src/svelte-interface/index.ts
+16
View File
@@ -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);
src/svelte-interface/main.ts
+6 -5
View File
@@ -5,22 +5,23 @@ import Settings from './pages/settings.svelte';
import styles from './index.css?inline'; import styles from './index.css?inline';
import { mount } from 'svelte'; import { mount } from 'svelte';
export default function initSvelteInterface(shadow: ShadowRoot) { export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) {
console.log(shadow)
/* routes.set({ /* routes.set({
'settings': Settings, 'settings': Settings,
'*': Settings '*': Settings
}) */ }) */
const app = mount(Settings, { const app = mount(Settings, {
target: shadow, target: mountPoint,
props: {
standalone: false
}
}); });
const style2 = document.createElement("style"); const style2 = document.createElement("style");
style2.setAttribute("type", "text/css"); style2.setAttribute("type", "text/css");
style2.innerHTML = styles; style2.innerHTML = styles;
shadow.appendChild(style2); mountPoint.appendChild(style2);
return app; return app;
} }
src/svelte-interface/pages/settings.svelte
+11 -2
View File
@@ -5,14 +5,23 @@
import Theme from './settings/theme.svelte'; import Theme from './settings/theme.svelte';
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
import { createStandalone } from '../utils/standalone.svelte';
import { onMount } from 'svelte'
const openChangelog = () => { const openChangelog = () => {
browser.runtime.sendMessage({ type: 'currentTab', info: '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> </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"> <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-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" /> <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
src/svelte-interface/utils/standalone.svelte.ts
+14
View File
@@ -0,0 +1,14 @@
export function createStandalone() {
let standalone = $state(false);
function setStandalone(value: boolean) {
standalone = value;
}
return {
get standalone() {
return standalone;
},
setStandalone
};
}