gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

refactor(client): extract setup form to dedicated component

Browse Source
This commit is contained in:
Elian Doran 2026-02-15 16:08:58 +02:00
parent 4b8d341e00
commit a02f3c4440
No known key found for this signature in database
4 changed files with 80 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/client/src/widgets/type_widgets/WebView.css
View File

@ -16,24 +16,3 @@
width: 100%;
height: 100%;
}
.web-view-setup-form {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 40px;
.form-icon {
margin-bottom: 12px;
}
.form-group {
width: 100%;
max-width: 600px;
}
.tn-link {
margin-top: 1em;
}
}

80
apps/client/src/widgets/type_widgets/WebView.tsx
View File

@ -12,6 +12,7 @@ import FormGroup from "../react/FormGroup";
import FormTextBox from "../react/FormTextBox";
import { useNoteLabel } from "../react/hooks";
import LinkButton from "../react/LinkButton";
import SetupForm from "./helpers/SetupForm";
import { TypeWidgetProps } from "./type_widget";
const isElectron = utils.isElectron();
@ -58,55 +59,50 @@ function SetupWebView({note}: {note: FNote}) {
}, [ setSrcLabel ]);
return (
<div class="web-view-setup-form">
<form class="tn-centered-form" onSubmit={() => submit(src)}>
<span className="bx bx-globe-alt form-icon" />
<FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}>
<input className="form-control"
type="text"
value={src}
placeholder={t("web_view_setup.url_placeholder")}
onChange={(e) => {setSrc((e.target as HTMLInputElement)?.value);}}
/>
</FormGroup>
<Button
text={t("web_view_setup.create_button")}
primary
keyboardShortcut="Enter"
<SetupForm
icon="bx bx-globe-alt"
onSubmit={() => submit(src)}
>
<FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}>
<input className="form-control"
type="text"
value={src}
placeholder={t("web_view_setup.url_placeholder")}
onChange={(e) => {setSrc((e.target as HTMLInputElement)?.value);}}
/>
</form>
</div>
</FormGroup>
<Button
text={t("web_view_setup.create_button")}
primary
keyboardShortcut="Enter"
/>
</SetupForm>
);
}
function DisabledWebView({ note, url }: { note: FNote, url: string }) {
return (
<div class="web-view-setup-form">
<form class="tn-centered-form">
<span className="bx bx-globe-alt form-icon" />
<FormGroup name="web-view-src-detail" label={t("web_view_setup.disabled_description")}>
<FormTextBox
type="url"
currentValue={url}
disabled
/>
</FormGroup>
<Button
text={t("web_view_setup.disabled_button_enable")}
icon="bx bx-check-shield"
onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)}
primary
<SetupForm icon="bx bx-globe-alt">
<FormGroup name="web-view-src-detail" label={t("web_view_setup.disabled_description")}>
<FormTextBox
type="url"
currentValue={url}
disabled
/>
</FormGroup>
<LinkButton
text="Learn more"
onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
/>
</form>
</div>
<Button
text={t("web_view_setup.disabled_button_enable")}
icon="bx bx-check-shield"
onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)}
primary
/>
<LinkButton
text="Learn more"
onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
/>
</SetupForm>
);
}

20
apps/client/src/widgets/type_widgets/helpers/SetupForm.css Normal file
View File

@ -0,0 +1,20 @@
.setup-form {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 40px;
.form-icon {
margin-bottom: 12px;
}
.form-group {
width: 100%;
max-width: 600px;
}
.tn-link {
margin-top: 1em;
}
}

22
apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx Normal file
View File

@ -0,0 +1,22 @@
import "./SetupForm.css";
import clsx from "clsx";
import { ComponentChildren } from "preact";
interface SetupFormProps {
icon: string;
onSubmit?: () => void;
children: ComponentChildren;
}
export default function SetupForm({ icon, children, onSubmit }: SetupFormProps) {
return (
<div class="setup-form">
<form class="tn-centered-form" onSubmit={onSubmit}>
<span className={clsx(icon, "form-icon")} />
{children}
</form>
</div>
);
}