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

settings

Browse Source
This commit is contained in:
Jones8683
2025-08-01 15:08:35 +09:30
parent 871b893532
commit c0271968e2
1 changed files with 78 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/settings.svelte
+74 -34
View File
@@ -1,43 +1,43 @@
<script lang="ts"> <script lang="ts">
import TabbedContainer from '../components/TabbedContainer.svelte'; import TabbedContainer from "../components/TabbedContainer.svelte";
import Settings from './settings/general.svelte'; import Settings from "./settings/general.svelte";
import Shortcuts from './settings/shortcuts.svelte'; import Shortcuts from "./settings/shortcuts.svelte";
import Theme from './settings/theme.svelte'; import Theme from "./settings/theme.svelte";
import browser from 'webextension-polyfill'; import browser from "webextension-polyfill";
import { standalone as StandaloneStore } from '../utils/standalone.svelte'; import { standalone as StandaloneStore } from "../utils/standalone.svelte";
import { onMount } from 'svelte' import { onMount } from "svelte";
import { settingsState } from '@/seqta/utils/listeners/SettingsState' import { settingsState } from "@/seqta/utils/listeners/SettingsState";
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup" import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage" import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew" import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
import ColourPicker from '../components/ColourPicker.svelte' import ColourPicker from "../components/ColourPicker.svelte";
import { settingsPopup } from '../hooks/SettingsPopup' import { settingsPopup } from "../hooks/SettingsPopup";
let devModeSequence = ''; let devModeSequence = "";
const handleDevModeToggle = () => { const handleDevModeToggle = () => {
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
devModeSequence += event.key.toLowerCase(); devModeSequence += event.key.toLowerCase();
if (devModeSequence.includes('dev')) { if (devModeSequence.includes("dev")) {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener("keydown", handleKeyDown);
settingsState.devMode = true; settingsState.devMode = true;
alert('Dev mode is now enabled'); alert("Dev mode is now enabled");
} }
}; };
document.addEventListener('keydown', handleKeyDown); document.addEventListener("keydown", handleKeyDown);
setTimeout(() => { setTimeout(() => {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener("keydown", handleKeyDown);
devModeSequence = ''; devModeSequence = "";
}, 10000); }, 10000);
}; };
const openColourPicker = () => { const openColourPicker = () => {
showColourPicker = true; showColourPicker = true;
} };
const openChangelog = () => { const openChangelog = () => {
OpenWhatsNewPopup(); OpenWhatsNewPopup();
@@ -62,30 +62,70 @@
}); });
</script> </script>
<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip"> <div
<div class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"> class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode
<div class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"> ? 'dark'
: ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
>
<div
class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"
>
<div
class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} /> <img
src={browser.runtime.getURL(
"resources/icons/betterseqta-dark-full.png",
)}
class="w-4/5 dark:hidden"
alt="Light logo"
onclick={handleDevModeToggle}
/>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} /> <img
src={browser.runtime.getURL(
"resources/icons/betterseqta-light-full.png",
)}
class="hidden w-4/5 dark:block"
alt="Dark logo"
onclick={handleDevModeToggle}
/>
{#if !standalone} {#if !standalone}
<button onclick={openChangelog} class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button> <button
<button onclick={openAbout} class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button> onclick={openChangelog}
class="absolute top-1 right-1 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
>{"\ue929"}</button
>
<button
onclick={openAbout}
class="absolute top-1 right-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
>{"\ueb73"}</button
>
{/if} {/if}
</div> </div>
<TabbedContainer tabs={[ <TabbedContainer
{ title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } }, tabs={[
{ title: 'Shortcuts', Content: Shortcuts }, {
{ title: 'Themes', Content: Theme }, title: "Settings",
]} /> Content: Settings,
props: { showColourPicker: openColourPicker },
},
{ title: "Shortcuts", Content: Shortcuts },
{ title: "Themes", Content: Theme },
]}
/>
</div> </div>
{#if showColourPicker} {#if showColourPicker}
<ColourPicker hidePicker={() => { showColourPicker = false }} /> <ColourPicker
hidePicker={() => {
showColourPicker = false;
}}
/>
{/if} {/if}
</div> </div>