ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render the script surfaces correctly in dark mode

Browse Source 
The explainer panel used var(--surface, #fff) and PCDetail's Run Scripts
and Corporate Tools styles used --text-primary, --text-secondary and
--bg-secondary. None of those four tokens exist in this app's theme, so
var() fell through: the explainer rendered a solid white block over the
dark background and the surrounding copy lost its intended contrast.

The real tokens are --bg-card, --text and --text-light. A fallback
colour is what made this hard to catch - it looks correct in light mode
and only misrenders on the theme the shop floor actually runs, so it
would not have shown up in authoring or in review.

Both files now carry a test asserting their styles reference only
defined tokens and contain no var(--x, #colour) fallbacks. That test
immediately caught a further dead --warning fallback in the banner.

The two long per-field explanations in the Add Script form are now
collapsed behind "How this works". The modal already scrolled, and
three paragraphs of standing prose between the inputs pushed Save off
screen, so the copy was being skimmed past rather than read.
This commit is contained in:
benjamin.baker
2026-09-09 11:54:05 -04:00
parent d6163f54a4
commit 561988ac8f
4 changed files with 81 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
plugins/endpoints/frontend/views/SystemScriptsSettings.vue
View File

@@ -183,12 +183,15 @@
class="form-control mono"
placeholder="C:\Program Files\CorporateTools"
/>
<p class="hint">
Leave blank to run from the agent's staging folder. Set this only
when the script calls a tool already installed on the endpoint by
relative path. The folder must exist on the endpoint or the push
fails rather than running somewhere else.
</p>
<details class="field-help">
<summary>How this works</summary>
<p>
Leave blank to run from the agent's staging folder. Set this only
when the script calls a tool already installed on the endpoint by
relative path. The folder must exist on the endpoint or the push
fails rather than running somewhere else.
</p>
</details>
</div>
<div class="form-group">
<label>
@@ -199,13 +202,16 @@
<option value="default">Continue - report success if the script reaches the end</option>
<option value="strict">Stop on the first error and fail the command</option>
</select>
<p class="hint">
PowerShell normally writes an error and carries on, and still
exits zero, so a script can report success having done none of
its work. Stop makes the first failure end the run and fail the
command. Leave this on Continue unless you have read the script
and know it does not rely on a step being allowed to fail.
</p>
<details class="field-help">
<summary>How this works</summary>
<p>
PowerShell normally writes an error and carries on, and still
exits zero, so a script can report success having done none of
its work. Stop makes the first failure end the run and fail the
command. Leave this on Continue unless you have read the script
and know it does not rely on a step being allowed to fail.
</p>
</details>
</div>
<div class="form-group">
<label>
@@ -356,7 +362,7 @@ onMounted(loadData)
.mono { font-family: monospace; }
.hint { color: var(--text-light); font-weight: normal; }
.warning-banner {
border: 1px solid var(--warning, #b8860b);
border: 1px solid var(--warning);
border-left-width: 4px;
border-radius: 4px;
padding: 0.75rem 1rem;
@@ -364,15 +370,17 @@ onMounted(loadData)
background: rgba(184, 134, 11, 0.08);
}
.explainer {
border: 1px solid var(--border, #ddd);
border: 1px solid var(--border);
border-radius: 4px;
margin-bottom: 1rem;
background: var(--surface, #fff);
background: var(--bg-card);
color: var(--text);
}
.explainer summary {
cursor: pointer;
padding: 0.6rem 1rem;
font-weight: 600;
color: var(--text);
}
.explainer-body {
padding: 0 1rem 0.75rem;
@@ -380,10 +388,25 @@ onMounted(loadData)
.explainer-body h4 {
margin: 0.9rem 0 0.25rem;
font-size: 0.95rem;
color: var(--text);
}
.explainer-body p {
margin: 0 0 0.5rem;
color: var(--text-light);
line-height: 1.5;
}
.field-help {
margin-top: 0.4rem;
}
.field-help summary {
cursor: pointer;
color: var(--text-light);
font-size: 0.85rem;
}
.field-help p {
margin: 0.35rem 0 0;
color: var(--text-light);
font-size: 0.85rem;
line-height: 1.5;
}
</style>