Improved plot view
This commit is contained in:
Martino Ferrari
@@ -197,6 +197,27 @@ body {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Bottom status bar (connection chip + panel context) ─────────────────── */
|
||||
.statusbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 1.6rem;
|
||||
padding: 0 0.75rem;
|
||||
background: #141925;
|
||||
border-top: 1px solid #2d3748;
|
||||
flex-shrink: 0;
|
||||
gap: 1rem;
|
||||
font-size: 0.72rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.statusbar-left,
|
||||
.statusbar-right { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
|
||||
.statusbar-iface { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.statusbar-muted { color: #64748b; }
|
||||
.statusbar-hist { color: #fbbf24; }
|
||||
.statusbar .status-chip { padding: 0.05rem 0.5rem; font-size: 0.7rem; }
|
||||
|
||||
/* ── Panel resize handle ─────────────────────────────────────────────────── */
|
||||
|
||||
.panel-resize-handle {
|
||||
@@ -386,6 +407,7 @@ body {
|
||||
.canvas-view-bare .led-widget,
|
||||
.canvas-view-bare .multiled-widget,
|
||||
.canvas-view-bare .setvalue,
|
||||
.canvas-view-bare .toggle-widget,
|
||||
.canvas-view-bare .plot-widget {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
@@ -945,6 +967,74 @@ body {
|
||||
}
|
||||
.sv-btn:disabled:hover { background: #2563eb; }
|
||||
|
||||
/* ── Toggle switch widget ──────────────────────────────────────────────── */
|
||||
.toggle-widget {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
background: #1a1f2e;
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
font-family: system-ui, sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toggle-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
height: 18px;
|
||||
border-radius: 9999px;
|
||||
background: #3d4f6e;
|
||||
transition: background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.toggle-on .toggle-track { background: #22c55e; }
|
||||
.toggle-on .toggle-knob { transform: translateX(16px); }
|
||||
.toggle-unknown .toggle-track { background: #4b5563; }
|
||||
.toggle-state {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
min-width: 1.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
.toggle-on .toggle-state { color: #86efac; }
|
||||
.toggle-switch:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── Button widget ─────────────────────────────────────────────────────── */
|
||||
|
||||
.button-widget {
|
||||
@@ -1066,6 +1156,85 @@ body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* ── Plot hover toolbar (pause / window / clear / screenshot) ─────────────── */
|
||||
.plot-toolbar {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
z-index: 12;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 2px 3px;
|
||||
background: rgba(15, 17, 23, 0.85);
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.plot-widget:hover .plot-toolbar { opacity: 1; pointer-events: auto; }
|
||||
.plot-tb-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.plot-tb-btn:hover { background: #2d3748; }
|
||||
.plot-tb-active { background: #2563eb; color: #fff; }
|
||||
.plot-tb-active:hover { background: #1d4ed8; }
|
||||
.plot-tb-select {
|
||||
background: #0f1117;
|
||||
border: 1px solid #3d4f6e;
|
||||
border-radius: 4px;
|
||||
color: #e2e8f0;
|
||||
font-size: 0.72rem;
|
||||
padding: 1px 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.plot-tb-select:focus { outline: none; border-color: #4a9eff; }
|
||||
|
||||
/* ── Plot measurement readout (cursor A/B + Δt + per-series Δ) ─────────────── */
|
||||
.measure-readout {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 4px;
|
||||
z-index: 12;
|
||||
max-width: 70%;
|
||||
padding: 4px 6px;
|
||||
background: rgba(15, 17, 23, 0.9);
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 5px;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.35;
|
||||
color: #cbd5e1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.measure-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.measure-head {
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.measure-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 9rem;
|
||||
}
|
||||
.measure-vals { color: #e2e8f0; }
|
||||
.measure-delta { color: #94a3b8; }
|
||||
|
||||
/* uPlot dark overrides */
|
||||
.chart-area .u-wrap { background: transparent; }
|
||||
.chart-area .u-legend { color: #94a3b8; font-size: 0.75rem; }
|
||||
@@ -1370,6 +1539,14 @@ body {
|
||||
.flow-port-body { border-color: #10b981; }
|
||||
.flow-port-else { border-color: #ef4444; }
|
||||
|
||||
/* Synthetic-editor port data-type colouring (scoped to .synth-graph so the
|
||||
Logic / ControlLogic editors that share .flow-port are unaffected). An 'any'
|
||||
port (accepts either type) keeps the default slate; scalar is blue, array
|
||||
purple — mirroring the wire palette so a port previews what it carries/accepts. */
|
||||
.synth-graph .flow-port-type-scalar { border-color: #3b82f6; }
|
||||
.synth-graph .flow-port-type-array { border-color: #a855f7; }
|
||||
.synth-graph .flow-port-type-any { border-color: #64748b; }
|
||||
|
||||
.flow-port-label {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
@@ -2713,6 +2890,10 @@ body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* Right-aligned variant (toolbar-right dropdowns expand leftward to stay
|
||||
on-screen instead of overflowing the viewport edge). */
|
||||
.toolbar-dropdown-menu-right { left: auto; right: 0; }
|
||||
|
||||
/* Align toolbar */
|
||||
.align-toolbar {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user