From 5c3db2caea156965bad471b6f4c6039836b10409 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 25 Feb 2026 13:07:24 -0800 Subject: [PATCH] Redesign canvas toolbar with grouped dropdowns and collapse 28 flat tool buttons replaced with 6 category dropdowns (Create, Media, Embed, AI, Travel, Decide) plus direct-access Connect/Memory/Zoom buttons. Toolbar is now collapsible via a minimize toggle. Mobile responsive with accordion-style groups. Co-Authored-By: Claude Opus 4.6 --- website/canvas.html | 299 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 252 insertions(+), 47 deletions(-) diff --git a/website/canvas.html b/website/canvas.html index ceceb4f..3be790c 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -26,33 +26,131 @@ left: 50%; transform: translateX(-50%); display: flex; - gap: 8px; - padding: 8px 16px; + align-items: center; + gap: 4px; + padding: 6px 10px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 1000; } - #toolbar button { - padding: 8px 16px; + /* Dropdown group container */ + .toolbar-group { + position: relative; + } + + .toolbar-group-toggle { + padding: 7px 12px; border: none; border-radius: 8px; background: #f1f5f9; cursor: pointer; - font-size: 14px; + font-size: 13px; transition: background 0.2s; + white-space: nowrap; } - #toolbar button:hover { + .toolbar-group-toggle:hover { background: #e2e8f0; } - #toolbar button.active { + .toolbar-group.open > .toolbar-group-toggle { background: #14b8a6; color: white; } + .toolbar-dropdown { + display: none; + position: absolute; + top: calc(100% + 6px); + left: 50%; + transform: translateX(-50%); + min-width: 160px; + background: white; + border-radius: 10px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); + padding: 6px; + z-index: 1001; + } + + .toolbar-group.open > .toolbar-dropdown { + display: flex; + flex-direction: column; + gap: 2px; + } + + .toolbar-dropdown button { + padding: 8px 12px; + border: none; + border-radius: 6px; + background: transparent; + cursor: pointer; + font-size: 13px; + text-align: left; + white-space: nowrap; + transition: background 0.15s; + } + + .toolbar-dropdown button:hover { + background: #f1f5f9; + } + + /* Separator between sections */ + .toolbar-sep { + width: 1px; + height: 24px; + background: #e2e8f0; + margin: 0 2px; + flex-shrink: 0; + } + + /* Direct toolbar buttons (Connect, Memory, Zoom) */ + #toolbar > button { + padding: 7px 12px; + border: none; + border-radius: 8px; + background: #f1f5f9; + cursor: pointer; + font-size: 13px; + transition: background 0.2s; + white-space: nowrap; + } + + #toolbar > button:hover { + background: #e2e8f0; + } + + #toolbar > button.active { + background: #14b8a6; + color: white; + } + + /* Collapse/expand toggle */ + #toolbar-collapse { + padding: 7px 8px !important; + background: transparent !important; + font-size: 16px !important; + line-height: 1; + opacity: 0.6; + transition: opacity 0.2s; + } + + #toolbar-collapse:hover { + opacity: 1; + background: #f1f5f9 !important; + } + + #toolbar.collapsed .toolbar-group, + #toolbar.collapsed .toolbar-sep, + #toolbar.collapsed > button:not(#toolbar-collapse) { + display: none; + } + + #toolbar.collapsed { + padding: 6px; + } + #community-info { position: fixed; top: 72px; @@ -389,7 +487,7 @@ touch-action: manipulation; } - /* Hide desktop toolbar, show as grid overlay when toggled */ + /* Hide desktop toolbar, show as column overlay when toggled */ #toolbar { display: none; position: fixed; @@ -410,20 +508,48 @@ display: flex; } - #toolbar button { - flex: 0 0 calc(33.33% - 4px); - padding: 10px 4px; - font-size: 12px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + /* On mobile, flatten groups into a grid */ + #toolbar .toolbar-group { + width: 100%; } - /* Hide zoom/reset from toolbar grid (they're in #mobile-zoom) */ + #toolbar .toolbar-group-toggle { + width: 100%; + text-align: left; + padding: 10px 12px; + font-size: 13px; + } + + #toolbar .toolbar-dropdown { + position: static; + transform: none; + box-shadow: none; + padding: 4px 0 4px 12px; + min-width: 0; + } + + #toolbar .toolbar-dropdown button { + padding: 10px 12px; + font-size: 13px; + } + + #toolbar > button { + width: 100%; + text-align: left; + padding: 10px 12px; + } + + #toolbar .toolbar-sep { + width: 100%; + height: 1px; + margin: 4px 0; + } + + /* Hide zoom/reset from toolbar (they're in #mobile-zoom) */ #toolbar #zoom-in, #toolbar #zoom-out, - #toolbar #reset-view { + #toolbar #reset-view, + #toolbar #toolbar-collapse { display: none; } @@ -461,36 +587,79 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ +
+ + + + + +
+
+ +
+ +
+ + + + + +
+
+ +
+ +
+ + + + + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + + + + +
+
+ +
+ +
+ + + + +
+
+ + + + + + - +
@@ -1458,14 +1627,50 @@ if (window.innerWidth > 768) return; const btn = e.target.closest("button"); if (!btn) return; - // Keep open for connect, memory, zoom controls - const keepOpen = ["new-arrow", "toggle-memory", "zoom-in", "zoom-out", "reset-view"]; + // Keep open for connect, memory, zoom, group toggles, collapse + const keepOpen = ["new-arrow", "toggle-memory", "zoom-in", "zoom-out", "reset-view", "toolbar-collapse"]; + if (btn.classList.contains("toolbar-group-toggle")) return; if (!keepOpen.includes(btn.id)) { toolbarEl.classList.remove("mobile-open"); mobileMenuBtn.textContent = "✚"; } }); + // Dropdown group toggles + toolbarEl.querySelectorAll(".toolbar-group-toggle").forEach(toggle => { + toggle.addEventListener("click", (e) => { + e.stopPropagation(); + const group = toggle.closest(".toolbar-group"); + const wasOpen = group.classList.contains("open"); + // Close all other groups + toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open")); + // Toggle this one + if (!wasOpen) group.classList.add("open"); + }); + }); + + // Close dropdowns when clicking a tool inside one + toolbarEl.querySelectorAll(".toolbar-dropdown button").forEach(btn => { + btn.addEventListener("click", () => { + toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open")); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener("click", (e) => { + if (!e.target.closest("#toolbar")) { + toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open")); + } + }); + + // Collapse/expand toolbar + const collapseBtn = document.getElementById("toolbar-collapse"); + collapseBtn.addEventListener("click", () => { + const isCollapsed = toolbarEl.classList.toggle("collapsed"); + collapseBtn.textContent = isCollapsed ? "β–Ά" : "β—€"; + collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar"; + }); + // Mobile zoom controls (separate from toolbar) document.getElementById("mz-in").addEventListener("click", () => { scale = Math.min(scale * 1.25, maxScale);