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

feat(breadcrumb): respect note color

Browse Source
This commit is contained in:
Elian Doran 2025-12-16 13:40:22 +02:00
parent 2693b18ee6
commit 0af5fa9f0c
No known key found for this signature in database
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/layout/Breadcrumb.css
View File

@ -26,7 +26,7 @@
}
a {
color: inherit;
color: var(--custom-color, inherit);
text-decoration: none;
min-width: 0;
max-width: 150px;

5
apps/client/src/widgets/react/NoteLink.tsx
View File

@ -3,7 +3,7 @@ import { HTMLAttributes } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
import link, { calculateHash, ViewScope } from "../../services/link";
import { useImperativeSearchHighlighlighting, useNote, useNoteIcon, useNoteProperty, useTriliumEvent } from "./hooks";
import { useImperativeSearchHighlighlighting, useNote, useNoteColorClass, useNoteIcon, useNoteProperty, useTriliumEvent } from "./hooks";
import Icon from "./Icon";
interface NoteLinkOpts {
@ -100,6 +100,7 @@ export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon,
const note = useNote(noteId);
const title = useNoteProperty(note, "title");
const icon = useNoteIcon(showNoteIcon ? note : null);
const colorClass = useNoteColorClass(note);
return (
<span>
@ -107,7 +108,7 @@ export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon,
{icon && <Icon icon={icon} />}
<a
className={clsx("tn-link", {
className={clsx("tn-link", colorClass, {
"no-tooltip-preview": noPreview
})}
href={calculateHash({ notePath, viewScope })}

9
apps/client/src/widgets/react/hooks.tsx
View File

@ -1061,3 +1061,12 @@ export function useNoteIcon(note: FNote | null | undefined) {
return icon;
}
export function useNoteColorClass(note: FNote | null | undefined) {
const [ colorClass, setColorClass ] = useState(note?.getColorClass());
const [ color ] = useNoteLabel(note, "color");
useEffect(() => {
setColorClass(note?.getColorClass());
}, [ color, note ]);
return colorClass;
}