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 14 Packages Projects Releases Wiki Activity

client/note color picker menu item: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-11-20 17:50:32 +02:00
parent c91eec8b3e
commit fb163367d4
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import FNote from "../../entities/fnote";
import froca from "../../services/froca"; import froca from "../../services/froca";
const COLORS = [ const COLORS = [
null, "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699", "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
"#4de5e6", "#4d99e6", "#4d4de6", "#994de6", "#e64db3" "#4de5e6", "#4d99e6", "#4d4de6", "#994de6", "#e64db3"
]; ];
@ -57,7 +57,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
}, [note]); }, [note]);
useEffect(() => { useEffect(() => {
setIsCustomColor(COLORS.indexOf(currentColor) === -1); setIsCustomColor(currentColor !== null && COLORS.indexOf(currentColor) === -1);
}, [currentColor]) }, [currentColor])
const onColorCellClicked = useCallback((color: string | null) => { const onColorCellClicked = useCallback((color: string | null) => {
@ -74,17 +74,25 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
return <div className="color-picker-menu-item" return <div className="color-picker-menu-item"
onClick={(e) => {e.stopPropagation()}}> onClick={(e) => {e.stopPropagation()}}>
<ColorCell className="color-cell-reset"
color={null}
isSelected={(currentColor === null)}
isDisabled={(note === null)}
onSelect={onColorCellClicked} />
{COLORS.map((color) => ( {COLORS.map((color) => (
<ColorCell key={color} <ColorCell key={color}
className={(color === null) ? "color-cell-reset" : undefined}
color={color} color={color}
isSelected={(color === currentColor)} isSelected={(color === currentColor)}
isDisabled={(note === null)} isDisabled={(note === null)}
onSelect={() => onColorCellClicked(color)} /> onSelect={onColorCellClicked} />
))} ))}
<CustomColorCell color={currentColor} <CustomColorCell color={currentColor}
isSelected={isCustomColor} isSelected={isCustomColor}
isDisabled={(note === null)}
onSelect={onColorCellClicked} /> onSelect={onColorCellClicked} />
</div> </div>
} }