web/elements: fix border between search buttons
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
362d72da8c
commit
d4ce0e8e41
|
@ -343,6 +343,7 @@ export abstract class Table<T> extends LitElement {
|
|||
return html``;
|
||||
}
|
||||
return html`<ak-table-search
|
||||
class="pf-c-toolbar__item pf-m-search-filter"
|
||||
value=${ifDefined(this.search)}
|
||||
.onSearch=${(value: string) => {
|
||||
this.search = value;
|
||||
|
@ -363,7 +364,7 @@ export abstract class Table<T> extends LitElement {
|
|||
renderToolbarContainer(): TemplateResult {
|
||||
return html`<div class="pf-c-toolbar">
|
||||
<div class="pf-c-toolbar__content">
|
||||
<div class="pf-m-search-filter">${this.renderSearch()}</div>
|
||||
<div class="pf-c-toolbar__group pf-m-search-filter">${this.renderSearch()}</div>
|
||||
<div class="pf-c-toolbar__bulk-select">${this.renderToolbar()}</div>
|
||||
<div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div>
|
||||
<div class="pf-c-toolbar__group">${this.renderToolbarSelected()}</div>
|
||||
|
|
|
@ -36,47 +36,42 @@ export class TableSearch extends LitElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-toolbar__group pf-m-filter-group">
|
||||
<div class="pf-c-toolbar__item pf-m-search-filter">
|
||||
<form
|
||||
class="pf-c-input-group"
|
||||
method="GET"
|
||||
@submit=${(e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!this.onSearch) return;
|
||||
const el =
|
||||
this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
|
||||
if (!el) return;
|
||||
if (el.value === "") return;
|
||||
this.onSearch(el?.value);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
name="search"
|
||||
type="search"
|
||||
placeholder=${t`Search...`}
|
||||
value="${ifDefined(this.value)}"
|
||||
@search=${(ev: Event) => {
|
||||
if (!this.onSearch) return;
|
||||
this.onSearch((ev.target as HTMLInputElement).value);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
class="pf-c-button pf-m-control"
|
||||
type="reset"
|
||||
@click=${() => {
|
||||
if (!this.onSearch) return;
|
||||
this.onSearch("");
|
||||
}}
|
||||
>
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-control" type="submit">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>`;
|
||||
return html`<form
|
||||
class="pf-c-input-group"
|
||||
method="GET"
|
||||
@submit=${(e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!this.onSearch) return;
|
||||
const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
|
||||
if (!el) return;
|
||||
if (el.value === "") return;
|
||||
this.onSearch(el?.value);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
name="search"
|
||||
type="search"
|
||||
placeholder=${t`Search...`}
|
||||
value="${ifDefined(this.value)}"
|
||||
@search=${(ev: Event) => {
|
||||
if (!this.onSearch) return;
|
||||
this.onSearch((ev.target as HTMLInputElement).value);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
class="pf-c-button pf-m-control"
|
||||
type="reset"
|
||||
@click=${() => {
|
||||
if (!this.onSearch) return;
|
||||
this.onSearch("");
|
||||
}}
|
||||
>
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="pf-c-button pf-m-control" type="submit">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>`;
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue