terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

remove search button from nav bar

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:22:39 +02:00
parent 35d3211615
commit 51f07e0543
2 changed files with 41 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/nav.njk
+9 -14
View File
@@ -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 @@
<tesoft-button class="small-menu">
<span></span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
</svg>
</tesoft-button>
<tesoft-button class="search">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</tesoft-button>
</div>
</nav>
@@ -132,15 +127,15 @@
<div></div>
</dialog>
<dialog class="search" closedby="any">
<dialog class="exec" closedby="any">
<div>
<tesoft-input>
<svg slot="left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
<svg slot="left" xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960"
width="2.4rem">
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
</svg>
</tesoft-input>
<div class="results">
<!-- TODO -->
</div>
</div>
</dialog>
frontend/src/components/nav.ts
+32 -51
View File
@@ -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<string, (text: string) => Promise<void>>;
constructor() {
@@ -27,11 +25,9 @@ export class TesoftNav extends TesoftComponent {
this.smallMenuButtonSpan = shadowRoot.querySelector<HTMLSpanElement>("tesoft-button.small-menu span")!;
this.smallMenuDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.small-menu")!;
this.smallMenuDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.small-menu > div")!;
this.searchButton = shadowRoot.querySelector<TesoftButton>("tesoft-button.search")!;
this.searchDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.search")!;
this.searchInput = shadowRoot.querySelector<TesoftInput>("dialog.search tesoft-input")!;
this.searchResultsDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.search .results")!;
this.debouncedSearch = new Debouncer(this.applySearch.bind(this));
this.execDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.exec")!;
this.execInput = shadowRoot.querySelector<TesoftInput>("dialog.exec tesoft-input")!;
this.execResultsDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.exec .results")!;
this.commands = new Map<string, (text: string) => Promise<void>>([
["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);
}
}
}