gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-21 16:14:23 +01:00
Code Issues Actions 12 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

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