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>