berkus
/
wifi-densepose
mirror of https://github.com/ruvnet/wifi-densepose.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: dark mode for pose canvas controls, single-row layout with icons 

- All buttons converted to dark translucent style with colored accents:
  Start (green), Stop (red), Reconnect (blue), Demo (purple)
- Header, wrapper, status badge all use dark backgrounds
- Controls in single flat row (no wrapping)
- Mode select dropdown styled for dark theme
- HTML entity icons on all buttons

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
ruv 2026-03-02 11:10:31 -05:00
parent 6959668e21
commit 47d0640c49
1 changed files with 109 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
ui/components/PoseDetectionCanvas.js
View File

@ -89,21 +89,17 @@ export class PoseDetectionCanvas {
</div> </div>
</div> </div>
<div class="pose-canvas-controls" id="controls-${this.containerId}"> <div class="pose-canvas-controls" id="controls-${this.containerId}">
<div class="control-group primary-controls"> <button class="btn btn-start" id="start-btn-${this.containerId}">&#9654; Start</button>
<button class="btn btn-start" id="start-btn-${this.containerId}">Start</button> <button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>&#9632; Stop</button>
<button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>Stop</button> <button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>&#8635; Reconnect</button>
<button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>Reconnect</button> <button class="btn btn-demo" id="demo-btn-${this.containerId}">&#9881; Demo</button>
<button class="btn btn-demo" id="demo-btn-${this.containerId}">Demo</button> <select class="mode-select" id="mode-select-${this.containerId}">
</div> <option value="skeleton">Skeleton</option>
<div class="control-group secondary-controls"> <option value="keypoints">Keypoints</option>
<select class="mode-select" id="mode-select-${this.containerId}"> <option value="heatmap">Heatmap</option>
<option value="skeleton">Skeleton</option> <option value="dense">Dense</option>
<option value="keypoints">Keypoints</option> </select>
<option value="heatmap">Heatmap</option> <button class="btn btn-settings" id="settings-btn-${this.containerId}">&#9881; Settings</button>
<option value="dense">Dense</option>
</select>
<button class="btn btn-settings" id="settings-btn-${this.containerId}">⚙️ Settings</button>
</div>
</div> </div>
</div> </div>
<div class="pose-canvas-container"> <div class="pose-canvas-container">
@ -124,20 +120,20 @@ export class PoseDetectionCanvas {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `
.pose-detection-canvas-wrapper { .pose-detection-canvas-wrapper {
border: 1px solid #ddd; border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: #f9f9f9; background: #0d1117;
font-family: Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} }
.pose-canvas-header { .pose-canvas-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 15px; padding: 12px 16px;
background: #f0f0f0; background: rgba(15, 20, 35, 0.95);
border-bottom: 1px solid #ddd; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
} }
.pose-canvas-title { .pose-canvas-title {
@ -148,156 +144,166 @@ export class PoseDetectionCanvas {
.pose-canvas-title h3 { .pose-canvas-title h3 {
margin: 0; margin: 0;
color: #333; color: #e0e0e0;
font-size: 16px; font-size: 16px;
font-weight: 600;
} }
.connection-status { .connection-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 6px;
padding: 4px 10px;
background: rgba(30, 40, 60, 0.6);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
} }
.status-indicator { .status-indicator {
width: 10px; width: 8px;
height: 10px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: #ccc; background: #4a5568;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.status-indicator.connected { background: #28a745; } .status-indicator.connected { background: #00cc88; box-shadow: 0 0 6px rgba(0, 204, 136, 0.5); }
.status-indicator.connecting { background: #ffc107; } .status-indicator.connecting { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); animation: pulse 1.5s ease-in-out infinite; }
.status-indicator.error { background: #dc3545; } .status-indicator.error { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.status-indicator.disconnected { background: #6c757d; } .status-indicator.disconnected { background: #4a5568; }
.status-text { .status-text {
font-size: 12px; font-size: 11px;
color: #666; color: #8899aa;
min-width: 80px; min-width: 70px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
} }
.pose-canvas-controls { .pose-canvas-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
.control-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} flex-wrap: nowrap;
.primary-controls {
flex: 1;
}
.secondary-controls {
flex-shrink: 0;
} }
.btn { .btn {
padding: 8px 16px; padding: 8px 16px;
border: 1px solid #ddd; border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px; border-radius: 8px;
background: #ffffff; background: rgba(30, 40, 60, 0.8);
color: #333333; color: #c8d0dc;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-flex;
align-items: center;
gap: 4px;
min-width: 80px; min-width: 80px;
text-align: center; justify-content: center;
} }
.btn:hover:not(:disabled) { .btn:hover:not(:disabled) {
background: #f8f9fa;
border-color: #adb5bd;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
} }
.btn:active:not(:disabled) { .btn:active:not(:disabled) {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.btn:disabled { .btn:disabled {
opacity: 0.6; opacity: 0.35;
cursor: not-allowed; cursor: not-allowed;
background: #e9ecef; background: rgba(20, 30, 50, 0.6);
color: #6c757d; color: #4a5568;
transform: none !important; transform: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.btn-start { .btn-start {
background: #28a745; background: rgba(0, 204, 136, 0.15);
color: white; color: #00cc88;
border-color: #28a745; border-color: rgba(0, 204, 136, 0.3);
} }
.btn-start:hover:not(:disabled) { .btn-start:hover:not(:disabled) {
background: #218838; background: rgba(0, 204, 136, 0.25);
border-color: #1e7e34; border-color: rgba(0, 204, 136, 0.5);
box-shadow: 0 4px 12px rgba(0, 204, 136, 0.2);
} }
.btn-stop { .btn-stop {
background: #dc3545; background: rgba(239, 68, 68, 0.15);
color: white; color: #ef4444;
border-color: #dc3545; border-color: rgba(239, 68, 68, 0.3);
} }
.btn-stop:hover:not(:disabled) { .btn-stop:hover:not(:disabled) {
background: #c82333; background: rgba(239, 68, 68, 0.25);
border-color: #bd2130; border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
} }
.btn-reconnect { .btn-reconnect {
background: #17a2b8; background: rgba(59, 130, 246, 0.15);
color: white; color: #60a5fa;
border-color: #17a2b8; border-color: rgba(59, 130, 246, 0.3);
} }
.btn-reconnect:hover:not(:disabled) { .btn-reconnect:hover:not(:disabled) {
background: #138496; background: rgba(59, 130, 246, 0.25);
border-color: #117a8b; border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
} }
.btn-demo { .btn-demo {
background: #6f42c1; background: rgba(139, 92, 246, 0.15);
color: white; color: #a78bfa;
border-color: #6f42c1; border-color: rgba(139, 92, 246, 0.3);
} }
.btn-demo:hover:not(:disabled) { .btn-demo:hover:not(:disabled) {
background: #5a32a3; background: rgba(139, 92, 246, 0.25);
border-color: #512a97; border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
} }
.btn-settings { .btn-settings {
background: #6c757d; background: rgba(100, 116, 139, 0.15);
color: white; color: #94a3b8;
border-color: #6c757d; border-color: rgba(100, 116, 139, 0.3);
} }
.btn-settings:hover:not(:disabled) { .btn-settings:hover:not(:disabled) {
background: #5a6268; background: rgba(100, 116, 139, 0.25);
border-color: #545b62; border-color: rgba(100, 116, 139, 0.5);
} }
.mode-select { .mode-select {
padding: 5px 8px; padding: 8px 12px;
border: 1px solid #ddd; border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px; border-radius: 8px;
background: #fff; background: rgba(30, 40, 60, 0.8);
font-size: 12px; color: #b0b8c8;
font-size: 13px;
cursor: pointer;
}
.mode-select:focus {
outline: none;
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.mode-select option {
background: #1a2234;
color: #c8d0dc;
} }
.pose-canvas-container { .pose-canvas-container {