BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-09 16:59:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Ralph panel toggle icon no longer changes erratically

Browse Source 
The toggle icon was confusing because CSS rotation (90deg when expanded)
combined with JS icon swapping caused left arrow → right arrow transitions.

Changes:
- Remove CSS rotation transform from .ralph-toggle
- Use consistent down/up arrows matching Monitor panel convention
- Collapsed: ▼ (down) - click to expand
- Expanded: ▲ (up) - click to collapse

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 18:56:55 +01:00
co-authored by Claude Opus 4.5
parent 7951f69baa
commit 612274743f
3 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/app.js
+2 -2
View File
@@ -2168,10 +2168,10 @@ class ClaudemanApp {
// Handle collapsed/expanded state // Handle collapsed/expanded state
if (this.innerStatePanelCollapsed) { if (this.innerStatePanelCollapsed) {
panel.classList.add('collapsed'); panel.classList.add('collapsed');
if (toggle) toggle.innerHTML = '&#x25C0;'; // Left arrow when collapsed if (toggle) toggle.innerHTML = '&#x25BC;'; // Down arrow when collapsed (click to expand)
} else { } else {
panel.classList.remove('collapsed'); panel.classList.remove('collapsed');
if (toggle) toggle.innerHTML = '&#x25B2;'; // Up arrow when expanded if (toggle) toggle.innerHTML = '&#x25B2;'; // Up arrow when expanded (click to collapse)
// Update expanded view content // Update expanded view content
this.updateRalphExpandedView(state); this.updateRalphExpandedView(state);
src/web/public/index.html
+1 -1
View File
@@ -95,7 +95,7 @@
<span class="ralph-stat"><span class="ralph-stat-icon">&#x23F1;</span><span id="ralphStatTime">0m</span></span> <span class="ralph-stat"><span class="ralph-stat-icon">&#x23F1;</span><span id="ralphStatTime">0m</span></span>
<span class="ralph-stat"><span class="ralph-stat-icon">&#x2713;</span><span id="ralphStatTasks">0/0</span></span> <span class="ralph-stat"><span class="ralph-stat-icon">&#x2713;</span><span id="ralphStatTasks">0/0</span></span>
</div> </div>
<span class="ralph-toggle" id="ralphToggle">&#x25C0;</span> <span class="ralph-toggle" id="ralphToggle">&#x25BC;</span>
</div> </div>
<div class="ralph-controls"> <div class="ralph-controls">
<button class="btn-icon-sm" onclick="event.stopPropagation(); app.toggleRalphDetach()" title="Detach/Attach panel" id="ralphDetachBtn">&#x29C9;</button> <button class="btn-icon-sm" onclick="event.stopPropagation(); app.toggleRalphDetach()" title="Detach/Attach panel" id="ralphDetachBtn">&#x29C9;</button>
src/web/public/styles.css
-5
View File
@@ -592,14 +592,9 @@ body {
.ralph-toggle { .ralph-toggle {
color: var(--text-dim); color: var(--text-dim);
font-size: 0.6rem; font-size: 0.6rem;
transition: transform 0.2s;
flex-shrink: 0; flex-shrink: 0;
} }
.ralph-panel:not(.collapsed) .ralph-toggle {
transform: rotate(90deg);
}
/* Hide detail when collapsed */ /* Hide detail when collapsed */
.ralph-panel.collapsed .ralph-detail { .ralph-panel.collapsed .ralph-detail {
display: none; display: none;