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 

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``;
} }
return html`<ak-table-search return html`<ak-table-search
class="pf-c-toolbar__item pf-m-search-filter"
value=${ifDefined(this.search)} value=${ifDefined(this.search)}
.onSearch=${(value: string) => { .onSearch=${(value: string) => {
this.search = value; this.search = value;
@ -363,7 +364,7 @@ export abstract class Table<T> extends LitElement {
renderToolbarContainer(): TemplateResult { renderToolbarContainer(): TemplateResult {
return html`<div class="pf-c-toolbar"> return html`<div class="pf-c-toolbar">
<div class="pf-c-toolbar__content"> <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__bulk-select">${this.renderToolbar()}</div>
<div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div> <div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div>
<div class="pf-c-toolbar__group">${this.renderToolbarSelected()}</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 { render(): TemplateResult {
return html`<div class="pf-c-toolbar__group pf-m-filter-group"> return html`<form
<div class="pf-c-toolbar__item pf-m-search-filter"> class="pf-c-input-group"
<form method="GET"
class="pf-c-input-group" @submit=${(e: Event) => {
method="GET" e.preventDefault();
@submit=${(e: Event) => { if (!this.onSearch) return;
e.preventDefault(); const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
if (!this.onSearch) return; if (!el) return;
const el = if (el.value === "") return;
this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]"); this.onSearch(el?.value);
if (!el) return; }}
if (el.value === "") return; >
this.onSearch(el?.value); <input
}} class="pf-c-form-control"
> name="search"
<input type="search"
class="pf-c-form-control" placeholder=${t`Search...`}
name="search" value="${ifDefined(this.value)}"
type="search" @search=${(ev: Event) => {
placeholder=${t`Search...`} if (!this.onSearch) return;
value="${ifDefined(this.value)}" this.onSearch((ev.target as HTMLInputElement).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"
<button @click=${() => {
class="pf-c-button pf-m-control" if (!this.onSearch) return;
type="reset" this.onSearch("");
@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-times" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
</button> </button>
<button class="pf-c-button pf-m-control" type="submit"> </form>`;
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
</div>
</div>`;
} }
} }