Panel-Feinschliff: Fensterrahmen, Live-Suche, Min/Max im gelösten Fenster
- 1-px-Fensterrahmen in Theme-Rahmenfarbe für die rahmenlosen Fenster (Linux) - Suchfeld: Live-Suche ab 3 Zeichen mit 300-ms-Debounce, letztes Wort als Präfix (arch → arch*); Enter sucht wörtlich (exakte FTS-Syntax) - Gelöstes Fenster: Minimieren/Maximieren neben Andocken/Schließen
This commit is contained in:
@@ -16,6 +16,11 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
/* Feiner Fensterrahmen fürs dekorationslose Fenster (nur Linux). */
|
||||||
|
:root[data-platform="other"] body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #313244;
|
||||||
|
}
|
||||||
.panel-head {
|
.panel-head {
|
||||||
flex: none;
|
flex: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ const picked = THEMES[projects.find((p) => p.name === project)?.terminal.theme ?
|
|||||||
document.documentElement.style.background = picked.header;
|
document.documentElement.style.background = picked.header;
|
||||||
document.body.style.background = picked.header;
|
document.body.style.background = picked.header;
|
||||||
document.body.style.color = picked.xterm.foreground;
|
document.body.style.color = picked.xterm.foreground;
|
||||||
|
document.body.style.borderColor = picked.border;
|
||||||
const topbar = document.querySelector(".panel-topbar") as HTMLElement;
|
const topbar = document.querySelector(".panel-topbar") as HTMLElement;
|
||||||
topbar.style.background = picked.header;
|
topbar.style.background = picked.header;
|
||||||
topbar.style.borderBottomColor = picked.border;
|
topbar.style.borderBottomColor = picked.border;
|
||||||
|
|||||||
+16
-2
@@ -34,9 +34,23 @@ export function initSearchView(
|
|||||||
bar.className = "hit-search";
|
bar.className = "hit-search";
|
||||||
const input = document.createElement("input");
|
const input = document.createElement("input");
|
||||||
input.type = "search";
|
input.type = "search";
|
||||||
input.placeholder = "Archiv durchsuchen — Enter startet";
|
input.placeholder = "Archiv durchsuchen";
|
||||||
|
// Live-Suche ab 3 Zeichen, entprellt (300 ms Debounce); endet die Eingabe
|
||||||
|
// mitten im Wort, wird das letzte Wort als Präfix gesucht (arch → arch*).
|
||||||
|
// Enter sucht sofort und wörtlich — für exakte FTS-Syntax (Phrasen, OR/NOT).
|
||||||
|
let pending: number | undefined;
|
||||||
|
input.addEventListener("input", () => {
|
||||||
|
clearTimeout(pending);
|
||||||
|
const q = input.value.trim();
|
||||||
|
if (q.length < 3) return;
|
||||||
|
const live = /[\p{L}\p{N}]$/u.test(q) ? `${q}*` : q;
|
||||||
|
pending = window.setTimeout(() => onSearch(live), 300);
|
||||||
|
});
|
||||||
input.addEventListener("keydown", (e) => {
|
input.addEventListener("keydown", (e) => {
|
||||||
if (e.key === "Enter" && input.value.trim()) onSearch(input.value.trim());
|
if (e.key === "Enter" && input.value.trim()) {
|
||||||
|
clearTimeout(pending);
|
||||||
|
onSearch(input.value.trim());
|
||||||
|
}
|
||||||
});
|
});
|
||||||
bar.append(input);
|
bar.append(input);
|
||||||
const results = document.createElement("div");
|
const results = document.createElement("div");
|
||||||
|
|||||||
@@ -93,6 +93,7 @@ const theme = picked.xterm;
|
|||||||
// Seitenfarben ans Theme anpassen (Defaults in terminal.html sind Mocha).
|
// Seitenfarben ans Theme anpassen (Defaults in terminal.html sind Mocha).
|
||||||
document.documentElement.style.background = theme.background;
|
document.documentElement.style.background = theme.background;
|
||||||
document.body.style.background = theme.background;
|
document.body.style.background = theme.background;
|
||||||
|
document.body.style.borderColor = picked.border;
|
||||||
const header = document.querySelector("header") as HTMLElement;
|
const header = document.querySelector("header") as HTMLElement;
|
||||||
header.style.background = picked.header;
|
header.style.background = picked.header;
|
||||||
header.style.borderBottomColor = picked.border;
|
header.style.borderBottomColor = picked.border;
|
||||||
|
|||||||
@@ -15,6 +15,11 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
/* Feiner Fensterrahmen fürs dekorationslose Fenster (nur Linux). */
|
||||||
|
:root[data-platform="other"] body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #313244;
|
||||||
|
}
|
||||||
header {
|
header {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
flex: none;
|
flex: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user