chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

patch colorscheme dropdown to use new combo-box

Browse source
This commit is contained in:
Chris Kruining 2025-01-06 15:52:18 +01:00
parent 27aac495b9
commit 672afba529
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 17 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/colorschemepicker.module.css
View file

@ -1,26 +1,5 @@
.picker { .picker {
display: flex; grid-template-columns: auto 1fr;
flex-flow: row;
align-items: center;
background-color: inherit;
border: 1px solid transparent;
border-radius: var(--radii-m);
padding: var(--padding-s);
& select {
flex: 1 1 auto;
border: none;
background-color: inherit;
border-radius: var(--radii-m);
&:focus {
outline: none;
}
}
&:has(:focus-visible) {
border-color: var(--info);
}
} }
.hue { .hue {

34
src/components/colorschemepicker.tsx
View file

@ -1,9 +1,10 @@
import { Component, createContext, createEffect, createResource, For, ParentComponent, Show, Suspense, useContext } from "solid-js"; import { Component, createContext, createEffect, createResource, Match, ParentComponent, Show, Suspense, Switch, useContext } from "solid-js";
import css from './colorschemepicker.module.css';
import { CgDarkMode } from "solid-icons/cg";
import { action, query, useAction } from "@solidjs/router"; import { action, query, useAction } from "@solidjs/router";
import { useSession } from "vinxi/http"; import { useSession } from "vinxi/http";
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
import { ComboBox } from "./combobox";
import { WiMoonAltFull, WiMoonAltNew, WiMoonAltFirstQuarter } from "solid-icons/wi";
import css from './colorschemepicker.module.css';
export enum ColorScheme { export enum ColorScheme {
Auto = 'light dark', Auto = 'light dark',
@ -11,7 +12,7 @@ export enum ColorScheme {
Dark = 'dark', Dark = 'dark',
} }
const colorSchemes = Object.entries(ColorScheme) as readonly [keyof typeof ColorScheme, ColorScheme][]; const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any;
export interface State { export interface State {
colorScheme: ColorScheme; colorScheme: ColorScheme;
@ -88,20 +89,17 @@ export const ColorSchemePicker: Component = (props) => {
const { theme, setColorScheme, setHue } = useStore(); const { theme, setColorScheme, setHue } = useStore();
return <> return <>
<label class={css.picker} aria-label="Color scheme picker"> <label aria-label="Color scheme picker">
<CgDarkMode /> <ComboBox id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={(next) => setColorScheme(next())} values={colorSchemes}>{
(k, v) => <>
<select name="color-scheme-picker" onInput={(e) => { <Switch>
if (e.target.value !== theme.colorScheme) { <Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
const nextValue = (e.target.value ?? ColorScheme.Auto) as ColorScheme; <Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
<Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
setColorScheme(nextValue); </Switch>
} {v}
}}> </>
<For each={colorSchemes}>{ }</ComboBox>
([label, value]) => <option value={value} selected={value === theme.colorScheme}>{label}</option>
}</For>
</select>
</label> </label>
<label class={css.hue} aria-label="Hue slider"> <label class={css.hue} aria-label="Hue slider">