VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve consistency

Browse Source
This commit is contained in:
marlon-erler
2026-09-23 00:29:48 +02:00
parent 2b446ac203
commit 9607a9f80c
8 changed files with 345 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Modals/searchModal.tsx
+92 -101
View File
@@ -4,6 +4,7 @@ import { StringToOption } from "../Components/option";
import * as React from "../../react";
import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import {DeletableListItem} from "../Components/deletableListItem";
export function SearchModal<T>(
coreViewModel: CoreViewModel,
@@ -12,92 +13,92 @@ export function SearchModal<T>(
isOpen: React.State<boolean>,
) {
function close() {
isOpen.value = false;
isOpen.value = false;
}
const suggestionId = v4();
isOpen.subscribe((isOpen) => {
if (!isOpen) return;
ViewController.setFocusWithDelay();
if (!isOpen) return;
ViewController.setFocusWithDelay();
});
return (
<div class="modal" toggle:open={isOpen} extended>
<div>
<main>
<h2>{headline}</h2>
<div class="flex-row">
<input
id="focused"
style="max-width: unset"
placeholder={
coreViewModel.translations.general.searchLabel
}
bind:value={searchViewModel.searchInput}
on:enter={searchViewModel.applySearch}
list={suggestionId}
></input>
<datalist
hidden
id={suggestionId}
children:append={[
searchViewModel.suggestions,
StringToOption,
]}
></datalist>
<button
class="standard"
aria-label={
coreViewModel.translations.general
.searchButtonClearAudioLabel
}
on:click={searchViewModel.clear}
toggle:disabled={searchViewModel.cannotClear}
>
<span class="icon">close</span>
</button>
<button
class="primary"
aria-label={
coreViewModel.translations.general
.searchButtonAudioLabel
}
on:click={searchViewModel.applySearch}
toggle:disabled={searchViewModel.cannotApplySearch}
>
<span class="icon">search</span>
</button>
</div>
<div class="modal" toggle:open={isOpen} extended>
<div>
<main>
<h2>{headline}</h2>
<div class="flex-row">
<input
id="focused"
style="max-width: unset"
placeholder={
coreViewModel.translations.general.searchLabel
}
bind:value={searchViewModel.searchInput}
on:enter={searchViewModel.applySearch}
list={suggestionId}
></input>
<datalist
hidden
id={suggestionId}
children:append={[
searchViewModel.suggestions,
StringToOption,
]}
></datalist>
<button
class="standard"
aria-label={
coreViewModel.translations.general
.searchButtonClearAudioLabel
}
on:click={searchViewModel.clear}
toggle:disabled={searchViewModel.cannotClear}
>
<span class="icon">close</span>
</button>
<button
class="primary"
aria-label={
coreViewModel.translations.general
.searchButtonAudioLabel
}
on:click={searchViewModel.applySearch}
toggle:disabled={searchViewModel.cannotApplySearch}
>
<span class="icon">search</span>
</button>
</div>
<div toggle:hidden={searchViewModel.hasNoSuggestions}>
<hr></hr>
<h3>
{
coreViewModel.translations.general
.searchSuggestionsLabel
}
</h3>
<div
class="flex-column gap"
children:append={[
searchViewModel.suggestions,
(suggestion: string) =>
SuggestionView(
suggestion,
searchViewModel,
coreViewModel,
),
]}
></div>
</div>
</main>
<button on:click={close}>
{coreViewModel.translations.general.closeButton}
<span class="icon">close</span>
</button>
</div>
</div>
<div toggle:hidden={searchViewModel.hasNoSuggestions}>
<hr></hr>
<h3>
{
coreViewModel.translations.general
.searchSuggestionsLabel
}
</h3>
<div
class="flex-column gap"
children:append={[
searchViewModel.suggestions,
(suggestion: string) =>
SuggestionView(
suggestion,
searchViewModel,
coreViewModel,
),
]}
></div>
</div>
</main>
<button on:click={close}>
{coreViewModel.translations.general.closeButton}
<span class="icon">close</span>
</button>
</div>
</div>
);
}
@@ -107,36 +108,26 @@ function SuggestionView<T>(
coreViewModel: CoreViewModel,
) {
const isApplied = React.createProxyState(
[searchViewModel.appliedQuery],
() => searchViewModel.appliedQuery.value == suggestion,
[searchViewModel.appliedQuery],
() => searchViewModel.appliedQuery.value == suggestion,
);
function deleteSuggestion() {
searchViewModel.deleteSuggestion(suggestion);
searchViewModel.deleteSuggestion(suggestion);
}
function applySuggestion() {
searchViewModel.search(suggestion);
searchViewModel.search(suggestion);
}
return (
<div class="flex-row surface align-center">
<span class="width-100 flex-1 padding-h">{suggestion}</span>
<button
class="danger"
aria-label={coreViewModel.translations.general.deleteButton}
on:click={deleteSuggestion}
>
<span class="icon">delete</span>
</button>
<button
class="primary"
aria-label={coreViewModel.translations.general.applyButton}
on:click={applySuggestion}
toggle:disabled={isApplied}
>
<span class="icon">check</span>
</button>
</div>
);
return DeletableListItem(coreViewModel, suggestion,
<button
class="primary"
aria-label={coreViewModel.translations.general.applyButton}
on:click={applySuggestion}
toggle:disabled={isApplied}
>
<span class="icon">check</span>
</button>
, deleteSuggestion)
}