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

feat(breadcrumb_badges): add colors to the badges

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 09:38:55 +02:00
parent 61592716f9
commit b014ea8950
No known key found for this signature in database
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,15 +9,19 @@
padding: 2px 6px; padding: 2px 6px;
border-radius: 12px; border-radius: 12px;
font-size: 0.75em; font-size: 0.75em;
background-color: var(--badge-background-color); background-color: var(--color, --badge-background-color);
color: var(--badge-text-color); color: white;
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--badge-background-hover-color); background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
} }
} }
&.temporarily-editable-badge { --color: #4fa52b; }
&.read-only-badge { --color: #e33f3b; }
&.share-badge { --color: #3b82f6; }
} }
} }

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

@ -28,6 +28,7 @@ function ReadOnlyBadge() {
return <Badge return <Badge
icon="bx bx-lock-open-alt" icon="bx bx-lock-open-alt"
tooltip={t("breadcrumb_badges.read_only_temporarily_disabled_description")} tooltip={t("breadcrumb_badges.read_only_temporarily_disabled_description")}
className="temporarily-editable-badge"
onClick={() => enableEditing(false)} onClick={() => enableEditing(false)}
> >
{t("breadcrumb_badges.read_only_temporarily_disabled")} {t("breadcrumb_badges.read_only_temporarily_disabled")}
@ -36,6 +37,7 @@ function ReadOnlyBadge() {
return <Badge return <Badge
icon="bx bx-lock-alt" icon="bx bx-lock-alt"
tooltip={isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit_description") : t("breadcrumb_badges.read_only_auto_description")} tooltip={isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit_description") : t("breadcrumb_badges.read_only_auto_description")}
className="read-only-badge"
onClick={() => enableEditing()} onClick={() => enableEditing()}
> >
{isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit") : t("breadcrumb_badges.read_only_auto")} {isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit") : t("breadcrumb_badges.read_only_auto")}
@ -54,6 +56,7 @@ function ShareBadge() {
t("breadcrumb_badges.shared_publicly_description", { link }) : t("breadcrumb_badges.shared_publicly_description", { link }) :
t("breadcrumb_badges.shared_locally_description", { link }) t("breadcrumb_badges.shared_locally_description", { link })
} }
className="share-badge"
onClick={(e) => linkHref && goToLinkExt(e, linkHref)} onClick={(e) => linkHref && goToLinkExt(e, linkHref)}
> >
{isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")} {isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
@ -61,7 +64,7 @@ function ShareBadge() {
); );
} }
function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) { function Badge({ icon, className, children, tooltip, onClick }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
useStaticTooltip(containerRef, { useStaticTooltip(containerRef, {
placement: "bottom", placement: "bottom",
@ -74,7 +77,7 @@ function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: st
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className={clsx("breadcrumb-badge", { "clickable": !!onClick })} className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
onClick={onClick} onClick={onClick}
> >
<Icon icon={icon} />&nbsp; <Icon icon={icon} />&nbsp;