okooooooo/edgeever
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(diagram): simplify theme picker into a clean flat list

Browse Source
This commit is contained in:
tianma-if committed 2026-09-11 11:20:59 +08:00
1 parent cc32f2f1bd
commit 2295c286f6
2 files changed
+27 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/components/DiagramEditorPane.test.mjs
+3 -3
View File
@@ -166,7 +166,7 @@ describe("diagram editor canvas surface", () => {
});
test("uses restrained rounded edges and fits the complete diagram without clipping", () => {
expect(toolbarSource).toContain("DIAGRAM_THEME_GROUPS");
expect(toolbarSource).toContain("DIAGRAM_SELECTABLE_THEMES");
expect(toolbarSource).toContain("DIAGRAM_STRUCTURE_GROUPS");
expect(toolbarSource).toContain("diagramThemeSwatches");
expect(toolbarSource).toContain("<StructureThumb");
@@ -176,7 +176,7 @@ describe("diagram editor canvas surface", () => {
expect(toolbarSource).toContain('structure === "org"');
expect(toolbarSource).toContain('structure === "timeline"');
expect(toolbarSource).toContain('structure === "fishbone"');
expect(toolbarSource).toContain("diagram.themeGroupVivid");
expect(toolbarSource).not.toContain("diagram.themeGroupVivid");
expect(toolbarSource).toContain('<TooltipContent>{t("diagram.theme")}</TooltipContent>');
expect(toolbarSource).not.toContain('value="ocean"');
expect(toolbarSource).not.toContain('value="ink"');
@@ -191,7 +191,7 @@ describe("diagram editor canvas surface", () => {
expect(source).toContain('themeCatalog={document.kind === "flowchart" ? "flowchart" : "mind-map"}');
expect(toolbarSource).toContain("showTheme = true");
expect(toolbarSource).toContain("themeCatalog = \"mind-map\"");
expect(toolbarSource).toContain("FLOWCHART_THEME_GROUPS");
expect(toolbarSource).toContain("FLOWCHART_SELECTABLE_THEMES");
expect(toolbarSource).toContain("flowchartThemeSwatches");
expect(source).toContain("maxScale: policy.maxScale");
expect(source).not.toContain("minScale: policy.minScale");
apps/web/src/components/DiagramToolbar.tsx
+24 -29
View File
@@ -17,8 +17,8 @@ import { useTranslation } from "react-i18next";
import {
DIAGRAM_SELECTABLE_STRUCTURES,
DIAGRAM_STRUCTURE_GROUPS,
DIAGRAM_THEME_GROUPS,
FLOWCHART_THEME_GROUPS,
DIAGRAM_SELECTABLE_THEMES,
FLOWCHART_SELECTABLE_THEMES,
diagramThemeSwatches,
flowchartThemeSwatches,
resolveDiagramTheme,
@@ -356,33 +356,28 @@ export const DiagramToolbar = ({
</TooltipTrigger>
<TooltipContent>{t("diagram.theme")}</TooltipContent>
</Tooltip>
<DropdownMenuContent align="start" className="max-h-[min(36rem,70vh)] w-[18.5rem] overflow-y-auto p-3">
{(["vivid", "classic"] as const).map((group) => (
<div key={group} className="mb-3 last:mb-0">
<div className="mb-1.5 text-xs font-medium text-slate-500">{t(group === "vivid" ? "diagram.themeGroupVivid" : "diagram.themeGroupClassic")}</div>
<div className="grid grid-cols-1 gap-1.5">
{(themeCatalog === "flowchart" ? FLOWCHART_THEME_GROUPS[group] : DIAGRAM_THEME_GROUPS[group]).map((value) => (
<DropdownMenuItem
key={value}
className={cn(
"h-auto items-center gap-3 rounded-lg border px-2 py-1.5",
(themeCatalog === "flowchart" ? resolveFlowchartTheme(theme) === value : theme === value)
? "border-slate-900 bg-slate-50"
: "border-transparent",
)}
onSelect={() => onThemeChange(value)}
>
<span className="flex h-5 flex-1 overflow-hidden rounded-md border border-black/10">
{(themeCatalog === "flowchart" ? flowchartThemeSwatches(value) : diagramThemeSwatches(value)).map((color) => (
<span key={`${value}-${color}`} className="h-full flex-1" style={{ background: color }} />
))}
</span>
<span className="w-10 shrink-0 text-xs text-slate-600">{t(`diagram.theme${value.charAt(0).toUpperCase()}${value.slice(1)}` as "diagram.themeBrand")}</span>
</DropdownMenuItem>
))}
</div>
</div>
))}
<DropdownMenuContent align="start" className="max-h-[min(36rem,70vh)] w-[18.5rem] overflow-y-auto p-2">
<div className="grid grid-cols-1 gap-1">
{(themeCatalog === "flowchart" ? FLOWCHART_SELECTABLE_THEMES : DIAGRAM_SELECTABLE_THEMES).map((value) => (
<DropdownMenuItem
key={value}
className={cn(
"h-auto items-center gap-3 rounded-lg border px-2 py-1.5",
(themeCatalog === "flowchart" ? resolveFlowchartTheme(theme) === value : theme === value)
? "border-slate-900 bg-slate-50"
: "border-transparent",
)}
onSelect={() => onThemeChange(value)}
>
<span className="flex h-5 flex-1 overflow-hidden rounded-md border border-black/10">
{(themeCatalog === "flowchart" ? flowchartThemeSwatches(value) : diagramThemeSwatches(value)).map((color) => (
<span key={`${value}-${color}`} className="h-full flex-1" style={{ background: color }} />
))}
</span>
<span className="w-10 shrink-0 text-xs text-slate-600">{t(`diagram.theme${value.charAt(0).toUpperCase()}${value.slice(1)}` as "diagram.themeBrand")}</span>
</DropdownMenuItem>
))}
</div>
</DropdownMenuContent>
</DropdownMenu>
) : null}