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

much better!

Browse source
This commit is contained in:
Chris Kruining 2024-11-28 08:31:31 +01:00
parent 76c5de5c32
commit bfb668a164
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
14 changed files with 93 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@
& select {
border: none;
background-color: var(--surface-3);
background-color: transparent;
border-radius: var(--radii-m);
&:focus {

6
src/components/prompt.module.css
View file

@ -2,9 +2,9 @@
display: grid;
gap: var(--padding-m);
padding: var(--padding-m);
background-color: var(--surface-1);
background-color: var(--surface-700);
color: var(--text-2);
border: 1px solid var(--surface-5);
border: 1px solid var(--surface-300);
border-radius: var(--radii-m);
&:not(&[open]) {
@ -12,7 +12,7 @@
}
&[open]::backdrop {
background-color: color(from var(--surface-1) xyz x y z / .3);
background-color: color(from var(--surface-700) xyz x y z / .3);
backdrop-filter: blur(.25em);
}

2
src/components/sidebar.module.css
View file

@ -9,7 +9,7 @@
align-items: center;
inline-size: max-content;
padding: 0;
background-color: var(--surface-1);
background-color: transparent;
color: var(--text-1);
border: none;
font-size: var(--text-l);

26
src/components/tabs.module.css
View file

@ -12,37 +12,49 @@
flex-direction: row;
flex-wrap: nowrap;
border-block-end: 1px solid var(--surface-5);
border-block-end: 1px solid var(--surface-700);
& > .handle {
display: grid;
grid-auto-flow: column;
column-gap: var(--padding-m);
background-color: var(--surface-1);
background-color: transparent;
color: var(--text-2);
cursor: pointer;
border-radius: var(--radii-l) var(--radii-l) 0 0;
& > button {
display: grid;
align-content: center;
background-color: inherit;
color: inherit;
padding: var(--padding-m) 0;
padding: var(--padding-l) 0;
border: none;
cursor: pointer;
border-radius: inherit;
&:first-child {
padding-inline-start: var(--padding-l);
padding-inline-start: var(--padding-xl);
}
&:last-child {
padding-inline-end: var(--padding-l);
padding-inline-end: var(--padding-xl);
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&.active {
background-color: var(--surface-3);
background-color: var(--surface-600);
color: var(--text-1);
}
}
@ -80,7 +92,7 @@
&[open] {
& > summary {
background-color: var(--surface-2);
background-color: var(--surface-600);
}
&::details-content {

11
src/components/tabs.tsx
View file

@ -21,7 +21,7 @@ const useTabs = () => {
return context!;
}
export const Tabs: ParentComponent<{ active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => {
export const Tabs: ParentComponent<{ class?: string, active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => {
const [active, setActive] = createSignal<string | undefined>(undefined);
createEffect(() => {
@ -41,11 +41,11 @@ export const Tabs: ParentComponent<{ active?: Setter<string | undefined>, onClos
};
return <TabsContext.Provider value={ctx}>
<_Tabs active={active()} onClose={props.onClose}>{props.children}</_Tabs>
<_Tabs class={props.class} active={active()} onClose={props.onClose}>{props.children}</_Tabs>
</TabsContext.Provider >;
}
const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType<[string]> }> = (props) => {
const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CommandType<[string]> }> = (props) => {
const commandsContext = useCommands();
const tabsContext = useTabs();
@ -64,7 +64,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
return commandsContext.execute(props.onClose, e);
};
return <div class={css.tabs}>
return <div class={`${css.tabs} ${props.class}`}>
<header>
<For each={tabs()}>{
({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}>
@ -78,6 +78,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
tabsContext.activate(id)
}}>{label}</button>
<Show when={closable}>
<button onPointerDown={onClose}> <AiOutlineClose /></button>
</Show>
@ -106,7 +107,7 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
id={props.id}
data-tab-label={props.label}
data-tab-closable={props.closable}
style="dispay: contents;"
style="display: contents;"
>
<Show when={isActive()}>
<Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>