完善云端RUN执行反馈
This commit is contained in:
@@ -21,16 +21,22 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 1180px;
|
||||
min-height: 640px;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #c8c4bc;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #bdb8ad;
|
||||
border-radius: 5px;
|
||||
@@ -66,21 +72,21 @@ button:active {
|
||||
.gmoccapy-shell {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(610px, 1.34fr)
|
||||
minmax(270px, 0.58fr)
|
||||
minmax(260px, 0.56fr)
|
||||
minmax(0, 1.34fr)
|
||||
minmax(0, 0.58fr)
|
||||
minmax(0, 0.56fr)
|
||||
108px;
|
||||
grid-template-rows: 40px minmax(210px, 1fr) minmax(170px, 0.78fr) 150px 68px;
|
||||
grid-template-rows: 40px minmax(0, 1fr) minmax(0, 0.82fr) minmax(110px, 0.48fr) 68px;
|
||||
grid-template-areas:
|
||||
"title title title title"
|
||||
"preview dro dro side"
|
||||
"preview gcode gcode side"
|
||||
"info override spindle side"
|
||||
"bottom bottom bottom side";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-width: 1180px;
|
||||
min-height: 640px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
}
|
||||
@@ -140,6 +146,35 @@ button:active {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.current-line-indicator {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(44px, auto);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #8d887f;
|
||||
background: #f7f1d0;
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.current-line-indicator span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.current-line-indicator strong {
|
||||
color: #005bab;
|
||||
font: 700 20px/1 "Courier New", monospace;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
grid-area: preview;
|
||||
position: relative;
|
||||
@@ -336,7 +371,7 @@ button:active {
|
||||
.gcode-panel {
|
||||
grid-area: gcode;
|
||||
display: grid;
|
||||
grid-template-rows: 32px minmax(0, 1fr) 20px 54px;
|
||||
grid-template-rows: auto auto minmax(96px, 1fr) 20px 54px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -357,6 +392,38 @@ button:active {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) auto minmax(180px, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
border-bottom: 1px solid #d5d0c7;
|
||||
background: #f6f4ef;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row label {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(150px, 240px);
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row select {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row [data-linuxcnc-gcode-source="status"] {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gcode-header strong,
|
||||
.gcode-header span {
|
||||
min-width: 0;
|
||||
@@ -385,26 +452,54 @@ button:active {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
min-height: 18px;
|
||||
min-height: 34px;
|
||||
line-height: 1.25;
|
||||
padding: 2px 4px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.gcode-row.active {
|
||||
background: #242424;
|
||||
color: #202020;
|
||||
border-left-color: #2ebf63;
|
||||
}
|
||||
|
||||
.gcode-row[data-line-status="done"] {
|
||||
background: #eef6ec;
|
||||
border-left-color: #79a96c;
|
||||
}
|
||||
|
||||
.gcode-row[data-line-status="running"] {
|
||||
background: #242424;
|
||||
border-left-color: #2ebf63;
|
||||
}
|
||||
|
||||
.gcode-row.active span,
|
||||
.gcode-row.active code {
|
||||
.gcode-row.active code,
|
||||
.gcode-row.active small,
|
||||
.gcode-row[data-line-status="running"] span,
|
||||
.gcode-row[data-line-status="running"] code,
|
||||
.gcode-row[data-line-status="running"] small {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.gcode-row code {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gcode-row small {
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #6d695f;
|
||||
font: 11px/1.2 "Courier New", monospace;
|
||||
}
|
||||
|
||||
.gcode-progress {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
@@ -723,7 +818,7 @@ button:active {
|
||||
.bottom-controls {
|
||||
grid-area: bottom;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(15, minmax(48px, 1fr));
|
||||
grid-template-columns: repeat(18, minmax(44px, 1fr));
|
||||
gap: 5px;
|
||||
padding: 6px 8px;
|
||||
border-top: 2px solid var(--border);
|
||||
@@ -746,10 +841,23 @@ button:active {
|
||||
@media (max-width: 1180px) {
|
||||
.gmoccapy-shell {
|
||||
grid-template-columns:
|
||||
minmax(560px, 1.28fr)
|
||||
minmax(250px, 0.58fr)
|
||||
minmax(230px, 0.54fr)
|
||||
100px;
|
||||
minmax(0, 1.18fr)
|
||||
minmax(0, 0.7fr)
|
||||
minmax(0, 0.62fr)
|
||||
96px;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.profile-select-label {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.current-line-indicator strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
@@ -765,6 +873,14 @@ button:active {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row {
|
||||
grid-template-columns: minmax(180px, 1fr) auto minmax(140px, 1fr);
|
||||
}
|
||||
|
||||
.linuxcnc-source-row label {
|
||||
grid-template-columns: auto minmax(120px, 1fr);
|
||||
}
|
||||
|
||||
.tabs button,
|
||||
.meter-card h2,
|
||||
.override-control h2,
|
||||
@@ -773,3 +889,180 @@ button:active {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 720px) {
|
||||
.gmoccapy-shell {
|
||||
grid-template-rows: 40px minmax(0, 1fr) minmax(0, 1fr) minmax(84px, 0.4fr) 58px;
|
||||
}
|
||||
|
||||
.preview-toolbar button,
|
||||
.bottom-controls button,
|
||||
.status-sidebar button {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.gcode-panel {
|
||||
grid-template-rows: auto auto minmax(0, 1fr) 18px 48px;
|
||||
}
|
||||
|
||||
.gcode-list {
|
||||
padding: 4px 6px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gcode-row {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.gcode-row small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-controls {
|
||||
grid-template-columns: repeat(18, minmax(36px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 420px) {
|
||||
.gmoccapy-shell {
|
||||
grid-template-rows: 24px minmax(24px, 0.14fr) minmax(0, 1.92fr) 0 28px;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
gap: 4px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.title-stack strong {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.title-stack span,
|
||||
.run-state {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.profile-select-label {
|
||||
min-width: 96px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.profile-select-label select {
|
||||
min-height: 16px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.current-line-indicator {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.current-line-indicator span {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.current-line-indicator strong {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.info-tabs,
|
||||
.override-panel,
|
||||
.spindle-coolant-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gcode-panel {
|
||||
grid-template-rows: auto auto minmax(0, 1fr) 12px;
|
||||
}
|
||||
|
||||
.gcode-header {
|
||||
gap: 4px;
|
||||
padding: 1px 3px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.linuxcnc-source-row {
|
||||
gap: 4px;
|
||||
padding: 1px 3px;
|
||||
font-size: 8px;
|
||||
grid-template-columns: minmax(120px, 1fr) auto minmax(72px, 0.82fr);
|
||||
}
|
||||
|
||||
.linuxcnc-source-row label {
|
||||
gap: 4px;
|
||||
grid-template-columns: auto minmax(72px, 1fr);
|
||||
}
|
||||
|
||||
.linuxcnc-source-row button,
|
||||
.linuxcnc-source-row select {
|
||||
min-height: 16px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.gcode-list {
|
||||
padding: 2px 4px;
|
||||
font-size: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.gcode-row {
|
||||
gap: 4px;
|
||||
min-height: 8px;
|
||||
padding: 0 2px;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
.gcode-row span {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.gcode-row code {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.mdi-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dro-panel {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.dro-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.dro-row {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 3px;
|
||||
padding: 1px 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dro-axis {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.dro-mode,
|
||||
.dro-dtg,
|
||||
.tcp-strip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bottom-controls {
|
||||
gap: 3px;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
.bottom-controls button {
|
||||
font-size: 8px;
|
||||
line-height: 1;
|
||||
min-height: 18px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user