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>

11
web/src/elements/table/TableSearch.ts
View File

@ -36,16 +36,13 @@ 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">
<form
class="pf-c-input-group" class="pf-c-input-group"
method="GET" method="GET"
@submit=${(e: Event) => { @submit=${(e: Event) => {
e.preventDefault(); e.preventDefault();
if (!this.onSearch) return; if (!this.onSearch) return;
const el = const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
if (!el) return; if (!el) return;
if (el.value === "") return; if (el.value === "") return;
this.onSearch(el?.value); this.onSearch(el?.value);
@ -75,8 +72,6 @@ export class TableSearch extends LitElement {
<button class="pf-c-button pf-m-control" type="submit"> <button class="pf-c-button pf-m-control" type="submit">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
</button> </button>
</form> </form>`;
</div>
</div>`;
} }
} }