Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-04-11 14:37:41 +02:00
Code Issues Packages Projects Releases Activity

chore(react): add an option to make options row stacked

Browse Source
This commit is contained in:
Elian Doran
2026-04-11 13:43:10 +03:00
parent b7231e3464
commit 0696f7724d
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
View File

@@ -46,6 +46,16 @@
justify-content: center; justify-content: center;
} }
.option-row.stacked {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.option-row.stacked .option-row-input {
width: 100%;
}
.option-row-link.use-tn-links { .option-row-link.use-tn-links {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;

8
apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
View File

@@ -10,14 +10,18 @@ interface OptionsRowProps {
description?: string; description?: string;
children: VNode; children: VNode;
centered?: boolean; centered?: boolean;
/** When true, stacks label above input with full-width input */
stacked?: boolean;
} }
export default function OptionsRow({ name, label, description, children, centered }: OptionsRowProps) { export default function OptionsRow({ name, label, description, children, centered, stacked }: OptionsRowProps) {
const id = useUniqueName(name); const id = useUniqueName(name);
const childWithId = cloneElement(children, { id }); const childWithId = cloneElement(children, { id });
const className = `option-row ${centered ? "centered" : ""} ${stacked ? "stacked" : ""}`;
return ( return (
<div className={`option-row ${centered ? "centered" : ""}`}> <div className={className}>
<div className="option-row-label"> <div className="option-row-label">
{label && <label for={id}>{label}</label>} {label && <label for={id}>{label}</label>}
{description && <small className="option-row-description">{description}</small>} {description && <small className="option-row-description">{description}</small>}