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

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);
}
}
}
}