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

Improve "Show Only Mine" switch visibility (#494)

Browse Source
This commit is contained in:
sua yoo 2023-01-17 16:28:06 -08:00 committed by GitHub
parent ebb634a20d
commit b0745a63f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/src/pages/archive/crawl-templates-list.ts
View File

@ -109,7 +109,9 @@ export class CrawlTemplatesList extends LiteElement {
render() { render() {
return html` return html`
<div class="mb-4">${this.renderControls()}</div> <div class="sticky z-10 mb-2 top-0 py-2 bg-neutral-0">
${this.renderControls()}
</div>
${this.crawlTemplates ${this.crawlTemplates
? this.crawlTemplates.length ? this.crawlTemplates.length
@ -177,108 +179,105 @@ export class CrawlTemplatesList extends LiteElement {
</div> </div>
</div> </div>
${this.crawlTemplates && this.crawlTemplates.length <div class="flex flex-wrap items-center justify-between">
? html`<div class="flex flex-wrap items-center justify-between"> <div class="text-sm">
<div class="text-sm"> <button
<button class="inline-block font-medium border-2 border-transparent ${this
class="inline-block font-medium border-2 border-transparent ${this .filterByScheduled === null
.filterByScheduled === null ? "border-b-current text-primary"
? "border-b-current text-primary" : "text-neutral-500"} mr-3"
: "text-neutral-500"} mr-3" aria-selected=${this.filterByScheduled === null}
aria-selected=${this.filterByScheduled === null} @click=${() => (this.filterByScheduled = null)}
@click=${() => (this.filterByScheduled = null)} >
> ${msg("All")}
${msg("All")} </button>
</button> <button
<button class="inline-block font-medium border-2 border-transparent ${this
class="inline-block font-medium border-2 border-transparent ${this .filterByScheduled === true
.filterByScheduled === true ? "border-b-current text-primary"
? "border-b-current text-primary" : "text-neutral-500"} mr-3"
: "text-neutral-500"} mr-3" aria-selected=${this.filterByScheduled === true}
aria-selected=${this.filterByScheduled === true} @click=${() => (this.filterByScheduled = true)}
@click=${() => (this.filterByScheduled = true)} >
> ${msg("Scheduled")}
${msg("Scheduled")} </button>
</button> <button
<button class="inline-block font-medium border-2 border-transparent ${this
class="inline-block font-medium border-2 border-transparent ${this .filterByScheduled === false
.filterByScheduled === false ? "border-b-current text-primary"
? "border-b-current text-primary" : "text-neutral-500"} mr-3"
: "text-neutral-500"} mr-3" aria-selected=${this.filterByScheduled === false}
aria-selected=${this.filterByScheduled === false} @click=${() => (this.filterByScheduled = false)}
@click=${() => (this.filterByScheduled = false)} >
> ${msg("No schedule")}
${msg("No schedule")} </button>
</button> </div>
</div> <div class="flex items-center justify-end">
<div class="flex items-center justify-end"> ${this.userId
${this.userId ? html`<label class="mr-3">
? html`<label class="mr-3"> <span class="text-neutral-500 mr-1"
<span class="text-neutral-500 mr-1" >${msg("Show Only Mine")}</span
>${msg("Show Only Mine")}</span
>
<sl-switch
@sl-change=${(e: CustomEvent) =>
(this.filterByCurrentUser = (
e.target as SlCheckbox
).checked)}
?checked=${this.filterByCurrentUser}
></sl-switch>
</label>`
: ""}
<div class="whitespace-nowrap text-sm text-0-500 mr-2">
${msg("Sort By")}
</div>
<sl-dropdown
placement="bottom-end"
distance="4"
@sl-select=${(e: any) => {
const [field, direction] = e.detail.item.value.split("_");
this.orderBy = {
field: field,
direction: direction,
};
}}
>
<sl-button
slot="trigger"
size="small"
pill
caret
?disabled=${!this.crawlTemplates?.length}
>${(sortableFieldLabels as any)[this.orderBy.field] ||
sortableFieldLabels[
`${this.orderBy.field}_${this.orderBy.direction}`
]}</sl-button
> >
<sl-menu> <sl-switch
${Object.entries(sortableFieldLabels).map( @sl-change=${(e: CustomEvent) =>
([value, label]) => html` (this.filterByCurrentUser = (
<sl-menu-item e.target as SlCheckbox
value=${value} ).checked)}
?checked=${value === ?checked=${this.filterByCurrentUser}
`${this.orderBy.field}_${this.orderBy.direction}`} ></sl-switch>
>${label}</sl-menu-item </label>`
> : ""}
`
)} <div class="whitespace-nowrap text-sm text-0-500 mr-2">
</sl-menu> ${msg("Sort By")}
</sl-dropdown> </div>
<sl-icon-button <sl-dropdown
name="arrow-down-up" placement="bottom-end"
label=${msg("Reverse sort")} distance="4"
@click=${() => { @sl-select=${(e: any) => {
this.orderBy = { const [field, direction] = e.detail.item.value.split("_");
...this.orderBy, this.orderBy = {
direction: field: field,
this.orderBy.direction === "asc" ? "desc" : "asc", direction: direction,
}; };
}} }}
></sl-icon-button> >
</div> <sl-button
</div>` slot="trigger"
: ""} size="small"
pill
caret
?disabled=${!this.crawlTemplates?.length}
>${(sortableFieldLabels as any)[this.orderBy.field] ||
sortableFieldLabels[
`${this.orderBy.field}_${this.orderBy.direction}`
]}</sl-button
>
<sl-menu>
${Object.entries(sortableFieldLabels).map(
([value, label]) => html`
<sl-menu-item
value=${value}
?checked=${value ===
`${this.orderBy.field}_${this.orderBy.direction}`}
>${label}</sl-menu-item
>
`
)}
</sl-menu>
</sl-dropdown>
<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>
`; `;
} }

4
frontend/src/pages/archive/crawls-list.ts
View File

@ -142,7 +142,9 @@ export class CrawlsList extends LiteElement {
return html` return html`
<main> <main>
<header class="mb-4">${this.renderControls()}</header> <header class="sticky z-10 mb-3 top-0 py-2 bg-neutral-0">
${this.renderControls()}
</header>
<section> <section>
${this.crawls.length ${this.crawls.length
? this.renderCrawlList() ? this.renderCrawlList()