← back to Wallco Ai
design page: collapse the always-visible palette-strip on load (was the 'colors expanded' surface) + hue-sort the client-side extracted dots
0f523b9db2aa364ed928e01389c4a31c142bb88e · 2026-05-28 08:04:49 -0700 · Steve Abrams
Files touched
Diff
commit 0f523b9db2aa364ed928e01389c4a31c142bb88e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu May 28 08:04:49 2026 -0700
design page: collapse the always-visible palette-strip on load (was the 'colors expanded' surface) + hue-sort the client-side extracted dots
---
server.js | 40 +++++++++++++++++++++++++++++++---------
1 file changed, 31 insertions(+), 9 deletions(-)
diff --git a/server.js b/server.js
index 871c7fe..e37b3ad 100644
--- a/server.js
+++ b/server.js
@@ -11063,14 +11063,20 @@ ${htmlHeader('/designs')}
}
</style>
- <!-- Color strip above image: auto-extracted palette dots, drag onto image to swap colors -->
- <div id="palette-strip" data-design-id="${design.id}"
- style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;background:var(--card-bg,#f4f0e8);border:1px solid var(--line,#d8d0c0);border-radius:8px;min-height:46px">
- <span style="font:600 10px ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint,#7a6e5a)">Palette</span>
- <span id="ps-hint" style="font:11px ui-sans-serif,system-ui;color:var(--ink-faint,#7a6e5a);opacity:.85">drag a dot onto the image to recolor</span>
- <span id="ps-dots" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"></span>
- <button id="ps-reset" type="button" style="margin-left:auto;display:none;padding:5px 12px;border:1px solid #c8b89a;border-radius:4px;background:#fff;color:#3a2f1c;font:11px ui-sans-serif,system-ui;cursor:pointer;letter-spacing:.04em">↺ Reset</button>
- </div>
+ <!-- Color strip above image: auto-extracted palette dots, drag onto image to swap colors.
+ Wrapped in <details> so it starts collapsed (Steve 2026-05-28: "collapse colors onload"). -->
+ <details id="palette-strip-wrap" style="margin:0 0 10px">
+ <summary style="cursor:pointer;padding:8px 12px;background:var(--card-bg,#f4f0e8);border:1px solid var(--line,#d8d0c0);border-radius:8px;font:600 10px ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint,#7a6e5a);list-style:none;display:flex;align-items:center;gap:10px">
+ Palette
+ <span style="font:11px ui-sans-serif,system-ui;color:var(--ink-faint,#7a6e5a);opacity:.7;text-transform:none;letter-spacing:.02em">click to show colors + drag-to-recolor</span>
+ </summary>
+ <div id="palette-strip" data-design-id="${design.id}"
+ style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0;padding:10px 12px;background:var(--card-bg,#f4f0e8);border:1px solid var(--line,#d8d0c0);border-radius:8px;min-height:46px">
+ <span id="ps-hint" style="font:11px ui-sans-serif,system-ui;color:var(--ink-faint,#7a6e5a);opacity:.85">drag a dot onto the image to recolor</span>
+ <span id="ps-dots" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"></span>
+ <button id="ps-reset" type="button" style="margin-left:auto;display:none;padding:5px 12px;border:1px solid #c8b89a;border-radius:4px;background:#fff;color:#3a2f1c;font:11px ui-sans-serif,system-ui;cursor:pointer;letter-spacing:.04em">↺ Reset</button>
+ </div>
+ </details>
<style>
.ps-dot { width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:grab; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform 120ms ease, box-shadow 120ms ease; position:relative; }
.ps-dot:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25); }
@@ -11343,8 +11349,24 @@ ${htmlHeader('/designs')}
workCtx.drawImage(img, 0, 0, workW, workH);
}
+ // Sort dots by hue (color-wheel order, near-grays at the tail) so the
+ // strip reads as a smooth gradient, not random — mirrors the server-side
+ // palette sort used by the Full palette + Color isolate sections.
+ function hueOf(h){
+ var m = String(h||'').match(/^#?([0-9a-f]{6})$/i); if (!m) return 9999;
+ var n = parseInt(m[1], 16);
+ var r = ((n>>16)&255)/255, g = ((n>>8)&255)/255, b = (n&255)/255;
+ var mx = Math.max(r,g,b), mn = Math.min(r,g,b), d = mx-mn;
+ if (d < 0.04) return 10000 + (1-mx)*100; // gray bucket → end, dark→light
+ var hv;
+ if (mx === r) hv = ((g-b)/d) % 6;
+ else if (mx === g) hv = (b-r)/d + 2;
+ else hv = (r-g)/d + 4;
+ hv *= 60; if (hv < 0) hv += 360; return hv;
+ }
function renderDots(palette){
- dotsEl.innerHTML = palette.map(function(h){
+ var sorted = palette.slice().sort(function(a,b){ return hueOf(a) - hueOf(b); });
+ dotsEl.innerHTML = sorted.map(function(h){
return '<span class="ps-dot" draggable="true" data-hex="'+h+'" title="'+h+'" style="background:'+h+'"></span>';
}).join('');
}
← 243bd61 etsy pipeline brand: Fentucci Digital Packs (final). 4 refer
·
back to Wallco Ai
·
trade-login: wire transactional email send via sendTransacti 78c466d →