gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

feat(react/widgets): set up form group

Browse Source
This commit is contained in:
Elian Doran 2025-08-04 20:34:47 +03:00
parent 83fb62d4df
commit 18eb704b81
No known key found for this signature in database
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/dialogs/add_link.tsx
View File

@ -12,6 +12,7 @@ import { useEffect } from "react";
import note_autocomplete, { Suggestion } from "../../services/note_autocomplete"; import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
import type { default as TextTypeWidget } from "../type_widgets/editable_text.js"; import type { default as TextTypeWidget } from "../type_widgets/editable_text.js";
import { logError } from "../../services/ws"; import { logError } from "../../services/ws";
import FormGroup from "../react/FormGroup.js";
type LinkType = "reference-link" | "external-link" | "hyper-link"; type LinkType = "reference-link" | "external-link" | "hyper-link";
@ -100,9 +101,7 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
onShown={onShown} onShown={onShown}
onHidden={() => setSuggestion(null)} onHidden={() => setSuggestion(null)}
> >
<div className="form-group"> <FormGroup label={t("add_link.note")}>
<label htmlFor="add-link-note-autocomplete">{t("add_link.note")}</label>
<NoteAutocomplete <NoteAutocomplete
inputRef={autocompleteRef} inputRef={autocompleteRef}
text={text} text={text}
@ -112,7 +111,7 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
allowCreatingNotes: true allowCreatingNotes: true
}} }}
/> />
</div> </FormGroup>
{!hasSelection && ( {!hasSelection && (
<div className="add-link-title-settings"> <div className="add-link-title-settings">

7
apps/client/src/widgets/dialogs/branch_prefix.tsx
View File

@ -10,6 +10,7 @@ import froca from "../../services/froca.js";
import tree from "../../services/tree.js"; import tree from "../../services/tree.js";
import FBranch from "../../entities/fbranch.js"; import FBranch from "../../entities/fbranch.js";
import Button from "../react/Button.jsx"; import Button from "../react/Button.jsx";
import FormGroup from "../react/FormGroup.js";
interface BranchPrefixDialogProps { interface BranchPrefixDialogProps {
branch?: FBranch; branch?: FBranch;
@ -38,15 +39,13 @@ function BranchPrefixDialogComponent({ branch }: BranchPrefixDialogProps) {
helpPageId="TBwsyfadTA18" helpPageId="TBwsyfadTA18"
footer={<Button text={t("branch_prefix.save")} />} footer={<Button text={t("branch_prefix.save")} />}
> >
<div class="form-group"> <FormGroup label={t("branch_prefix.prefix")}>
<label for="branch-prefix-input">{t("branch_prefix.prefix")}</label> &nbsp;
<div class="input-group"> <div class="input-group">
<input class="branch-prefix-input form-control" value={prefix} ref={branchInput} <input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} /> onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
<div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div> <div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
</div> </div>
</div> </FormGroup>
</Modal> </Modal>
); );
} }

17
apps/client/src/widgets/react/FormGroup.tsx Normal file
View File

@ -0,0 +1,17 @@
import { ComponentChildren } from "preact";
interface FormGroupProps {
label: string;
children: ComponentChildren;
}
export default function FormGroup({ label, children }: FormGroupProps) {
return (
<div className="form-group">
<label style={{ width: "100%" }}>
{label}
{children}
</label>
</div>
);
}