BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-13 07:04:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): add react gradient colour picker

Browse Source
This commit is contained in:
sethburkart123
2024-09-19 14:47:35 +10:00
parent 90a4c8f048
commit 831853798e
10 changed files with 207 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/pages/settings.svelte
+13 -1
View File
@@ -10,6 +10,12 @@
import { settingsState } from '@/seqta/utils/listeners/SettingsState'
import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
import ColourPicker from '../components/ColourPicker.svelte'
const openColourPicker = () => {
showColourPicker = true;
}
const openChangelog = () => {
OpenWhatsNewPopup();
@@ -22,6 +28,7 @@
};
let { standalone = false } = $props<{ standalone?: boolean }>();
let showColourPicker = $state<boolean>(false);
onMount(() => {
if (!standalone) return;
@@ -38,12 +45,17 @@
<img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
<button onclick={openChangelog} class="absolute right-0 w-8 h-8 text-lg rounded-xl font-IconFamily top-1 bg-zinc-100 dark:bg-zinc-700"></button>
<button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button>
<!-- <button onclick={() => showColourPicker = true} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button> -->
</div>
<TabbedContainer tabs={[
{ title: 'Settings', Content: Settings },
{ title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
{ title: 'Shortcuts', Content: Shortcuts },
{ title: 'Themes', Content: Theme },
]} />
</div>
{#if showColourPicker}
<ColourPicker hidePicker={() => { showColourPicker = false }} />
{/if}
</div>