From 51f07e054322fd72dcae9e98534de21e5d948e89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= Date: Sun, 24 May 2026 09:22:39 +0200 Subject: [PATCH] remove search button from nav bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tobias Erbshäußer --- frontend/src/components/nav.njk | 23 ++++----- frontend/src/components/nav.ts | 83 +++++++++++++-------------------- 2 files changed, 41 insertions(+), 65 deletions(-) diff --git a/frontend/src/components/nav.njk b/frontend/src/components/nav.njk index 4504575..7fbae08 100644 --- a/frontend/src/components/nav.njk +++ b/frontend/src/components/nav.njk @@ -20,7 +20,7 @@ border-radius: 0.5rem; display: grid; gap: 1rem; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr; grid-template-rows: auto; padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding); } @@ -70,14 +70,14 @@ width: 100%; } - dialog.search { + dialog.exec { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } - dialog.search > div { + dialog.exec > div { color: var(--light-gray); display: grid; gap: var(--medium-padding); @@ -102,7 +102,7 @@ } @media (min-width: 860px) { - dialog.search > div { + dialog.exec > div { width: 80rem; } } @@ -116,15 +116,10 @@ - + - - - - - @@ -132,15 +127,15 @@
- +
- - + +
-
diff --git a/frontend/src/components/nav.ts b/frontend/src/components/nav.ts index b599a72..2deecee 100644 --- a/frontend/src/components/nav.ts +++ b/frontend/src/components/nav.ts @@ -1,4 +1,4 @@ -import {Debouncer, sendApiPost, TesoftComponent} from "../scripts/main.ts"; +import {sendApiPost, TesoftComponent} from "../scripts/main.ts"; import {TesoftButton} from "./button.ts"; import {TesoftInput} from "./input.ts"; @@ -7,11 +7,9 @@ export class TesoftNav extends TesoftComponent { private readonly smallMenuButtonSpan: HTMLSpanElement; private readonly smallMenuDialog: HTMLDialogElement; private readonly smallMenuDiv: HTMLDivElement; - private readonly searchButton: TesoftButton; - private readonly searchDialog: HTMLDialogElement; - private readonly searchInput: TesoftInput; - private readonly searchResultsDiv: HTMLDivElement; - private readonly debouncedSearch: Debouncer<[string, boolean]>; + private readonly execDialog: HTMLDialogElement; + private readonly execInput: TesoftInput; + private readonly execResultsDiv: HTMLDivElement; private readonly commands: Map Promise>; constructor() { @@ -27,11 +25,9 @@ export class TesoftNav extends TesoftComponent { this.smallMenuButtonSpan = shadowRoot.querySelector("tesoft-button.small-menu span")!; this.smallMenuDialog = shadowRoot.querySelector("dialog.small-menu")!; this.smallMenuDiv = shadowRoot.querySelector("dialog.small-menu > div")!; - this.searchButton = shadowRoot.querySelector("tesoft-button.search")!; - this.searchDialog = shadowRoot.querySelector("dialog.search")!; - this.searchInput = shadowRoot.querySelector("dialog.search tesoft-input")!; - this.searchResultsDiv = shadowRoot.querySelector("dialog.search .results")!; - this.debouncedSearch = new Debouncer(this.applySearch.bind(this)); + this.execDialog = shadowRoot.querySelector("dialog.exec")!; + this.execInput = shadowRoot.querySelector("dialog.exec tesoft-input")!; + this.execResultsDiv = shadowRoot.querySelector("dialog.exec .results")!; this.commands = new Map Promise>([ ["login", this.login.bind(this)], ["logout", this.logout.bind(this)], @@ -45,20 +41,9 @@ export class TesoftNav extends TesoftComponent { this.smallMenuDialog.style.width = `${this.smallMenuButton.offsetWidth}px`; }); - this.searchButton.addEventListener("click", async () => { - await this.applySearch("", false); - this.searchDialog.showModal(); - this.searchInput.value = ""; - this.searchInput.focus(); - }); - - this.searchInput.addEventListener("input", () => { - this.debouncedSearch.run(this.searchInput.value, false); - }); - - this.searchInput.addEventListener("keyup", async (event) => { + this.execInput.addEventListener("keyup", async (event) => { if (event.key === "Enter") { - await this.applySearch(this.searchInput.value, true); + await this.exec(this.execInput.value); } }); @@ -68,6 +53,17 @@ export class TesoftNav extends TesoftComponent { this.smallMenuButtonSpan.textContent = selected.textContent; } }); + + document.addEventListener("keyup", async (event) => { + if (event.ctrlKey && event.key === "p") { + event.preventDefault(); + + await this.exec(""); + this.execDialog.showModal(); + this.execInput.value = ""; + this.execInput.focus(); + } + }); } private updateSmallMenu() { @@ -85,37 +81,22 @@ export class TesoftNav extends TesoftComponent { } } - private async applySearch(text: string, confirmed: boolean) { - if (confirmed) { - this.debouncedSearch.stop(); - } + private async exec(text: string) { + this.setResultText("Press enter to send command."); - this.setResultText(""); + if (text) { + const spaceIndex = text.indexOf(" "); + const prefix = spaceIndex === -1 ? text : text.substring(0, spaceIndex); - if (text.startsWith(">")) { - if (confirmed) { - await this.applyCommand(text.substring(1).trimStart()); - } else { - this.setResultText("Press enter to send command."); + const command = this.commands.get(prefix); + if (command === undefined) { + this.setResultText("Unknown command."); + return; } - } else { - console.log(text); - // TODO + await command(text.substring(prefix.length).trimStart()); } } - private async applyCommand(text: string) { - const spaceIndex = text.indexOf(" "); - const prefix = spaceIndex === -1 ? text : text.substring(0, spaceIndex); - - const command = this.commands.get(prefix); - if (command === undefined) { - this.setResultText("Unknown command."); - return; - } - await command(text.substring(prefix.length).trimStart()); - } - private async login(text: string) { const response = await sendApiPost("login", { password: text, @@ -141,12 +122,12 @@ export class TesoftNav extends TesoftComponent { } private setResultText(text: string) { - this.searchResultsDiv.innerHTML = ""; + this.execResultsDiv.innerHTML = ""; if (text) { const div = document.createElement("div"); div.textContent = text; - this.searchResultsDiv.appendChild(div); + this.execResultsDiv.appendChild(div); } } }