gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-29 03:54:24 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix(mobile/context_menu): note color picker not working
Some checks are pending
Checks / main (push) Waiting to run
Details
CodeQL Advanced / Analyze (actions) (push) Waiting to run
Details
CodeQL Advanced / Analyze (javascript-typescript) (push) Waiting to run
Details
Dev / Test development (push) Waiting to run
Details
Dev / Build Docker image (push) Blocked by required conditions
Details
Dev / Check Docker build (Dockerfile) (push) Blocked by required conditions
Details
Dev / Check Docker build (Dockerfile.alpine) (push) Blocked by required conditions
Details
/ Check Docker build (Dockerfile) (push) Waiting to run
Details
/ Check Docker build (Dockerfile.alpine) (push) Waiting to run
Details
/ Build Docker images (Dockerfile, ubuntu-24.04-arm, linux/arm64) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.alpine, ubuntu-latest, linux/amd64) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.legacy, ubuntu-24.04-arm, linux/arm/v7) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.legacy, ubuntu-24.04-arm, linux/arm/v8) (push) Blocked by required conditions
Details
/ Merge manifest lists (push) Blocked by required conditions
Details
playwright / E2E tests on linux-arm64 (push) Waiting to run
Details
playwright / E2E tests on linux-x64 (push) Waiting to run
Details

Browse Source
This commit is contained in:
Elian Doran 2025-11-28 23:43:16 +02:00
parent 19cf07564f
commit 3cc64b5764
No known key found for this signature in database
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import Color, { ColorInstance } from "color";
import Debouncer from "../../utils/debouncer"; import Debouncer from "../../utils/debouncer";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import froca from "../../services/froca"; import froca from "../../services/froca";
import { isMobile } from "../../services/utils";
const COLOR_PALETTE = [ const COLOR_PALETTE = [
"#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699", "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
@ -62,13 +63,13 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
} else { } else {
attributes.removeOwnedLabelByName(note, "color"); attributes.removeOwnedLabelByName(note, "color");
} }
setCurrentColor(color); setCurrentColor(color);
} }
}, [note, currentColor]); }, [note, currentColor]);
return <div className="note-color-picker"> return <div className="note-color-picker">
<ColorCell className="color-cell-reset" <ColorCell className="color-cell-reset"
tooltip={t("note-color.clear-color")} tooltip={t("note-color.clear-color")}
color={null} color={null}
@ -81,8 +82,8 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /> <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg> </svg>
</ColorCell> </ColorCell>
{COLOR_PALETTE.map((color) => ( {COLOR_PALETTE.map((color) => (
<ColorCell key={color} <ColorCell key={color}
tooltip={t("note-color.set-color")} tooltip={t("note-color.set-color")}
@ -128,7 +129,6 @@ function CustomColorCell(props: ColorCellProps) {
const colorInput = useRef<HTMLInputElement>(null); const colorInput = useRef<HTMLInputElement>(null);
const colorInputDebouncer = useRef<Debouncer<string | null> | null>(null); const colorInputDebouncer = useRef<Debouncer<string | null> | null>(null);
const callbackRef = useRef(props.onSelect); const callbackRef = useRef(props.onSelect);
const isSafari = useRef(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
useEffect(() => { useEffect(() => {
colorInputDebouncer.current = new Debouncer(250, (color) => { colorInputDebouncer.current = new Debouncer(250, (color) => {
@ -160,13 +160,13 @@ function CustomColorCell(props: ColorCellProps) {
}, [pickedColor]); }, [pickedColor]);
return <div style={`--foreground: ${getForegroundColor(props.color)};`} return <div style={`--foreground: ${getForegroundColor(props.color)};`}
onClick={(e) => { onClick={isMobile() ? (e) => {
// The color picker dropdown will close on Safari if the parent context menu is // The color picker dropdown will close on some browser if the parent context menu is
// dismissed, so stop the click propagation to prevent dismissing the menu. // dismissed, so stop the click propagation to prevent dismissing the menu.
isSafari.current && e.stopPropagation(); e.stopPropagation();
}}> } : undefined}>
<ColorCell {...props} <ColorCell {...props}
color={pickedColor} color={pickedColor}
className={clsx("custom-color-cell", { className={clsx("custom-color-cell", {
"custom-color-cell-empty": (pickedColor === null) "custom-color-cell-empty": (pickedColor === null)
})} })}
@ -201,4 +201,4 @@ function tryParseColor(colorStr: string): ColorInstance | null {
} }
return null; return null;
} }