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 }) {
|
||||
// Styles are 100% width, 104px tall absolute layouts resembling the wireframes.
|
||||
const isDark =
|
||||
styleId !== "minimal" && styleId !== "swiss" && styleId !== "sidebar";
|
||||
const isDark = styleId === "rail";
|
||||
const accentColor = "var(--accent)";
|
||||
|
||||
const wireLine = (w: string | number, opacity = 0.25) => (
|
||||
<div
|
||||
style={{
|
||||
height: 4,
|
||||
height: 3,
|
||||
width: w,
|
||||
borderRadius: 2,
|
||||
borderRadius: 1.5,
|
||||
background: isDark ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)",
|
||||
opacity,
|
||||
}}
|
||||
@@ -192,7 +191,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
|
||||
let content;
|
||||
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 = (
|
||||
<div
|
||||
style={{
|
||||
@@ -205,29 +204,423 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
style={{
|
||||
width: 32,
|
||||
width: 42,
|
||||
borderRight: "1px solid #eae6de",
|
||||
padding: 6,
|
||||
padding: "8px 6px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 5,
|
||||
background: "#f4ece4",
|
||||
gap: 6,
|
||||
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
|
||||
style={{
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: "50%",
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 3,
|
||||
background: accentColor,
|
||||
opacity: 0.9,
|
||||
}}
|
||||
/>
|
||||
{wireLine(16, 0.4)}
|
||||
{wireLine(12, 0.3)}
|
||||
{wireLine(14, 0.3)}
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 2,
|
||||
background: "rgba(255,255,255,0.18)",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</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
|
||||
style={{
|
||||
flex: 1,
|
||||
@@ -244,45 +637,109 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{wireLine(24, 0.6)}
|
||||
{wireLine(36, 0.65)}
|
||||
<div
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "rgba(0,0,0,0.12)",
|
||||
background: "rgba(255,255,255,0.2)",
|
||||
}}
|
||||
/>
|
||||
</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={{
|
||||
flex: 1,
|
||||
border: "1px solid #eae6de",
|
||||
borderRadius: 6,
|
||||
flex: 1.5,
|
||||
border: "1px solid rgba(255,255,255,0.06)",
|
||||
borderRadius: 5,
|
||||
padding: 6,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
background: "#ffffff",
|
||||
background: "#1a1918",
|
||||
}}
|
||||
>
|
||||
{wireLine("100%", 0.4)}
|
||||
{wireLine("60%", 0.2)}
|
||||
<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(255,255,255,0.08)",
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: 32,
|
||||
border: "1px solid #eae6de",
|
||||
borderRadius: 6,
|
||||
background: "#faf9f6",
|
||||
flex: 1,
|
||||
border: "1px solid rgba(255,255,255,0.06)",
|
||||
borderRadius: 5,
|
||||
background: "#1a1918",
|
||||
padding: 6,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{wireLine("70%", 0.45)}
|
||||
{wireLine("100%", 0.2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (styleId === "topbar") {
|
||||
} else if (styleId === "flux") {
|
||||
// Top horizontal header bar + multi-column page
|
||||
content = (
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user