fix(canvas): mobile toolbar uses collapse instead of FAB overlay
Replace the floating action button toggle with the same collapse/expand behavior as desktop. Toolbar sits as a compact icon column on the left, panels open to the right, and corner tools move to bottom-right. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
be81618b70
commit
05b8e2676a
|
|
@ -1805,25 +1805,9 @@
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* FAB toggle button */
|
||||
/* Hide FAB — toolbar now uses collapse like desktop */
|
||||
#mobile-menu {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: #14b8a6;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1002;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide old mobile zoom — replaced by #canvas-corner-tools */
|
||||
|
|
@ -1831,37 +1815,39 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Hide desktop toolbar, show as column overlay when toggled */
|
||||
/* Mobile toolbar: compact column on left, icons only, same as desktop */
|
||||
#toolbar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
flex-wrap: wrap;
|
||||
max-height: calc(100vh - 160px);
|
||||
overflow-y: auto;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
top: auto;
|
||||
bottom: 60px; /* above bottom-toolbar row */
|
||||
left: 6px;
|
||||
right: auto;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
border-radius: 12px;
|
||||
z-index: 1001;
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#toolbar.mobile-open {
|
||||
display: flex;
|
||||
}
|
||||
#toolbar::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* On mobile, icon grid — tap to open panel */
|
||||
/* On mobile, icon-only buttons */
|
||||
#toolbar .toolbar-group {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#toolbar .toolbar-group-toggle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
max-width: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
max-width: 40px;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1874,7 +1860,7 @@
|
|||
/* Don't expand on hover on mobile */
|
||||
#toolbar .toolbar-group:hover > .toolbar-group-toggle,
|
||||
#toolbar .toolbar-group.open > .toolbar-group-toggle {
|
||||
max-width: 48px;
|
||||
max-width: 40px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1883,12 +1869,27 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
#toolbar > button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
/* Show collapse button on mobile — same behavior as desktop */
|
||||
#toolbar #toolbar-collapse {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
/* Collapsed state on mobile */
|
||||
#toolbar.collapsed {
|
||||
padding: 4px;
|
||||
bottom: 60px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#toolbar > button:not(#toolbar-collapse) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
min-height: 40px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1897,11 +1898,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Hide collapse on mobile */
|
||||
#toolbar #toolbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#community-info {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1910,27 +1906,30 @@
|
|||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* Mobile: panel slides up from bottom as sheet */
|
||||
/* Mobile: panel opens to the right of the toolbar */
|
||||
#toolbar-panel {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
border-radius: 16px;
|
||||
bottom: 60px;
|
||||
left: 56px;
|
||||
right: auto;
|
||||
min-width: 180px;
|
||||
border-radius: 12px;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
#toolbar-panel-body button {
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
min-height: 48px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Bottom toolbar: compact on mobile */
|
||||
/* Bottom toolbar: raised above corner tools row */
|
||||
#bottom-toolbar {
|
||||
bottom: 8px;
|
||||
padding: 4px 6px;
|
||||
gap: 1px;
|
||||
left: 56px; /* offset right of side toolbar */
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#bottom-toolbar .tool-btn {
|
||||
|
|
@ -1942,17 +1941,18 @@
|
|||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* Corner tools: horizontal on mobile, 44px touch targets */
|
||||
/* Corner tools: horizontal on mobile, tucked bottom-right */
|
||||
#canvas-corner-tools {
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
left: auto;
|
||||
right: 8px;
|
||||
flex-direction: row;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
#canvas-corner-tools .corner-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#canvas-corner-tools .corner-sep {
|
||||
|
|
@ -6065,27 +6065,37 @@
|
|||
updateCanvasTransform();
|
||||
});
|
||||
|
||||
// Mobile toolbar toggle
|
||||
// Mobile toolbar toggle — collapse behavior same as desktop
|
||||
const mobileMenuBtn = document.getElementById("mobile-menu");
|
||||
const toolbarEl = document.getElementById("toolbar");
|
||||
|
||||
// FAB is hidden on mobile; toolbar uses collapse button like desktop.
|
||||
// Keep FAB handler as fallback.
|
||||
mobileMenuBtn.addEventListener("click", () => {
|
||||
const isOpen = toolbarEl.classList.toggle("mobile-open");
|
||||
mobileMenuBtn.textContent = isOpen ? "✕" : "✚";
|
||||
if (!isOpen && typeof closeToolbarPanel === "function") closeToolbarPanel();
|
||||
const isCollapsed = toolbarEl.classList.contains("collapsed");
|
||||
if (isCollapsed) {
|
||||
toolbarEl.classList.remove("collapsed");
|
||||
collapseBtn.innerHTML = minimizeSVG;
|
||||
collapseBtn.title = "Minimize toolbar";
|
||||
} else {
|
||||
toolbarEl.classList.add("collapsed");
|
||||
collapseBtn.innerHTML = wrenchSVG;
|
||||
collapseBtn.title = "Expand toolbar";
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-close toolbar after tapping a shape-creation button on mobile
|
||||
// Auto-collapse toolbar after tapping a shape-creation button on mobile
|
||||
toolbarEl.addEventListener("click", (e) => {
|
||||
if (window.innerWidth > 768) return;
|
||||
const btn = e.target.closest("button");
|
||||
if (!btn) return;
|
||||
// Keep open for connect, memory, group toggles, collapse, whiteboard tools
|
||||
const keepOpen = ["toggle-theme", "toolbar-collapse"];
|
||||
if (btn.classList.contains("toolbar-group-toggle")) return;
|
||||
if (!keepOpen.includes(btn.id)) {
|
||||
toolbarEl.classList.remove("mobile-open");
|
||||
mobileMenuBtn.textContent = "✚";
|
||||
toolbarEl.classList.add("collapsed");
|
||||
collapseBtn.innerHTML = wrenchSVG;
|
||||
collapseBtn.title = "Expand toolbar";
|
||||
if (typeof closeToolbarPanel === "function") closeToolbarPanel();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue