juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-09-10 18:56:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

unify orca web dialog style

Browse Source
This commit is contained in:
SoftFever
2026-07-05 01:17:17 +08:00
parent 383969d456
commit 5d8aa9610a
22 changed files with 439 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/web/dialog/TerminalDialog/index.html
View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="../../include/xterm/xterm.css" />
<link rel="stylesheet" type="text/css" href="../../include/global.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/dark.css" />
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
<link rel="stylesheet" href="./styles.css" />
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/json2.js"></script>

58
resources/web/dialog/TerminalDialog/index.js
View File

@@ -1,6 +1,40 @@
let term = null;
let fitAddon = null;
// ANSI palettes for the xterm theme — the standard VS Code dark/light sets, picked by
// data-orca-theme. Constant data, so defined once at module scope.
const ANSI_DARK = {
black:"#000000", red:"#cd3131", green:"#0dbc79", yellow:"#e5e510", blue:"#2472c8",
magenta:"#bc3fbc", cyan:"#11a8cd", white:"#e5e5e5",
brightBlack:"#666666", brightRed:"#f14c4c", brightGreen:"#23d18b", brightYellow:"#f5f543",
brightBlue:"#3b8eea", brightMagenta:"#d670d6", brightCyan:"#29b8db", brightWhite:"#ffffff"
};
const ANSI_LIGHT = {
black:"#000000", red:"#cd3131", green:"#107c10", yellow:"#949800", blue:"#0451a5",
magenta:"#bc05bc", cyan:"#0598bc", white:"#555555",
brightBlack:"#8a8a8a", brightRed:"#cd3131", brightGreen:"#14ce14", brightYellow:"#b5ba00",
brightBlue:"#0451a5", brightMagenta:"#bc05bc", brightCyan:"#0598bc", brightWhite:"#a5a5a5"
};
// The xterm.js theme is a plain JS object (it cannot read CSS variables), so build it
// from the host contract: background/foreground come from the injected --orca-* colors;
// the ANSI palette is the fixed light or dark set chosen by data-orca-theme.
function XtermTheme() {
var cs = getComputedStyle(document.documentElement);
var bg = (cs.getPropertyValue('--orca-bg') || '#1e1e1e').trim();
var fg = (cs.getPropertyValue('--orca-fg') || '#d4d4d4').trim();
var dark = document.documentElement.getAttribute('data-orca-theme') !== 'light';
return Object.assign({ background: bg, foreground: fg, cursor: fg }, dark ? ANSI_DARK : ANSI_LIGHT);
}
// Re-apply the xterm theme when the host flips data-orca-theme (live re-theme).
function WatchXtermTheme() {
var obs = new MutationObserver(function () {
if (term) term.options.theme = XtermTheme();
});
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-orca-theme'] });
}
function OnInit() {
if (typeof TranslatePage === "function")
TranslatePage();
@@ -9,30 +43,12 @@ function OnInit() {
cursorBlink: true,
fontSize: 13,
fontFamily: '"Cascadia Code", "Fira Code", "JetBrains Mono", monospace',
theme: {
background: "#1e1e1e",
foreground: "#d4d4d4",
cursor: "#ffffff",
black: "#000000",
red: "#cd3131",
green: "#0dbc79",
yellow: "#e5e510",
blue: "#2472c8",
magenta: "#bc3fbc",
cyan: "#11a8cd",
white: "#e5e5e5",
brightBlack: "#666666",
brightRed: "#f14c4c",
brightGreen: "#23d18b",
brightYellow: "#f5f543",
brightBlue: "#3b8eea",
brightMagenta: "#d670d6",
brightCyan: "#29b8db",
brightWhite: "#ffffff"
},
theme: XtermTheme(),
allowProposedApi: true
});
WatchXtermTheme();
fitAddon = new (FitAddon.FitAddon || FitAddon)();
term.loadAddon(fitAddon);

20
resources/web/dialog/TerminalDialog/styles.css
View File

@@ -7,8 +7,8 @@
html, body {
height: 100%;
overflow: hidden;
background: #1e1e1e;
color: #d4d4d4;
background: var(--bg);
color: var(--text);
}
.app {
@@ -41,34 +41,34 @@ html, body {
#cmd-input {
flex: 1;
padding: 6px 10px;
border: 1px solid #444;
border: 1px solid var(--border);
border-radius: 4px;
background: #2d2d2d;
color: #d4d4d4;
background: var(--bg);
color: var(--text);
font-family: inherit;
font-size: 13px;
outline: none;
}
#cmd-input:focus {
border-color: #666;
border-color: var(--orca-accent);
}
#run-btn {
padding: 6px 20px;
border: none;
border-radius: 4px;
background: #0e639c;
color: #fff;
background: var(--orca-accent);
color: var(--orca-accent-fg);
font-size: 13px;
cursor: pointer;
}
#run-btn:hover {
background: #1177bb;
filter: brightness(1.1);
}
#run-btn:disabled {
background: #555;
opacity: .5;
cursor: not-allowed;
}