design: align layout-mockup previews with 100% precision to your actual Lattice CRM templates
This commit is contained in:
@@ -174,16 +174,15 @@ function EntrepType({ value, onChange }) {
|
|||||||
|
|
||||||
function LayoutPreview({ styleId }: { styleId: string }) {
|
function LayoutPreview({ styleId }: { styleId: string }) {
|
||||||
// Styles are 100% width, 104px tall absolute layouts resembling the wireframes.
|
// Styles are 100% width, 104px tall absolute layouts resembling the wireframes.
|
||||||
const isDark =
|
const isDark = styleId === "rail";
|
||||||
styleId !== "minimal" && styleId !== "swiss" && styleId !== "sidebar";
|
|
||||||
const accentColor = "var(--accent)";
|
const accentColor = "var(--accent)";
|
||||||
|
|
||||||
const wireLine = (w: string | number, opacity = 0.25) => (
|
const wireLine = (w: string | number, opacity = 0.25) => (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: 4,
|
height: 3,
|
||||||
width: w,
|
width: w,
|
||||||
borderRadius: 2,
|
borderRadius: 1.5,
|
||||||
background: isDark ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)",
|
background: isDark ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)",
|
||||||
opacity,
|
opacity,
|
||||||
}}
|
}}
|
||||||
@@ -192,7 +191,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
|||||||
|
|
||||||
let content;
|
let content;
|
||||||
if (styleId === "sidebar") {
|
if (styleId === "sidebar") {
|
||||||
// Left-side menu column + main dashboard area — Light/Minimal CRM theme
|
// Left-side menu column + main dashboard area — Light/Minimal CRM theme (Screen 3)
|
||||||
content = (
|
content = (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -205,29 +204,423 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
|||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 32,
|
width: 42,
|
||||||
borderRight: "1px solid #eae6de",
|
borderRight: "1px solid #eae6de",
|
||||||
padding: 6,
|
padding: "8px 6px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: 5,
|
gap: 6,
|
||||||
background: "#f4ece4",
|
background: "#f5f4ef",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Logo */}
|
||||||
|
<div style={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: 3,
|
||||||
|
background: accentColor,
|
||||||
|
opacity: 0.9,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{wireLine(18, 0.55)}
|
||||||
|
</div>
|
||||||
|
{/* Mini Search box */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 3,
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
background: "#fff",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Menu items */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
marginTop: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine(24, 0.45)}
|
||||||
|
{wireLine(20, 0.3)}
|
||||||
|
{wireLine(26, 0.3)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Main Dashboard (Light) */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
padding: 8,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine(36, 0.65)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "rgba(0,0,0,0.12)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* 4 Mini Cards Grid */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "repeat(4, 1fr)",
|
||||||
|
gap: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 4,
|
||||||
|
padding: "4px 6px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 2,
|
||||||
|
background: "#fff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("50%", 0.3)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 2,
|
||||||
|
width: "100%",
|
||||||
|
background:
|
||||||
|
i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
|
||||||
|
opacity: 0.6,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Charts/Table Row */}
|
||||||
|
<div style={{ display: "flex", gap: 6, flex: 1 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1.5,
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
background: "#ffffff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("40%", 0.4)}
|
||||||
|
{/* Simulated bars */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 3,
|
||||||
|
alignItems: "flex-end",
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
height: h,
|
||||||
|
background:
|
||||||
|
idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
|
||||||
|
borderRadius: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 5,
|
||||||
|
background: "#ffffff",
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("70%", 0.4)}
|
||||||
|
{wireLine("100%", 0.15)}
|
||||||
|
{wireLine("90%", 0.15)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else if (styleId === "topbar") {
|
||||||
|
// Top Horizontal Dark Header Bar + Light Dashboard (Screen 2)
|
||||||
|
content = (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
background: "#fcfbfa",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Top Dark Header */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 20,
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.08)",
|
||||||
|
padding: "0 8px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
background: "#121110",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", gap: 6, alignItems: "center" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 2,
|
||||||
|
background: accentColor,
|
||||||
|
opacity: 0.9,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ height: 3, width: 14, background: "#fff", opacity: 0.8 }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ height: 3, width: 12, background: "#fff", opacity: 0.4 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Miniature ⌘K Bar */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 44,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
border: "1px solid rgba(255,255,255,0.15)",
|
||||||
|
background: "rgba(255,255,255,0.05)",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingLeft: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 2,
|
||||||
|
width: 10,
|
||||||
|
background: "#fff",
|
||||||
|
opacity: 0.25,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "rgba(255,255,255,0.2)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Light Dashboard below */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
padding: 8,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine(36, 0.65)}
|
||||||
|
{wireLine(24, 0.35)}
|
||||||
|
</div>
|
||||||
|
{/* 4 Mini Cards Grid */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "repeat(4, 1fr)",
|
||||||
|
gap: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 4,
|
||||||
|
padding: "4px 6px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 2,
|
||||||
|
background: "#fff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("50%", 0.3)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 2,
|
||||||
|
width: "100%",
|
||||||
|
background:
|
||||||
|
i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
|
||||||
|
opacity: 0.6,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Charts Row */}
|
||||||
|
<div style={{ display: "flex", gap: 6, flex: 1 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1.5,
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
background: "#ffffff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 3,
|
||||||
|
alignItems: "flex-end",
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
height: h,
|
||||||
|
background:
|
||||||
|
idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
|
||||||
|
borderRadius: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
border: "1px solid #eae6de",
|
||||||
|
borderRadius: 5,
|
||||||
|
background: "#ffffff",
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("70%", 0.4)}
|
||||||
|
{wireLine("100%", 0.15)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else if (styleId === "rail") {
|
||||||
|
// Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
|
||||||
|
content = (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
background: "#0e0f12",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Far-left Icon Rail (Black) */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 18,
|
||||||
|
borderRight: "1px solid rgba(255,255,255,0.08)",
|
||||||
|
padding: "8px 0",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
background: "#121110",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 12,
|
width: 10,
|
||||||
height: 12,
|
height: 10,
|
||||||
borderRadius: "50%",
|
borderRadius: 3,
|
||||||
background: accentColor,
|
background: accentColor,
|
||||||
opacity: 0.9,
|
opacity: 0.9,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{wireLine(16, 0.4)}
|
{[1, 2, 3, 4].map((i) => (
|
||||||
{wireLine(12, 0.3)}
|
<div
|
||||||
{wireLine(14, 0.3)}
|
key={i}
|
||||||
|
style={{
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 2,
|
||||||
|
background: "rgba(255,255,255,0.18)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* Main Dashboard */}
|
{/* Secondary List Panel (Dark) */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 48,
|
||||||
|
borderRight: "1px solid rgba(255,255,255,0.08)",
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 5,
|
||||||
|
background: "#1a1918",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||||||
|
{wireLine(28, 0.45)}
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 1, background: "rgba(255,255,255,0.08)" }} />
|
||||||
|
{wireLine(36, 0.35)}
|
||||||
|
{wireLine(24, 0.2)}
|
||||||
|
{wireLine(32, 0.2)}
|
||||||
|
{wireLine(28, 0.2)}
|
||||||
|
</div>
|
||||||
|
{/* Main Content Area (Dark) */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
@@ -244,45 +637,109 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{wireLine(24, 0.6)}
|
{wireLine(36, 0.65)}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 10,
|
width: 8,
|
||||||
height: 10,
|
height: 8,
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
background: "rgba(0,0,0,0.12)",
|
background: "rgba(255,255,255,0.2)",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/* 4 Mini Cards Grid (Dark) */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "repeat(4, 1fr)",
|
||||||
|
gap: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
border: "1px solid rgba(255,255,255,0.06)",
|
||||||
|
borderRadius: 4,
|
||||||
|
padding: "4px 6px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 2,
|
||||||
|
background: "#1a1918",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{wireLine("50%", 0.35)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 2,
|
||||||
|
width: "100%",
|
||||||
|
background:
|
||||||
|
i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
|
||||||
|
opacity: 0.8,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Charts Row (Dark) */}
|
||||||
<div style={{ display: "flex", gap: 6, flex: 1 }}>
|
<div style={{ display: "flex", gap: 6, flex: 1 }}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1.5,
|
||||||
border: "1px solid #eae6de",
|
border: "1px solid rgba(255,255,255,0.06)",
|
||||||
borderRadius: 6,
|
borderRadius: 5,
|
||||||
padding: 6,
|
padding: 6,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: 4,
|
gap: 4,
|
||||||
background: "#ffffff",
|
background: "#1a1918",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{wireLine("100%", 0.4)}
|
<div
|
||||||
{wireLine("60%", 0.2)}
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 3,
|
||||||
|
alignItems: "flex-end",
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
height: h,
|
||||||
|
background:
|
||||||
|
idx === 4
|
||||||
|
? "oklch(0.6 0.18 250)"
|
||||||
|
: "rgba(255,255,255,0.08)",
|
||||||
|
borderRadius: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 32,
|
flex: 1,
|
||||||
border: "1px solid #eae6de",
|
border: "1px solid rgba(255,255,255,0.06)",
|
||||||
borderRadius: 6,
|
borderRadius: 5,
|
||||||
background: "#faf9f6",
|
background: "#1a1918",
|
||||||
|
padding: 6,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{wireLine("70%", 0.45)}
|
||||||
|
{wireLine("100%", 0.2)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (styleId === "topbar") {
|
} else if (styleId === "flux") {
|
||||||
// Top horizontal header bar + multi-column page
|
// Top horizontal header bar + multi-column page
|
||||||
content = (
|
content = (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user