diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index f5f96960a..270b58299 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2132,9 +2132,14 @@ }, "breadcrumb_badges": { "read_only_explicit": "Read-only", + "read_only_explicit_description": "This note has been manually set to read-only.\nClick to edit it temporarily.", "read_only_auto": "Auto read-only", + "read_only_auto_description": "This note was set automatically to read-only mode for performance reasons. This automatic limit is adjustable from settings.\n\nClick to edit it temporarily.", "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.", "shared_publicly": "Shared publicly", - "shared_locally": "Shared locally" + "shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note.", + "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." } } diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 2f00771f8..e4d0ef55e 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -1,11 +1,13 @@ import "./BreadcrumbBadges.css"; -import { ComponentChildren } from "preact"; -import { useIsNoteReadOnly, useNoteContext } from "./react/hooks"; +import { ComponentChildren, MouseEventHandler } from "preact"; +import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hooks"; import Icon from "./react/Icon"; import { useShareInfo } from "./shared_info"; import clsx from "clsx"; import { t } from "../services/i18n"; +import { useRef } from "preact/hooks"; +import { goToLinkExt } from "../services/link"; export default function BreadcrumbBadges() { return ( @@ -25,6 +27,7 @@ function ReadOnlyBadge() { if (isTemporarilyEditable) { return enableEditing(false)} > {t("breadcrumb_badges.read_only_temporarily_disabled")} @@ -32,7 +35,9 @@ function ReadOnlyBadge() { } else if (isReadOnly) { return enableEditing()}> + tooltip={isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit_description") : t("breadcrumb_badges.read_only_auto_description")} + onClick={() => enableEditing()} + > {isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit") : t("breadcrumb_badges.read_only_auto")} ; } @@ -40,20 +45,35 @@ function ReadOnlyBadge() { function ShareBadge() { const { note } = useNoteContext(); - const { isSharedExternally, link } = useShareInfo(note); + const { isSharedExternally, link, linkHref } = useShareInfo(note); return (link && linkHref && goToLinkExt(e, linkHref)} > {isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")} ); } -function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) { +function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler }) { + const containerRef = useRef(null); + useStaticTooltip(containerRef, { + placement: "bottom", + fallbackPlacements: [ "bottom" ], + animation: false, + html: true, + title: tooltip + }); + return (
diff --git a/apps/client/src/widgets/shared_info.tsx b/apps/client/src/widgets/shared_info.tsx index 954ceb5f0..cd6cf78f4 100644 --- a/apps/client/src/widgets/shared_info.tsx +++ b/apps/client/src/widgets/shared_info.tsx @@ -26,6 +26,7 @@ export default function SharedInfo() { export function useShareInfo(note: FNote | null | undefined) { const [ link, setLink ] = useState(); + const [ linkHref, setLinkHref ] = useState(); const [ syncServerHost ] = useTriliumOption("syncServerHost"); function refresh() { @@ -52,9 +53,10 @@ export function useShareInfo(note: FNote | null | undefined) { } setLink(`${link}`); + setLinkHref(link); } - useEffect(refresh, [ note ]); + useEffect(refresh, [ note, syncServerHost ]); useTriliumEvent("entitiesReloaded", ({ loadResults }) => { if (loadResults.getAttributeRows().find((attr) => attr.name?.startsWith("_share") && attributes.isAffecting(attr, note))) { refresh(); @@ -63,7 +65,7 @@ export function useShareInfo(note: FNote | null | undefined) { } }); - return { link, isSharedExternally: !!syncServerHost }; + return { link, linkHref, isSharedExternally: !!syncServerHost }; } function getShareId(note: FNote) {