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: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-11-20 19:11:51 +02:00
parent b0476c7017
commit e4c928ae87
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/client/src/menus/custom-items/NoteColorPicker.tsx
View File

@ -8,17 +8,17 @@ import Debouncer from "../../utils/debouncer";
import FNote from "../../entities/fnote";
import froca from "../../services/froca";
const COLORS = [
const COLOR_PALETTE = [
"#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
"#4de5e6", "#4d99e6", "#4d4de6", "#994de6", "#e64db3"
];
export interface NoteColorPickerMenuItemProps {
export interface NoteColorPickerProps {
/** The target Note instance or its ID string. */
note: FNote | string | null;
}
export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemProps) {
export default function NoteColorPicker(props: NoteColorPickerProps) {
if (!props.note) return null;
const [note, setNote] = useState<FNote | null>(null);
@ -43,14 +43,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
useEffect(() => {
const colorLabel = note?.getLabel("color")?.value ?? null;
if (colorLabel) {
let color: ColorInstance | null = null;
try {
color = new Color(colorLabel);
} catch(ex) {
console.error(ex);
}
let color = tryParseColor(colorLabel);
if (color) {
setCurrentColor(color.hex().toLowerCase());
}
@ -58,7 +51,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
}, [note]);
useEffect(() => {
setIsCustomColor(currentColor !== null && COLORS.indexOf(currentColor) === -1);
setIsCustomColor(currentColor !== null && COLOR_PALETTE.indexOf(currentColor) === -1);
}, [currentColor])
const onColorCellClicked = useCallback((color: string | null) => {
@ -84,7 +77,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
onSelect={onColorCellClicked} />
{COLORS.map((color) => (
{COLOR_PALETTE.map((color) => (
<ColorCell key={color}
tooltip={t("note-color.set-color")}
color={color}
@ -155,7 +148,7 @@ function CustomColorCell(props: ColorCellProps) {
colorInput.current?.click();
}, [pickedColor]);
return <div style={`--foreground: ${ensureContrast(props.color)};`}>
return <div style={`--foreground: ${getForegroundColor(props.color)};`}>
<ColorCell {...props}
color={pickedColor}
className={`custom-color-cell ${(pickedColor === null) ? "custom-color-cell-empty" : ""}`}
@ -170,17 +163,24 @@ function CustomColorCell(props: ColorCellProps) {
</div>
}
function ensureContrast(color: string | null) {
if (color === null) return "inherit";
function getForegroundColor(backgroundColor: string | null) {
if (backgroundColor === null) return "inherit";
const colorHsl = Color(color).hsl();
const colorHsl = tryParseColor(backgroundColor)?.hsl();
if (colorHsl) {
let l = colorHsl.lightness();
if (l >= 40) {
l = 0;
return colorHsl.saturationl(0).lightness(l >= 50 ? 0 : 100).hex();
} else {
l = 100
return "inherit";
}
}
function tryParseColor(colorStr: string): ColorInstance | null {
try {
return new Color(colorStr);
} catch(ex) {
console.error(ex);
}
return colorHsl.saturationl(0).lightness(l).hex();
return null;
}