gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-21 08:04:24 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

client/note color picker menu item: improve label handling

Browse Source
This commit is contained in:
Adorian Doran 2025-11-18 17:23:57 +02:00
parent d441bccf8b
commit 01d6dee9fc
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/menus/custom-items/NoteColorPickerMenuItem.tsx
View File

@ -4,7 +4,7 @@ import attributes from "../../services/attributes";
import FNote from "../../entities/fnote";
import froca from "../../services/froca";
const COLORS = ["blue", "green", "cyan", "red", "magenta", "brown", "yellow", ""];
const COLORS = ["blue", "green", "cyan", "red", "magenta", "brown", "yellow", null];
export interface NoteColorPickerMenuItemProps {
/** The target Note instance or its ID string. */
@ -33,17 +33,23 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
}, []);
useEffect(() => {
setCurrentColor(note?.getLabel("color")?.value ?? "");
setCurrentColor(note?.getLabel("color")?.value ?? null);
}, [note]);
const onColorCellClicked = (color: string) => {
const onColorCellClicked = (color: string | null) => {
if (note) {
attributes.setLabel(note.noteId, "color", color);
if (color !== null) {
attributes.setLabel(note.noteId, "color", color);
} else {
attributes.removeOwnedLabelByName(note, "color");
}
setCurrentColor(color);
}
}
return <div className="color-picker-menu-item">
return <div className="color-picker-menu-item"
onClick={(e) => {e.stopPropagation()}}>
{COLORS.map((color) => (
<ColorCell key={color}
color={color}
@ -55,7 +61,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
}
interface ColorCellProps {
color: string,
color: string | null,
isSelected: boolean,
isDisabled?: boolean,
onClick?: () => void
@ -63,7 +69,7 @@ interface ColorCellProps {
function ColorCell(props: ColorCellProps) {
return <div class={`color-cell ${props.isSelected ? "selected" : ""} ${props.isDisabled ? "disabled-color-cell" : ""}`}
style={`background-color: ${props.color}`}
style={`${(props.color !== null) ? `background-color: ${props.color}` : ""}`}
onClick={props.onClick}>
</div>;
}