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,
borderColor: "divider",
p: 3,
bgcolor: embedded ? "transparent" : "grey.50",
bgcolor: embedded ? "transparent" : "background.default",
display: "flex",
flexDirection: "column",
alignItems: "center",
@@ -229,7 +229,7 @@ export default function DataBindingPanel({
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>
Nessun Dataset Selezionato
</Typography>
@@ -384,7 +384,7 @@ export default function DataBindingPanel({
<List key={groupKey} dense disablePadding>
<ListItemButton
onClick={() => toggleExpand(groupKey)}
sx={{ pl: 2, bgcolor: "grey.50" }}
sx={{ pl: 2, bgcolor: "action.hover" }}
>
<ListItemText
primary={groupName}
@@ -746,7 +746,7 @@ export default function DataBindingPanel({
p: 1.5,
borderTop: 1,
borderColor: "divider",
bgcolor: "grey.50",
bgcolor: "background.default",
}}
>
<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={{
borderBottom: 1,
borderColor: "divider",
bgcolor: "grey.50",
bgcolor: "background.default",
}}
>
{/* Header - always visible */}
@@ -261,7 +261,7 @@ export default function DatasetSelector({
<Box key={category}>
<ListSubheader
sx={{
bgcolor: "grey.100",
bgcolor: "action.hover",
lineHeight: "28px",
fontSize: "0.7rem",
fontWeight: 600,
@@ -322,7 +322,7 @@ export default function DatasetSelector({
p: isTablet ? 1 : 1.5,
borderBottom: 1,
borderColor: "divider",
bgcolor: "grey.50",
bgcolor: "background.default",
flexWrap: "wrap",
minHeight: isTablet ? 44 : 52,
}}
@@ -412,7 +412,7 @@ export default function DatasetSelector({
<Box key={category}>
<ListSubheader
sx={{
bgcolor: "grey.100",
bgcolor: "action.hover",
lineHeight: "32px",
fontSize: "0.75rem",
fontWeight: 600,

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

@@ -6,7 +6,7 @@ import {
useImperativeHandle,
useState,
} from "react";
import { Box, Typography, Fade } from "@mui/material";
import { Box, Typography, Fade, useTheme } from "@mui/material";
import * as fabric from "fabric";
import type {
ZrtTemplate,
@@ -135,6 +135,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
// UI State
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
const theme = useTheme();
// Calculate canvas dimensions
const pageDims = getPageDimensions(
@@ -1091,6 +1092,18 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
fabricRef.current.renderAll();
}, [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
useEffect(() => {
if (!fabricRef.current) return;
@@ -1103,12 +1116,14 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
if (showGrid) {
const gridPx = mmToPx(gridSize);
const isDark = theme.palette.mode === 'dark';
const gridColor = isDark ? '#333333' : '#e0e0e0';
for (let x = 0; x <= canvasWidth; x += gridPx) {
const line = new fabric.Line(
[x * zoom, 0, x * zoom, canvasHeight * zoom],
{
stroke: "#e0e0e0",
stroke: gridColor,
strokeWidth: 1,
selectable: false,
evented: false,
@@ -1124,7 +1139,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
const line = new fabric.Line(
[0, y * zoom, canvasWidth * zoom, y * zoom],
{
stroke: "#e0e0e0",
stroke: gridColor,
strokeWidth: 1,
selectable: false,
evented: false,
@@ -1138,7 +1153,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
}
fabricRef.current.renderAll();
}, [showGrid, gridSize, zoom, canvasWidth, canvasHeight]);
}, [showGrid, gridSize, zoom, canvasWidth, canvasHeight, theme.palette.mode]);
// Render margins
useEffect(() => {
@@ -1526,7 +1541,8 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
bgcolor: "#f5f5f5",
bgcolor: (theme) =>
theme.palette.mode === "dark" ? "#121212" : "#f5f5f5",
p: 3,
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)}
endIcon={<DropdownIcon />}
sx={{
bgcolor: "grey.100",
bgcolor: "action.hover",
borderRadius: 1.5,
textTransform: "none",
fontFamily: "monospace",
@@ -627,7 +627,7 @@ export default function EditorToolbar({
minWidth: 55,
fontFamily: "monospace",
fontWeight: 600,
bgcolor: "grey.100",
bgcolor: "action.hover",
borderRadius: 1,
}}
>
@@ -991,7 +991,7 @@ export default function EditorToolbar({
minWidth: 55,
fontFamily: "monospace",
fontWeight: 600,
bgcolor: "grey.100",
bgcolor: "action.hover",
borderRadius: 1.5,
}}
>
@@ -1021,7 +1021,7 @@ export default function EditorToolbar({
sx={{
fontFamily: "monospace",
fontWeight: 600,
bgcolor: "grey.100",
bgcolor: "action.hover",
borderRadius: 1.5,
px: 1.5,
}}
@@ -1505,14 +1505,14 @@ export default function EditorToolbar({
bgcolor:
activeSnapCount > 0
? alpha(theme.palette.primary.main, 0.1)
: "grey.100",
: "action.hover",
color: activeSnapCount > 0 ? "primary.main" : "text.primary",
px: 1.5,
"&:hover": {
bgcolor:
activeSnapCount > 0
? alpha(theme.palette.primary.main, 0.2)
: "grey.200",
: "action.selected",
},
}}
>
@@ -1583,7 +1583,7 @@ export default function EditorToolbar({
mr: 1.5,
bgcolor: snapOptions[key]
? alpha(theme.palette.primary.main, 0.15)
: "grey.100",
: "action.hover",
}}
>
<Icon
@@ -1641,9 +1641,9 @@ export default function EditorToolbar({
textTransform: "none",
fontWeight: 600,
fontFamily: "monospace",
bgcolor: "grey.100",
bgcolor: "action.hover",
color: "text.primary",
"&:hover": { bgcolor: "grey.200" },
"&:hover": { bgcolor: "action.selected" },
}}
>
{Math.round(zoom * 100)}%
@@ -1739,8 +1739,8 @@ export default function EditorToolbar({
px: 1.5,
borderRadius: 1.5,
textTransform: "none",
bgcolor: "grey.100",
"&:hover": { bgcolor: "grey.200" },
bgcolor: "action.hover",
"&:hover": { bgcolor: "action.selected" },
}}
>
<PageIcon
@@ -1821,9 +1821,9 @@ export default function EditorToolbar({
borderRadius: 2,
textTransform: "none",
color: "text.secondary",
bgcolor: "grey.100",
bgcolor: "action.hover",
px: 2,
"&:hover": { bgcolor: "grey.200" },
"&:hover": { bgcolor: "action.selected" },
}}
>
Cerca...

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

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

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

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