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): 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;
border-radius: 12px;
font-size: 0.75em;
background-color: var(--badge-background-color);
color: var(--badge-text-color);
background-color: var(--color, --badge-background-color);
color: white;
&.clickable {
cursor: pointer;
&: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
icon="bx bx-lock-open-alt"
tooltip={t("breadcrumb_badges.read_only_temporarily_disabled_description")}
className="temporarily-editable-badge"
onClick={() => enableEditing(false)}
>
{t("breadcrumb_badges.read_only_temporarily_disabled")}
@ -36,6 +37,7 @@ function ReadOnlyBadge() {
return <Badge
icon="bx bx-lock-alt"
tooltip={isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit_description") : t("breadcrumb_badges.read_only_auto_description")}
className="read-only-badge"
onClick={() => enableEditing()}
>
{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_locally_description", { link })
}
className="share-badge"
onClick={(e) => linkHref && goToLinkExt(e, linkHref)}
>
{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);
useStaticTooltip(containerRef, {
placement: "bottom",
@ -74,7 +77,7 @@ function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: st
return (
<div
ref={containerRef}
className={clsx("breadcrumb-badge", { "clickable": !!onClick })}
className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
onClick={onClick}
>
<Icon icon={icon} />&nbsp;