wangdequan/linuxcncWebWASM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Highlight completed and active G-code lines

Browse Source
This commit is contained in:
wangdequan
2026-08-29 09:11:23 +08:00
parent 55627010c3
commit 21580720a8
7 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/react/src/styles.css
View File

@@ -181,9 +181,15 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.program-editor-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; min-height: 0; }
.program-gutter { display: flex; flex-direction: column; align-items: end; padding: 6px 6px 6px 0; overflow: hidden; border-right: 1px solid #c2c2c2; color: #888; background: #e4e4e4; font: 12px/1.45 ui-monospace, monospace; user-select: none; }
.program-gutter span { height: 17px; }
.program-gutter span.current-line { color: #174d84; background: #c8d7e8; font-weight: 700; }
.program-editor-wrap textarea { width: 100%; height: 100%; min-height: 180px; padding: 6px 8px; resize: none; border: 0; outline: none; background: #fff; color: #111; font: 12px/1.45 ui-monospace, monospace; tab-size: 4; }
.program-execution-line { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px; min-width: 0; padding: 5px 8px; border-top: 1px solid #9aa8b4; border-bottom: 1px solid #9aa8b4; background: #e9f1f8; color: #173b5f; font: 12px/1.35 ui-monospace, monospace; }
.program-gutter span.current-line { color: #5a4100; background: #ffe066; font-weight: 700; }
.program-gutter span.completed-line { color: #666; background: #e6e6e6; }
.program-editor-input { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.program-line-highlights { position: absolute; inset: 0; z-index: 0; padding: 6px 8px; overflow: hidden; pointer-events: none; font: 12px/1.45 ui-monospace, monospace; }
.program-line-highlights span { display: block; height: 17px; margin: 0 -8px; }
.program-line-highlights span.completed-line { background: #eeeeee; }
.program-line-highlights span.current-line { background: #ffe066; }
.program-editor-input textarea { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 180px; padding: 6px 8px; resize: none; border: 0; outline: none; background: transparent; color: #111; font: 12px/1.45 ui-monospace, monospace; tab-size: 4; }
.program-execution-line { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px; min-width: 0; padding: 5px 8px; border-top: 1px solid #9aa8b4; border-bottom: 1px solid #9aa8b4; background: #ffe066; color: #3f2d00; font: 12px/1.35 ui-monospace, monospace; }
.program-execution-line span { font-weight: 700; white-space: nowrap; }
.program-execution-line code { min-width: 0; overflow: hidden; color: #111; text-overflow: ellipsis; white-space: nowrap; }
.program-execution-trace { grid-column: 1; grid-row: 3; min-width: 0; padding: 4px 8px; overflow: auto; border-bottom: 1px solid #9aa8b4; background: #f4f7fa; color: #253746; font: 11px/1.3 ui-monospace, monospace; }
@@ -192,6 +198,9 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.program-execution-trace li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; min-width: 0; }
.program-execution-trace li span { color: #174d84; font-weight: 700; }
.program-execution-trace li code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-execution-trace li.completed-line { padding: 1px 4px; background: #e8e8e8; color: #666; }
.program-execution-trace li.executing-line { padding: 1px 4px; background: #ffe066; color: #111; font-weight: 700; }
.program-execution-trace li.executing-line span { color: #6b4b00; }
.program-side { display: flex; grid-column: 2; grid-row: 1 / span 3; flex-direction: column; gap: 12px; padding: 8px; border-left: 1px solid #aaa; background: #d9d9d9; }
.program-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.active-gcodes-label { display: grid; gap: 5px; color: #333; }