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: tweak style

Browse Source
This commit is contained in:
Adorian Doran 2025-11-19 00:53:18 +02:00
parent c81aef6d05
commit 79dc5e4344
2 changed files with 71 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/client/src/menus/custom-items/NoteColorPickerMenuItem.css
View File

@ -1,19 +1,60 @@
.color-picker-menu-item {
display: flex;
gap: 10px;
gap: 8px;
justify-content: space-between;
}
.color-picker-menu-item > .color-cell {
width: 13px;
height: 13px;
.color-picker-menu-item .color-cell {
width: 14px;
height: 14px;
border-radius: 4px;
background: transparent;
background: var(--color);
}
.color-picker-menu-item > .color-cell.disabled-color-cell {
.color-picker-menu-item .color-cell.disabled-color-cell {
cursor: not-allowed;
}
.color-picker-menu-item > .color-cell.selected {
outline: 2px solid royalblue;
.color-picker-menu-item .color-cell.selected {
outline: 2px solid var(--color);
outline-offset: 2px;
}
.color-cell-reset::before,
.custom-color-cell::before {
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 14px;
justify-content: center;
align-items: center;
font-family: boxicons;
color: black;
}
.color-cell-reset {
position: relative;
--color: rgba(255, 255, 255, .4);
}
.color-cell-reset::before {
content: "\ec8d";
mix-blend-mode: normal;
color: black;
}
.custom-color-cell {
position: relative;
display: flex;
justify-content: center;
background: var(--color);
}
.custom-color-cell::before {
content: "\ed35";
color: var(--foreground);
font-size: 16px;
}

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

@ -2,13 +2,14 @@ import "./NoteColorPickerMenuItem.css";
import { useEffect, useRef, useState} from "preact/hooks";
import {ComponentChildren} from "preact";
import attributes from "../../services/attributes";
import Color, { ColorInstance } from "color";
import Debouncer from "../../utils/debouncer";
import FNote from "../../entities/fnote";
import froca from "../../services/froca";
const COLORS = [
"#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
"#4de5e6", "#4d99e6", "#4d4de6", "#994de6", null
null, "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
"#4de5e6", "#4d99e6", "#4d4de6", "#994de6"
];
export interface NoteColorPickerMenuItemProps {
@ -57,6 +58,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
onClick={(e) => {e.stopPropagation()}}>
{COLORS.map((color) => (
<ColorCell key={color}
className={(color === null) ? "color-cell-reset" : undefined}
color={color}
isSelected={(color === currentColor)}
isDisabled={(note === null)}
@ -78,7 +80,7 @@ interface ColorCellProps {
function ColorCell(props: ColorCellProps) {
return <div class={`color-cell ${props.isSelected ? "selected" : ""} ${props.isDisabled ? "disabled-color-cell" : ""} ${props.className ?? ""}`}
style={`${(props.color !== null) ? `background-color: ${props.color}` : ""}`}
style={`${(props.color !== null) ? `--color: ${props.color}` : ""}`}
onClick={() => props.onSelect?.(props.color)}>
{props.children}
</div>;
@ -98,7 +100,7 @@ function CustomColorCell(props: ColorCellProps) {
}
});
return <>
return <div style={`--foreground: ${ensureContrast(props.color)};`}>
<ColorCell {...props}
className="custom-color-cell"
onSelect={() => {colorInput.current?.click()}}>
@ -109,5 +111,20 @@ function CustomColorCell(props: ColorCellProps) {
onChange={() => {colorInputDebouncer.updateValue(colorInput.current?.value ?? null)}}
style="width: 0; height: 0; opacity: 0" />
</ColorCell>
</>
</div>
}
function ensureContrast(color: string | null) {
if (color === null) return "inherit";
const colorHsl = Color(color).hsl();
let l = colorHsl.lightness();
if (l >= 40) {
l = 0;
} else {
l = 100
}
return colorHsl.saturationl(0).lightness(l).hex();
}