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

fix up tabs ui

Browse source
This commit is contained in:
Chris Kruining 2024-10-29 18:15:46 +01:00
parent addc6bfb11
commit 041de66c64
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,6 +30,7 @@
color: inherit; color: inherit;
padding: var(--padding-m) 0; padding: var(--padding-m) 0;
border: none; border: none;
cursor: pointer;
&:first-child { &:first-child {
padding-inline-start: var(--padding-l); padding-inline-start: var(--padding-l);

6
src/components/tabs.tsx
View file

@ -1,7 +1,7 @@
import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, JSX, onCleanup, ParentComponent, Setter, Show, useContext } from "solid-js"; import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, JSX, onCleanup, ParentComponent, Setter, Show, useContext } from "solid-js";
import { IoCloseCircleOutline } from "solid-icons/io";
import css from "./tabs.module.css";
import { Command, CommandType, noop, useCommands } from "~/features/command"; import { Command, CommandType, noop, useCommands } from "~/features/command";
import { AiOutlineClose } from "solid-icons/ai";
import css from "./tabs.module.css";
interface TabsContextType { interface TabsContextType {
activate(id: string | undefined): void; activate(id: string | undefined): void;
@ -72,7 +72,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
<span class={css.handle} classList={{ [css.active]: props.active === id }}> <span class={css.handle} classList={{ [css.active]: props.active === id }}>
<button onpointerdown={() => tabsContext.activate(id)}>{label}</button> <button onpointerdown={() => tabsContext.activate(id)}>{label}</button>
<Show when={closable}> <Show when={closable}>
<button onPointerDown={onClose}> <IoCloseCircleOutline /></button> <button onPointerDown={onClose}> <AiOutlineClose /></button>
</Show> </Show>
</span> </span>
</Command.Context> </Command.Context>