jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): toolbar icons show title label on hover/open and in panel header 

- Add tg-icon + tg-label spans inside toolbar group toggle buttons
- Label hidden by default, revealed on hover/open via CSS
- Panel header uses title attribute instead of emoji-only textContent
- Plus menu headings also use title attribute for group names
- Mobile: labels always visible alongside icons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-09 20:22:10 -07:00
parent 5842bd9f9a
commit fb69b41da6
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
website/canvas.html
View File

@ -241,6 +241,19 @@
color: white;
}
/* Icon + label structure inside toggle */
.tg-icon {
flex-shrink: 0;
font-size: 18px;
line-height: 1;
}
.tg-label {
display: none;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* Icon-only toolbar: show only emoji, fluid expand on hover/open */
.toolbar-group-toggle {
max-width: 42px;
@ -251,15 +264,22 @@
padding-right: 0;
position: relative;
transition: max-width 0.25s ease, padding 0.2s ease;
gap: 6px;
}
/* Fluid expand: show title text on hover or when group is open */
.toolbar-group:hover > .toolbar-group-toggle,
.toolbar-group.open > .toolbar-group-toggle {
max-width: 160px;
padding-left: 10px;
padding-left: 8px;
padding-right: 10px;
text-align: left;
justify-content: flex-start;
}
.toolbar-group:hover > .toolbar-group-toggle .tg-label,
.toolbar-group.open > .toolbar-group-toggle .tg-label {
display: inline;
}
/* Collapse/expand toggle — at top of toolbar */
@ -1561,12 +1581,17 @@
overflow: visible;
justify-content: flex-start;
}
/* Show group name on mobile via title attr */
#toolbar .toolbar-group-toggle::after {
content: attr(title);
margin-left: 8px;
/* Show group name on mobile */
#toolbar .toolbar-group-toggle .tg-label {
display: inline;
font-size: 15px;
}
#toolbar .toolbar-group-toggle {
max-width: none;
padding-left: 10px;
padding-right: 10px;
justify-content: flex-start;
}
#toolbar .toolbar-dropdown {
position: static;
@ -1871,7 +1896,7 @@
<!-- 1. Note -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Note">📝</button>
<button class="toolbar-group-toggle" title="Note"><span class="tg-icon">📝</span><span class="tg-label">Note</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Note</div>
<button id="new-markdown" title="New Note">📝 Note</button>
@ -1881,7 +1906,7 @@
<!-- 2. Connect -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Connect">🤝</button>
<button class="toolbar-group-toggle" title="Connect"><span class="tg-icon">🤝</span><span class="tg-label">Connect</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Connect</div>
<button id="new-chat" title="New Chat">💬 Chat</button>
@ -1892,7 +1917,7 @@
<!-- 3. Media -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Media">🎵</button>
<button class="toolbar-group-toggle" title="Media"><span class="tg-icon">🎵</span><span class="tg-label">Media</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Media</div>
<button id="new-transcription" title="Transcribe">🎤 Transcribe</button>
@ -1905,7 +1930,7 @@
<!-- 4. Embed -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Embed">🔗</button>
<button class="toolbar-group-toggle" title="Embed"><span class="tg-icon">🔗</span><span class="tg-label">Embed</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Embed</div>
<button id="new-embed" title="Web Embed">🔗 Web Embed</button>
@ -1927,7 +1952,7 @@
<!-- 5. AI -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="AI">🤖</button>
<button class="toolbar-group-toggle" title="AI"><span class="tg-icon">🤖</span><span class="tg-label">AI</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">AI</div>
<button id="new-prompt" title="AI Chat">🤖 AI Chat</button>
@ -1940,7 +1965,7 @@
<!-- 6. Create -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Create">🛠️</button>
<button class="toolbar-group-toggle" title="Create"><span class="tg-icon">🛠️</span><span class="tg-label">Create</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Create</div>
<button id="new-splat" title="3D Splat">🔮 3D Splat</button>
@ -1955,7 +1980,7 @@
<!-- 7. Decide -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Decide">📊</button>
<button class="toolbar-group-toggle" title="Decide"><span class="tg-icon">📊</span><span class="tg-label">Decide</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Decide</div>
<button id="new-choice-vote" title="Poll">☑ Poll</button>
@ -1970,7 +1995,7 @@
<!-- 8. Spend -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Spend">💰</button>
<button class="toolbar-group-toggle" title="Spend"><span class="tg-icon">💰</span><span class="tg-label">Spend</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Spend</div>
<button id="embed-wallet" title="rWallet">💰 rWallet</button>
@ -1980,7 +2005,7 @@
<!-- 9. Travel -->
<div class="toolbar-group">
<button class="toolbar-group-toggle" title="Travel">✈️</button>
<button class="toolbar-group-toggle" title="Travel"><span class="tg-icon">✈️</span><span class="tg-label">Travel</span></button>
<div class="toolbar-dropdown">
<div class="toolbar-dropdown-header">Travel</div>
<button id="new-itinerary" title="Itinerary">🗓️ Itinerary</button>
@ -4385,7 +4410,7 @@
const heading = document.createElement("div");
heading.className = "menu-heading";
heading.textContent = toggle.textContent.trim();
heading.textContent = toggle.getAttribute("title") || toggle.textContent.trim();
toolPlusMenu.appendChild(heading);
for (const origBtn of dropdown.querySelectorAll("button")) {
@ -5078,8 +5103,8 @@
const dropdown = group.querySelector(".toolbar-dropdown");
if (!dropdown) return;
// Set header text from the toggle button
toolbarPanelHeader.textContent = toggle.textContent.trim();
// Set header text from the toggle button's title attribute
toolbarPanelHeader.textContent = toggle.getAttribute("title") || toggle.textContent.trim();
// Clone dropdown buttons into the panel body
toolbarPanelBody.innerHTML = "";