tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moves dropdown beside search bar

Browse Source 
- Improves responsiveness for top two items
This commit is contained in:
Henry Wilkinson 2023-04-27 02:03:09 -04:00
parent 81aeba6e92
commit 577942805b
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/pages/org/workflows-list.ts
View File

@ -210,8 +210,8 @@ export class WorkflowsList extends LiteElement {
private renderControls() {
return html`
<div class="flex flex-wrap items-center">
<div class="grow mr-4 mb-4">
<div class="flex flex-wrap mb-2 items-center md:gap-4 gap-2">
<div class="grow">
<sl-input
class="w-full"
slot="trigger"
@ -224,6 +224,43 @@ export class WorkflowsList extends LiteElement {
<sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>
</div>
<div class="flex items-center w-full md:w-fit">
<div class="whitespace-nowrap text-sm text-0-500 mr-2">
${msg("Sort by:")}
</div>
<sl-select
class="flex-1 md:min-w-[9.2rem]"
size="small"
pill
value=${this.orderBy.field}
@sl-select=${(e: any) => {
const field = e.detail.item.value as SortField;
this.orderBy = {
field: field,
direction:
sortableFields[field].defaultDirection ||
this.orderBy.direction,
};
}}
>
${Object.entries(sortableFields).map(
([value, { label }]) => html`
<sl-menu-item value=${value}>${label}</sl-menu-item>
`
)}
</sl-select>
<sl-icon-button
name="arrow-down-up"
label=${msg("Reverse sort")}
@click=${() => {
this.orderBy = {
...this.orderBy,
direction: this.orderBy.direction === "asc" ? "desc" : "asc",
};
}}
></sl-icon-button>
</div>
</div>
<div class="flex flex-wrap items-center justify-between">
@ -268,41 +305,6 @@ export class WorkflowsList extends LiteElement {
?checked=${this.filterByCurrentUser}
></sl-switch>
</label>
<div class="whitespace-nowrap text-sm text-0-500 mr-2">
${msg("Sort by:")}
</div>
<sl-select
class="flex-1 md:min-w-[9.2rem]"
size="small"
pill
value=${this.orderBy.field}
@sl-select=${(e: any) => {
const field = e.detail.item.value as SortField;
this.orderBy = {
field: field,
direction:
sortableFields[field].defaultDirection ||
this.orderBy.direction,
};
}}
>
${Object.entries(sortableFields).map(
([value, { label }]) => html`
<sl-menu-item value=${value}>${label}</sl-menu-item>
`
)}
</sl-select>
<sl-icon-button
name="arrow-down-up"
label=${msg("Reverse sort")}
@click=${() => {
this.orderBy = {
...this.orderBy,
direction: this.orderBy.direction === "asc" ? "desc" : "asc",
};
}}
></sl-icon-button>
</div>
</div>
`;