trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: fix border between search buttons

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-18 17:34:28 +01:00
parent 362d72da8c
commit d4ce0e8e41
2 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/elements/table/Table.ts
View file

@ -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>

79
web/src/elements/table/TableSearch.ts
View file

@ -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>`;
}
}