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

feat(ThemeCreator): add force theme toggle

Browse Source
This commit is contained in:
SethBurkart123
2024-10-04 13:56:13 +10:00
parent e55fb35bf9
commit 2eefeb30b6
2 changed files with 101 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/components/Switch.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
</script>
<div
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
data-ison={state}
onclick={() => onChange(!state)}
onkeydown={(e) => e.key === "Enter" && onChange(!state)}
src/svelte-interface/pages/themeCreator.svelte
+100 -53
View File
@@ -2,6 +2,7 @@
import { v4 as uuidv4 } from 'uuid';
import { onMount } from 'svelte';
import { slide } from 'svelte/transition';
import { fade } from 'svelte/transition';
import { type LoadedCustomTheme } from '@/types/CustomThemes'
@@ -86,7 +87,7 @@
});
type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload';
type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
type SwitchProps = { state: boolean; onChange: (value: boolean) => void };
type ButtonProps = { onClick: () => void; text: string };
@@ -94,8 +95,14 @@
type ColourPickerProps = { color: string; onChange: (color: string) => void };
type SelectProps = { options: Array<{ value: string; label: string }>; value: string; onChange: (value: string) => void };
type CodeEditorProps = { value: string; onChange: (value: string) => void };
type LightDarkToggleProps = { state: boolean; onChange: (value: boolean) => void };
type ComponentProps = SwitchProps | ButtonProps | SliderProps | ColourPickerProps | SelectProps | CodeEditorProps;
type ConditionalProps = {
condition: boolean;
children: SettingItem;
};
type ComponentProps = SwitchProps | ButtonProps | SliderProps | ColourPickerProps | SelectProps | CodeEditorProps | LightDarkToggleProps | ConditionalProps;
type SettingItem = {
type: SettingType;
@@ -107,64 +114,89 @@
</script>
{#snippet settingItem(item: SettingItem)}
<div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
<div>
<h2 class="text-sm font-bold">{item.title}</h2>
<p class="text-xs">{item.description}</p>
{#if item.type === 'conditional'}
{#if (item.props as ConditionalProps).condition }
<div transition:slide={{ duration: 300 }}>
{@render settingItem((item.props as ConditionalProps).children)}
</div>
{/if}
{:else}
<div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
{#if item.direction === 'vertical'}
<div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
<span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
<div>
<h2 class="text-sm font-bold">{item.title}</h2>
<p class="text-xs">{item.description}</p>
</div>
{/if}
</div>
{#if !closedAccordions.includes(item.title)}
<div class="{item.direction === 'vertical' ? 'w-full mt-2' : ''}" transition:slide={{ duration: 300 }}>
{#if item.type === 'switch'}
<Switch {...(item.props as SwitchProps)} />
{:else if item.type === 'button'}
<Button {...(item.props as ButtonProps)} />
{:else if item.type === 'slider'}
<Slider {...(item.props as SliderProps)} />
{:else if item.type === 'colourPicker'}
<ColourPicker savePresets={false} standalone={true} {...(item.props)} />
{:else if item.type === 'codeEditor'}
<CodeEditor {...(item.props as CodeEditorProps)} />
{:else if item.type === 'imageUpload'}
{#each theme.CustomImages as image (image.id)}
<div class="flex items-center h-16 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
<div class="flex-1 h-full ">
<img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
</div>
<input
type="text"
bind:value={image.variableName}
oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
placeholder="CSS Variable Name"
class="flex-grow flex-[3] w-full p-2 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-800/50 dark:text-white"
/>
<button onclick={() => onRemoveImage(image.id)} class="p-2 ml-1 transition dark:text-white">
<span class='font-IconFamily'>{'\ued8c'}</span>
</button>
</div>
{/each}
<div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-100 dark:bg-zinc-700">
<span class='font-IconFamily'>{'\uec60'}</span>
<span class='dark:text-white'>Add image</span>
<input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
{#if item.direction === 'vertical'}
<div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
<span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
</div>
{/if}
</div>
{/if}
</div>
{#if !closedAccordions.includes(item.title)}
<div class="{item.direction === 'vertical' ? 'w-full mt-2' : ''}" transition:slide={{ duration: 300 }}>
{#if item.type === 'switch'}
<Switch {...(item.props as SwitchProps)} />
{:else if item.type === 'button'}
<Button {...(item.props as ButtonProps)} />
{:else if item.type === 'slider'}
<Slider {...(item.props as SliderProps)} />
{:else if item.type === 'colourPicker'}
<ColourPicker savePresets={false} standalone={true} {...(item.props)} />
{:else if item.type === 'codeEditor'}
<CodeEditor {...(item.props as CodeEditorProps)} />
{:else if item.type === 'imageUpload'}
{#each theme.CustomImages as image (image.id)}
<div class="flex items-center h-16 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
<div class="flex-1 h-full ">
<img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
</div>
<input
type="text"
bind:value={image.variableName}
oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
placeholder="CSS Variable Name"
class="flex-grow flex-[3] w-full p-2 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-800/50 dark:text-white"
/>
<button onclick={() => onRemoveImage(image.id)} class="p-2 ml-1 transition dark:text-white">
<span class='font-IconFamily'>{'\ued8c'}</span>
</button>
</div>
{/each}
<div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-100 dark:bg-zinc-700">
<span class='font-IconFamily'>{'\uec60'}</span>
<span class='dark:text-white'>Add image</span>
<input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</div>
{:else if item.type === 'lightDarkToggle'}
<button
class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
>
{#key (item.props as LightDarkToggleProps).state}
<span
class="absolute"
in:fade={{ duration: 150 }}
out:fade={{ duration: 150 }}
>
{(item.props as LightDarkToggleProps).state ? '\uec12' : '\uecfe'}
</span>
{/key}
<span class='opacity-0'>{'\uec12'}</span>
</button>
{/if}
</div>
{/if}
</div>
{/if}
{/snippet}
<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} '>
@@ -236,6 +268,21 @@
onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
}
},
{
type: 'conditional',
props: {
condition: theme.forceDark !== undefined,
children: {
type: 'lightDarkToggle',
title: 'Mode',
description: 'Choose whether to force light or dark mode',
props: {
state: theme.forceDark === true,
onChange: (value: boolean) => theme = { ...theme, forceDark: value }
}
}
}
},
{
type: 'colourPicker',
title: 'Default Theme Colour',