dnviti/zentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve dark mode compatibility and use theme palette tokens for editor components

Browse Source
This commit is contained in:
Daniele Viti
2025-12-03 02:10:24 +01:00
parent 6666d1ddec
commit 92330b75c6
6 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/src/components/reportEditor/DataBindingPanel.tsx
View File

@@ -220,7 +220,7 @@ export default function DataBindingPanel({
borderRight: embedded ? 0 : isMobile ? 0 : 1, borderRight: embedded ? 0 : isMobile ? 0 : 1,
borderColor: "divider", borderColor: "divider",
p: 3, p: 3,
bgcolor: embedded ? "transparent" : "grey.50", bgcolor: embedded ? "transparent" : "background.default",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
@@ -229,7 +229,7 @@ export default function DataBindingPanel({
height: "100%", height: "100%",
}} }}
> >
<TableIcon sx={{ fontSize: 48, color: "grey.400", mb: 2 }} /> <TableIcon sx={{ fontSize: 48, color: "text.disabled", mb: 2 }} />
<Typography variant="subtitle2" color="text.secondary" gutterBottom> <Typography variant="subtitle2" color="text.secondary" gutterBottom>
Nessun Dataset Selezionato Nessun Dataset Selezionato
</Typography> </Typography>
@@ -384,7 +384,7 @@ export default function DataBindingPanel({
<List key={groupKey} dense disablePadding> <List key={groupKey} dense disablePadding>
<ListItemButton <ListItemButton
onClick={() => toggleExpand(groupKey)} onClick={() => toggleExpand(groupKey)}
sx={{ pl: 2, bgcolor: "grey.50" }} sx={{ pl: 2, bgcolor: "action.hover" }}
> >
<ListItemText <ListItemText
primary={groupName} primary={groupName}
@@ -746,7 +746,7 @@ export default function DataBindingPanel({
p: 1.5, p: 1.5,
borderTop: 1, borderTop: 1,
borderColor: "divider", borderColor: "divider",
bgcolor: "grey.50", bgcolor: "background.default",
}} }}
> >
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary">

8
src/frontend/src/components/reportEditor/DatasetSelector.tsx
View File

