gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-23 06:04:25 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

refactor(client): extract learn more into component

Browse Source
This commit is contained in:
Elian Doran 2026-02-15 16:11:52 +02:00
parent a02f3c4440
commit 2103be9d28
No known key found for this signature in database
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/translations/en/translation.json
View File

@ -2314,5 +2314,8 @@
"menu_change_to_widget": "Change to widget", "menu_change_to_widget": "Change to widget",
"menu_change_to_frontend_script": "Change to frontend script", "menu_change_to_frontend_script": "Change to frontend script",
"menu_theme_base": "Theme base" "menu_theme_base": "Theme base"
},
"setup_form": {
"more_info": "Learn more"
} }
} }

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

@ -6,16 +6,16 @@ import FNote from "../../entities/fnote";
import attributes from "../../services/attributes"; import attributes from "../../services/attributes";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import toast from "../../services/toast"; import toast from "../../services/toast";
import utils, { openInAppHelpFromUrl } from "../../services/utils"; import utils from "../../services/utils";
import Button from "../react/Button"; import Button from "../react/Button";
import FormGroup from "../react/FormGroup"; import FormGroup from "../react/FormGroup";
import FormTextBox from "../react/FormTextBox"; import FormTextBox from "../react/FormTextBox";
import { useNoteLabel } from "../react/hooks"; import { useNoteLabel } from "../react/hooks";
import LinkButton from "../react/LinkButton";
import SetupForm from "./helpers/SetupForm"; import SetupForm from "./helpers/SetupForm";
import { TypeWidgetProps } from "./type_widget"; import { TypeWidgetProps } from "./type_widget";
const isElectron = utils.isElectron(); const isElectron = utils.isElectron();
const HELP_PAGE = "1vHRoWCEjj0L";
export default function WebView({ note }: TypeWidgetProps) { export default function WebView({ note }: TypeWidgetProps) {
const [ webViewSrc ] = useNoteLabel(note, "webViewSrc"); const [ webViewSrc ] = useNoteLabel(note, "webViewSrc");
@ -60,7 +60,7 @@ function SetupWebView({note}: {note: FNote}) {
return ( return (
<SetupForm <SetupForm
icon="bx bx-globe-alt" icon="bx bx-globe-alt" inAppHelpPage={HELP_PAGE}
onSubmit={() => submit(src)} onSubmit={() => submit(src)}
> >
<FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}> <FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}>
@ -83,7 +83,7 @@ function SetupWebView({note}: {note: FNote}) {
function DisabledWebView({ note, url }: { note: FNote, url: string }) { function DisabledWebView({ note, url }: { note: FNote, url: string }) {
return ( return (
<SetupForm icon="bx bx-globe-alt"> <SetupForm icon="bx bx-globe-alt" inAppHelpPage={HELP_PAGE}>
<FormGroup name="web-view-src-detail" label={t("web_view_setup.disabled_description")}> <FormGroup name="web-view-src-detail" label={t("web_view_setup.disabled_description")}>
<FormTextBox <FormTextBox
type="url" type="url"
@ -98,11 +98,6 @@ function DisabledWebView({ note, url }: { note: FNote, url: string }) {
onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)} onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)}
primary primary
/> />
<LinkButton
text="Learn more"
onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
/>
</SetupForm> </SetupForm>
); );
} }

14
apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx
View File

@ -3,19 +3,31 @@ import "./SetupForm.css";
import clsx from "clsx"; import clsx from "clsx";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import { t } from "../../../services/i18n";
import { openInAppHelpFromUrl } from "../../../services/utils";
import LinkButton from "../../react/LinkButton";
interface SetupFormProps { interface SetupFormProps {
icon: string; icon: string;
onSubmit?: () => void; onSubmit?: () => void;
children: ComponentChildren; children: ComponentChildren;
inAppHelpPage?: string;
} }
export default function SetupForm({ icon, children, onSubmit }: SetupFormProps) { export default function SetupForm({ icon, children, onSubmit, inAppHelpPage }: SetupFormProps) {
return ( return (
<div class="setup-form"> <div class="setup-form">
<form class="tn-centered-form" onSubmit={onSubmit}> <form class="tn-centered-form" onSubmit={onSubmit}>
<span className={clsx(icon, "form-icon")} /> <span className={clsx(icon, "form-icon")} />
{children} {children}
{inAppHelpPage && (
<LinkButton
text={t("setup_form.more_info")}
onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
/>
)}
</form> </form>
</div> </div>
); );