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

PWA improvements

Browse source
This commit is contained in:
Chris Kruining 2024-10-31 14:33:42 +01:00
parent dd11708d15
commit 6ed9c74862
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 70 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,24 @@
import { Link, Meta, Title } from "@solidjs/meta";
import { createSignal, For, ParentProps, Show } from "solid-js";
import { Link, Title } from "@solidjs/meta";
import { createEffect, createMemo, createSignal, ParentProps, Show } from "solid-js";
import { BsTranslate } from "solid-icons/bs";
import { FilesProvider } from "~/features/file";
import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
import { isServer } from "solid-js/web";
import { A } from "@solidjs/router";
import { A, createAsync } from "@solidjs/router";
import { createCommand, Modifier } from "~/features/command";
import { ColorScheme, ColorSchemePicker } from "~/components/colorschemepicker";
import { ColorScheme, ColorSchemePicker, getColorScheme } from "~/components/colorschemepicker";
import css from "./editor.module.css";
export default function Editor(props: ParentProps) {
const storedColorScheme = createAsync<keyof typeof ColorScheme>(() => getColorScheme(), { initialValue: 'Auto' });
const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
const [colorScheme, setColorScheme] = createSignal<ColorScheme>(ColorScheme.Auto);
const colorScheme = createMemo(() => ColorScheme[storedColorScheme()]);
const color = createMemo(() => ({
[ColorScheme.Auto]: undefined,
[ColorScheme.Light]: '#eee',
[ColorScheme.Dark]: '#333',
}[ColorScheme[storedColorScheme()]]));
const supported = isServer || typeof window.showDirectoryPicker === 'function';
const commands = [
@ -22,7 +29,15 @@ export default function Editor(props: ParentProps) {
return <MenuProvider commands={commands}>
<Title>Calque</Title>
<Meta name="color-scheme" content={colorScheme()} />
<meta id="theme-scheme" name="color-scheme" content={colorScheme()} />
<meta id="theme-color" name="theme-color" content={color()} />
<Show when={color() === undefined}>
<meta id="theme-auto-light" name="theme-color" media="(prefers-color-scheme: light)" content="#eee" />
<meta id="theme-auto-dark" name="theme-color" media="(prefers-color-scheme: dark)" content="#333" />
</Show>
<Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
<Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />
<Link rel="manifest" href="/manifest.json" />
@ -34,7 +49,7 @@ export default function Editor(props: ParentProps) {
<Menu.Mount />
<section class={css.right}>
<ColorSchemePicker value={[colorScheme, setColorScheme]} />
<ColorSchemePicker />
</section>
</nav>

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

@ -11,16 +11,23 @@
grid-template-columns: auto minmax(0, 1fr) auto;
grid-auto-flow: column;
justify-content: start;
justify-items: start;
position: relative;
z-index: 10;
gap: .5em;
padding-inline: 1em;
block-size: 2em;
block-size: calc(env(titlebar-area-height, 2em) + .5px);
inline-size: env(titlebar-area-width, 100%);
-webkit-app-region: drag;
background-color: var(--surface-3);
color: var(--text-1);
& > * {
-webkit-app-region: no-drag;
}
& > .logo {
inline-size: 3em;
block-size: 3em;