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

feat(breadcrumb_badges): proper link handling support

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 09:47:05 +02:00
parent b014ea8950
commit 40b5e4d549
No known key found for this signature in database
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2138,8 +2138,8 @@
"read_only_temporarily_disabled": "Temporarily editable", "read_only_temporarily_disabled": "Temporarily editable",
"read_only_temporarily_disabled_description": "This note is currently editable, but it is normally read-only. The note will go back to being read-only as soon as you navigate to another note.\n\nClick to re-enable read-only mode.", "read_only_temporarily_disabled_description": "This note is currently editable, but it is normally read-only. The note will go back to being read-only as soon as you navigate to another note.\n\nClick to re-enable read-only mode.",
"shared_publicly": "Shared publicly", "shared_publicly": "Shared publicly",
"shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note.", "shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note or right click for more options.",
"shared_locally": "Shared locally", "shared_locally": "Shared locally",
"shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note." "shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note or right click for more options."
} }
} }

5
apps/client/src/widgets/BreadcrumbBadges.css
View File

@ -23,5 +23,10 @@
&.temporarily-editable-badge { --color: #4fa52b; } &.temporarily-editable-badge { --color: #4fa52b; }
&.read-only-badge { --color: #e33f3b; } &.read-only-badge { --color: #e33f3b; }
&.share-badge { --color: #3b82f6; } &.share-badge { --color: #3b82f6; }
a {
color: inherit;
text-decoration: none;
}
} }
} }

13
apps/client/src/widgets/BreadcrumbBadges.tsx
View File

@ -7,7 +7,6 @@ import { useShareInfo } from "./shared_info";
import clsx from "clsx"; import clsx from "clsx";
import { t } from "../services/i18n"; import { t } from "../services/i18n";
import { useRef } from "preact/hooks"; import { useRef } from "preact/hooks";
import { goToLinkExt } from "../services/link";
export default function BreadcrumbBadges() { export default function BreadcrumbBadges() {
return ( return (
@ -57,14 +56,14 @@ function ShareBadge() {
t("breadcrumb_badges.shared_locally_description", { link }) t("breadcrumb_badges.shared_locally_description", { link })
} }
className="share-badge" className="share-badge"
onClick={(e) => linkHref && goToLinkExt(e, linkHref)} href={linkHref}
> >
{isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")} {isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
</Badge> </Badge>
); );
} }
function Badge({ icon, className, children, tooltip, onClick }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) { function Badge({ icon, className, children, tooltip, onClick, href }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement>, href?: string }) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
useStaticTooltip(containerRef, { useStaticTooltip(containerRef, {
placement: "bottom", placement: "bottom",
@ -74,14 +73,18 @@ function Badge({ icon, className, children, tooltip, onClick }: { icon: string,
title: tooltip title: tooltip
}); });
const content = <>
<Icon icon={icon} />&nbsp;
{children}
</>;
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })} className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
onClick={onClick} onClick={onClick}
> >
<Icon icon={icon} />&nbsp; {href ? <a href={href}>{content}</a> : content}
{children}
</div> </div>
); );
} }