DiogoVieira14/litoral-central-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds chart title to window, adds light mode to chartswindowpage

Browse Source
This commit is contained in:
litoral05
2026-05-28 08:51:22 +01:00
parent c54c2c6518
commit 65b419c5ca
4 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/App.tsx
+4 -1
View File
@@ -34,7 +34,10 @@ function App() {
const isChartWindow = window.location.pathname.startsWith("/chart-window/");
if (isChartWindow) {
return <ChartWindowPage theme="dark" />;
const params = new URLSearchParams(window.location.search);
const theme = params.get("theme") === "light" ? "light" : "dark";
return <ChartWindowPage theme={theme} />;
}
return (
src/features/maincharts/pages/ChartWindowPage.tsx
+41 -36
View File
@@ -39,6 +39,7 @@ type ChartWindowPageProps = {
};
export function ChartWindowPage({ theme }: ChartWindowPageProps) {
const isDark = theme === "dark";
const parts = window.location.pathname.split("/").filter(Boolean);
const chartId = parts[parts.length - 1] ?? "";
@@ -48,9 +49,20 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
const [configOpen, setConfigOpen] = useState(false);
const currentWindow = getCurrentWindow();
const latestChartRef = useRef<ChartWorkspaceItem | null>(null);
const titleBarClass = isDark
? "flex h-9 shrink-0 items-center bg-[#1F232A] text-[#D7DEE8]"
: "flex h-9 shrink-0 items-center border-b border-[#D7DEE8] bg-white text-[#0F172A]";
const titleButtonClass = isDark
? "grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
: "grid h-9 w-11 place-items-center text-slate-500 transition hover:bg-[#F8FAFC] hover:text-[#0F172A]";
const closeButtonClass = isDark
? "grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-red-500 hover:text-white"
: "grid h-9 w-11 place-items-center text-slate-500 transition hover:bg-red-500 hover:text-white";
useChartWorkspacePersistence({
scope: "GLOBAL",
layoutMode: "fourGrid",
@@ -184,7 +196,13 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
if (!chart) {
return (
<div className="flex h-screen items-center justify-center bg-[#07101B] text-sm font-bold text-[#7F8CA3]">
<div
className={
isDark
? "flex h-screen items-center justify-center bg-[#07101B] text-sm font-bold text-[#7F8CA3]"
: "flex h-screen items-center justify-center bg-white text-sm font-bold text-slate-500"
}
>
Gráfico não encontrado.
</div>
);
@@ -219,64 +237,51 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
};
return (
<div className="flex h-screen flex-col overflow-hidden bg-[#07101B] text-white">
<header className="flex h-9 shrink-0 items-center bg-[#1F232A] text-[#D7DEE8]">
<div
className={
isDark
? "flex h-screen flex-col overflow-hidden bg-[#07101B] text-white"
: "flex h-screen flex-col overflow-hidden bg-white text-[#0F172A]"
}
>
<header className={titleBarClass}>
<div
data-tauri-drag-region
className="flex h-full flex-1 items-center px-3 text-xs font-semibold"
className="flex h-full flex-1 items-center px-3 text-xs font-black"
>
{chart.title}
</div>
<div className="flex h-full items-center">
<button
type="button"
title="Configurar"
onClick={() => setConfigOpen(true)}
className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
>
<button type="button" title="Configurar" onClick={() => setConfigOpen(true)} className={titleButtonClass}>
<Cog className="h-4 w-4" />
</button>
<button
type="button"
title="Repor no grid"
onClick={attachAndClose}
className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
>
<button type="button" title="Repor no grid" onClick={attachAndClose} className={titleButtonClass}>
<PanelTop className="h-4 w-4" />
</button>
<button
type="button"
title="Minimizar"
onClick={() => currentWindow.minimize()}
className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
>
<button type="button" title="Minimizar" onClick={() => currentWindow.minimize()} className={titleButtonClass}>
<Minus className="h-4 w-4" />
</button>
<button
type="button"
title="Maximizar"
onClick={() => currentWindow.toggleMaximize()}
className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
>
<button type="button" title="Maximizar" onClick={() => currentWindow.toggleMaximize()} className={titleButtonClass}>
<Square className="h-3.5 w-3.5" />
</button>
<button
type="button"
title="Fechar"
onClick={closeAndHide}
className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-red-500 hover:text-white"
>
<button type="button" title="Fechar" onClick={closeAndHide} className={closeButtonClass}>
<X className="h-4 w-4" />
</button>
</div>
</header>
<main className="min-h-0 flex-1 bg-[#07101B] [&>section]:h-full [&>section]:rounded-none [&>section]:border-0">
<main
className={
isDark
? "min-h-0 flex-1 bg-[#07101B] [&>section]:h-full [&>section]:rounded-none [&>section]:border-0"
: "min-h-0 flex-1 bg-white [&>section]:h-full [&>section]:rounded-none [&>section]:border-0 [&>section]:shadow-none"
}
>
<WorkspaceChart
theme={theme}
chart={chartConfig}
src/features/maincharts/pages/MainChartsPage.tsx
+7 -1
View File
@@ -392,7 +392,13 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
);
window.setTimeout(() => {
void openChartWindow(chartId);
const chart = charts.find((item) => item.id === chartId);
void openChartWindow(
chartId,
theme,
chart?.title ?? "Chart",
);
}, 100);
};
src/features/maincharts/utils/openChartWindow.ts
+7 -3
View File
@@ -1,6 +1,10 @@
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
export async function openChartWindow(chartId: string) {
export async function openChartWindow(
chartId: string,
theme: "dark" | "light",
title: string,
) {
const label = `chart-${chartId}`;
const existing = await WebviewWindow.getByLabel(label);
@@ -12,9 +16,9 @@ export async function openChartWindow(chartId: string) {
}
const chartWindow = new WebviewWindow(label, {
url: `/chart-window/${chartId}`,
url: `/chart-window/${chartId}?theme=${theme}`,
title: "Chart",
title,
width: 920,
height: 680,