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

move theme options to sub menu

Browse source
This commit is contained in:
Chris Kruining 2024-12-02 09:16:53 +01:00
parent 1bf3dd3ad6
commit e58f6f2396
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
3 changed files with 84 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app.css
View file

@ -44,6 +44,42 @@
--padding-l: .75em;
--padding-xl: 1em;
--padding-xxl: 1.5em;
--shadow-color: 220 3% 15%;
--shadow-strength: 1%;
--shadow-1: 0 1px 2px -1px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
--shadow-2:
0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
--shadow-3:
0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
--shadow-4:
0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
--shadow-5:
0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
--shadow-6:
0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
}
html {

17
src/routes/(editor).tsx
View file

@ -1,12 +1,13 @@
import { Link, Meta, Style, Title } from "@solidjs/meta";
import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show, Suspense } from "solid-js";
import { Link, Meta, Title } from "@solidjs/meta";
import { Component, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
import { FilesProvider } from "~/features/file";
import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
import { createCommand, Modifier } from "~/features/command";
import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
import { getRequestEvent, isServer } from "solid-js/web";
import { getRequestEvent } from "solid-js/web";
import { HttpHeader } from "@solidjs/start";
import { FaSolidPalette } from "solid-icons/fa";
import css from "./editor.module.css";
const event = getRequestEvent();
@ -21,6 +22,7 @@ export const route: RouteDefinition = {
export default function Editor(props: ParentProps) {
const theme = useTheme();
const themeMenuId = createUniqueId();
const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
@ -85,8 +87,15 @@ export default function Editor(props: ParentProps) {
<Menu.Mount />
<section class={css.right}>
<ColorSchemePicker />
<div class={css.themeMenu}>
<button class={css.themeMenuButton} id={`${themeMenuId}-button`} popoverTarget={`${themeMenuId}-dialog`} title="Open theme picker menu">
<FaSolidPalette />
</button>
<dialog class={css.themeMenuDialog} id={`${themeMenuId}-dialog`} popover anchor={`${themeMenuId}-button`}>
<ColorSchemePicker />
</dialog>
</div>
</section>
</nav>

35
src/routes/editor.module.css
View file

@ -47,6 +47,41 @@
display: grid;
grid-auto-flow: column;
align-content: center;
& .themeMenu {
display: contents;
& > button {
display: flex;
justify-content: center;
padding: var(--padding-m);
border: none;
border-radius: var(--radii-m);
background-color: transparent;
&:hover {
background-color: var(--surface-500);
}
}
& > dialog {
inset-inline-end: anchor(right);
inset-block-start: anchor(bottom);
padding: var(--padding-m);
border: none;
border-radius: var(--radii-m);
border-top-right-radius: 0;
background-color: var(--surface-600);
box-shadow: var(--shadow-3);
}
&:has(:popover-open) > button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: var(--surface-600);
}
}
}
}