@@ -169,7 +169,7 @@ export default function DatasetSelector({
sx={{ sx={{
borderBottom: 1, borderBottom: 1,
borderColor: "divider", borderColor: "divider",
bgcolor: "grey.50", bgcolor: "background.default",
}} }}
> >
{/* Header - always visible */} {/* Header - always visible */}
@@ -261,7 +261,7 @@ export default function DatasetSelector({
<Box key={category}> <Box key={category}>
<ListSubheader <ListSubheader
sx={{ sx={{
bgcolor: "grey.100", bgcolor: "action.hover",
lineHeight: "28px", lineHeight: "28px",
fontSize: "0.7rem", fontSize: "0.7rem",
fontWeight: 600, fontWeight: 600,
@@ -322,7 +322,7 @@ export default function DatasetSelector({
p: isTablet ? 1 : 1.5, p: isTablet ? 1 : 1.5,
borderBottom: 1, borderBottom: 1,
borderColor: "divider", borderColor: "divider",
bgcolor: "grey.50", bgcolor: "background.default",
flexWrap: "wrap", flexWrap: "wrap",
minHeight: isTablet ? 44 : 52, minHeight: isTablet ? 44 : 52,
}} }}
@@ -412,7 +412,7 @@ export default function DatasetSelector({
<Box key={category}> <Box key={category}>
<ListSubheader <ListSubheader
sx={{ sx={{
bgcolor: "grey.100", bgcolor: "action.hover",
lineHeight: "32px", lineHeight: "32px",
fontSize: "0.75rem", fontSize: "0.75rem",
fontWeight: 600, fontWeight: 600,

26
src/frontend/src/components/reportEditor/EditorCanvas.tsx
View File

@@ -6,7 +6,7 @@ import {
useImperativeHandle, useImperativeHandle,
useState, useState,
} from "react"; } from "react";
import { Box, Typography, Fade } from "@mui/material"; import { Box, Typography, Fade, useTheme } from "@mui/material";
import * as fabric from "fabric"; import * as fabric from "fabric";
import type { import type {
ZrtTemplate, ZrtTemplate,
@@ -135,6 +135,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
// UI State // UI State
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 }); const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
const theme = useTheme();
// Calculate canvas dimensions // Calculate canvas dimensions
const pageDims = getPageDimensions( const pageDims = getPageDimensions(
@@ -1091,6 +1092,18 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
fabricRef.current.renderAll(); fabricRef.current.renderAll();
}, [zoom, canvasWidth, canvasHeight]); }, [zoom, canvasWidth, canvasHeight]);
// Update canvas background based on theme
useEffect(() => {
if (!fabricRef.current) return;
const isDark = theme.palette.mode === 'dark';
// Use theme paper color for dark mode, white for light mode
const bgColor = isDark ? '#1e1e1e' : '#ffffff';
fabricRef.current.backgroundColor = bgColor;
fabricRef.current.renderAll();
}, [theme.palette.mode]);
// Render grid // Render grid
useEffect(() => { useEffect(() => {
if (!fabricRef.current) return; if (!fabricRef.current) return;
@@ -1103,12 +1116,14 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
if (showGrid) { if (showGrid) {
const gridPx = mmToPx(gridSize); const gridPx = mmToPx(gridSize);
const isDark = theme.palette.mode === 'dark';
const gridColor = isDark ? '#333333' : '#e0e0e0';
for (let x = 0; x <= canvasWidth; x += gridPx) { for (let x = 0; x <= canvasWidth; x += gridPx) {
const line = new fabric.Line( const line = new fabric.Line(
[x * zoom, 0, x * zoom, canvasHeight * zoom], [x * zoom, 0, x * zoom, canvasHeight * zoom],
{ {
stroke: "#e0e0e0", stroke: gridColor,
strokeWidth: 1, strokeWidth: 1,
selectable: false, selectable: false,
evented: false, evented: false,
@@ -1124,7 +1139,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
const line = new fabric.Line( const line = new fabric.Line(
[0, y * zoom, canvasWidth * zoom, y * zoom], [0, y * zoom, canvasWidth * zoom, y * zoom],
{ {
stroke: "#e0e0e0", stroke: gridColor,
strokeWidth: 1, strokeWidth: 1,
selectable: false, selectable: false,
evented: false, evented: false,
@@ -1138,7 +1153,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
} }
fabricRef.current.renderAll(); fabricRef.current.renderAll();
}, [showGrid, gridSize, zoom, canvasWidth, canvasHeight]); }, [showGrid, gridSize, zoom, canvasWidth, canvasHeight, theme.palette.mode]);
// Render margins // Render margins
useEffect(() => { useEffect(() => {
@@ -1526,7 +1541,8 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
bgcolor: "#f5f5f5", bgcolor: (theme) =>
theme.palette.mode === "dark" ? "#121212" : "#f5f5f5",
p: 3, p: 3,
position: "relative", position: "relative",
}} }}

26
src/frontend/src/components/reportEditor/EditorToolbar.tsx
View File

@@ -557,7 +557,7 @@ export default function EditorToolbar({
onClick={(e) => setPageMenuAnchor(e.currentTarget)} onClick={(e) => setPageMenuAnchor(e.currentTarget)}
endIcon={<DropdownIcon />} endIcon={<DropdownIcon />}
sx={{ sx={{
bgcolor: "grey.100", bgcolor: "action.hover",
borderRadius: 1.5, borderRadius: 1.5,
textTransform: "none", textTransform: "none",
fontFamily: "monospace", fontFamily: "monospace",
@@ -627,7 +627,7 @@ export default function EditorToolbar({
minWidth: 55, minWidth: 55,
fontFamily: "monospace", fontFamily: "monospace",
fontWeight: 600, fontWeight: 600,
bgcolor: "grey.100", bgcolor: "action.hover",
borderRadius: 1, borderRadius: 1,
}} }}
> >
@@ -991,7 +991,7 @@ export default function EditorToolbar({
minWidth: 55, minWidth: 55,
fontFamily: "monospace", fontFamily: "monospace",
fontWeight: 600, fontWeight: 600,
bgcolor: "grey.100", bgcolor: "action.hover",
borderRadius: 1.5, borderRadius: 1.5,
}} }}
> >
@@ -1021,7 +1021,7 @@ export default function EditorToolbar({
sx={{ sx={{
fontFamily: "monospace", fontFamily: "monospace",
fontWeight: 600, fontWeight: 600,
bgcolor: "grey.100", bgcolor: "action.hover",
borderRadius: 1.5, borderRadius: 1.5,
px: 1.5, px: 1.5,
}} }}
@@ -1505,14 +1505,14 @@ export default function EditorToolbar({
bgcolor: bgcolor:
activeSnapCount > 0 activeSnapCount > 0
? alpha(theme.palette.primary.main, 0.1) ? alpha(theme.palette.primary.main, 0.1)
: "grey.100", : "action.hover",
color: activeSnapCount > 0 ? "primary.main" : "text.primary", color: activeSnapCount > 0 ? "primary.main" : "text.primary",
px: 1.5, px: 1.5,
"&:hover": { "&:hover": {
bgcolor: bgcolor:
activeSnapCount > 0 activeSnapCount > 0
? alpha(theme.palette.primary.main, 0.2) ? alpha(theme.palette.primary.main, 0.2)
: "grey.200", : "action.selected",
}, },
}} }}
> >
@@ -1583,7 +1583,7 @@ export default function EditorToolbar({
mr: 1.5, mr: 1.5,
bgcolor: snapOptions[key] bgcolor: snapOptions[key]
? alpha(theme.palette.primary.main, 0.15) ? alpha(theme.palette.primary.main, 0.15)
: "grey.100", : "action.hover",
}} }}
> >
<Icon <Icon
@@ -1641,9 +1641,9 @@ export default function EditorToolbar({
textTransform: "none", textTransform: "none",
fontWeight: 600, fontWeight: 600,
fontFamily: "monospace", fontFamily: "monospace",
bgcolor: "grey.100", bgcolor: "action.hover",
color: "text.primary", color: "text.primary",
"&:hover": { bgcolor: "grey.200" }, "&:hover": { bgcolor: "action.selected" },
}} }}
> >
{Math.round(zoom * 100)}% {Math.round(zoom * 100)}%
@@ -1739,8 +1739,8 @@ export default function EditorToolbar({
px: 1.5, px: 1.5,
borderRadius: 1.5, borderRadius: 1.5,
textTransform: "none", textTransform: "none",
bgcolor: "grey.100", bgcolor: "action.hover",
"&:hover": { bgcolor: "grey.200" }, "&:hover": { bgcolor: "action.selected" },
}} }}
> >
<PageIcon <PageIcon
@@ -1821,9 +1821,9 @@ export default function EditorToolbar({
borderRadius: 2, borderRadius: 2,
textTransform: "none", textTransform: "none",
color: "text.secondary", color: "text.secondary",
bgcolor: "grey.100", bgcolor: "action.hover",
px: 2, px: 2,
"&:hover": { bgcolor: "grey.200" }, "&:hover": { bgcolor: "action.selected" },
}} }}
> >
Cerca... Cerca...

2
src/frontend/src/components/reportEditor/PropertiesPanel.tsx
View File

@@ -695,7 +695,7 @@ export default function PropertiesPanel({
sx={{ sx={{
width: "100%", width: "100%",
height: isMobile ? 100 : 120, height: isMobile ? 100 : 120,
bgcolor: "grey.100", bgcolor: "action.hover",
borderRadius: 1, borderRadius: 1,
overflow: "hidden", overflow: "hidden",
display: "flex", display: "flex",

4
src/frontend/src/pages/ReportEditorPage.tsx
View File

@@ -2017,7 +2017,9 @@ export default function ReportEditorPage() {
justifyContent: "flex-start", justifyContent: "flex-start",
overflow: "auto", overflow: "auto",
bgcolor: (theme) => bgcolor: (theme) =>
theme.palette.mode === "dark" ? "#1a1a1a" : "#e0e0e0", theme.palette.mode === "dark"
? theme.palette.background.default
: "#e0e0e0",
position: "relative", position: "relative",
}} }}
> >