gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-17 12:54:24 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

feat(layout): basic ARIA & some padding

Browse Source
This commit is contained in:
Elian Doran 2025-12-14 21:20:55 +02:00
parent a7ca839afb
commit 5a09a80902
No known key found for this signature in database
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/layout/NoteTitleActions.css
View File

@ -4,8 +4,6 @@ body.experimental-feature-new-layout {
} }
.title-actions { .title-actions {
padding-inline-start: 15px; padding: 0.75em 15px;
padding-top: 1em;
padding-bottom: 0.2em;
} }
} }

4
apps/client/src/widgets/react/Collapsible.css
View File

@ -3,6 +3,10 @@
line-height: 1em; line-height: 1em;
display: flex; display: flex;
align-items: center; align-items: center;
appearance: none;
background: transparent;
border: 0;
color: inherit;
.arrow { .arrow {
font-size: 1.3em; font-size: 1.3em;

11
apps/client/src/widgets/react/Collapsible.tsx
View File

@ -4,7 +4,7 @@ import clsx from "clsx";
import { ComponentChildren, HTMLAttributes } from "preact"; import { ComponentChildren, HTMLAttributes } from "preact";
import { useRef, useState } from "preact/hooks"; import { useRef, useState } from "preact/hooks";
import { useElementSize } from "./hooks"; import { useElementSize, useUniqueName } from "./hooks";
import Icon from "./Icon"; import Icon from "./Icon";
interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> { interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> {
@ -18,21 +18,26 @@ export default function Collapsible({ title, children, className, initiallyExpan
const innerRef = useRef<HTMLDivElement>(null); const innerRef = useRef<HTMLDivElement>(null);
const [ expanded, setExpanded ] = useState(initiallyExpanded); const [ expanded, setExpanded ] = useState(initiallyExpanded);
const { height } = useElementSize(innerRef) ?? {}; const { height } = useElementSize(innerRef) ?? {};
const contentId = useUniqueName();
return ( return (
<div className={clsx("collapsible", className, expanded && "expanded")}> <div className={clsx("collapsible", className, expanded && "expanded")}>
<div <button
className="collapsible-title" className="collapsible-title"
onClick={() => setExpanded(!expanded)} onClick={() => setExpanded(!expanded)}
aria-expanded={expanded}
aria-controls={contentId}
> >
<Icon className="arrow" icon="bx bx-chevron-right" />&nbsp; <Icon className="arrow" icon="bx bx-chevron-right" />&nbsp;
{title} {title}
</div> </button>
<div <div
id={contentId}
ref={bodyRef} ref={bodyRef}
className="collapsible-body" className="collapsible-body"
style={{ height: expanded ? height : "0" }} style={{ height: expanded ? height : "0" }}
aria-hidden={!expanded}
> >
<div <div
ref={innerRef} ref={innerRef}