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

Always sub-navigation bar for selected team (#444)

Browse Source 
* move nav

* highlight correct tab
This commit is contained in:
sua yoo 2023-01-09 19:58:19 -08:00 committed by GitHub
parent d1b59c9bd0
commit 2dcf5cb36b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/index.ts
View File

@ -255,7 +255,7 @@ export class App extends LiteElement {
</style>
<div class="min-w-screen min-h-screen flex flex-col">
${this.renderNavBar()}
${this.renderNavBar()} ${this.renderSubNavBar()}
<main class="relative flex-auto flex">${this.renderPage()}</main>
<div class="border-t border-neutral-100">${this.renderFooter()}</div>
</div>
@ -667,6 +667,57 @@ export class App extends LiteElement {
></btrix-not-found>`;
}
private renderSubNavBar() {
if (!this.userInfo || !this.selectedTeamId) return;
return html`
<div class="w-full max-w-screen-lg mx-auto px-3 box-border">
<nav class="-ml-3 flex items-end overflow-x-auto">
${this.renderNavTab({ tabName: "crawls", label: msg("Crawls") })}
${this.renderNavTab({
tabName: "crawl-templates",
label: msg("Crawl Configs"),
})}
${this.renderNavTab({
tabName: "browser-profiles",
label: msg("Browser Profiles"),
})}
${this.renderNavTab({ tabName: "members", label: msg("Members") })}
</nav>
</div>
<hr />
`;
}
private renderNavTab({
tabName,
label,
}: {
tabName: ArchiveTab;
label: string;
}) {
const isActive = this.viewState.params.tab === tabName;
return html`
<a
id="${tabName}-tab"
class="block flex-shrink-0 px-3 hover:bg-neutral-50 rounded-t transition-colors"
href=${`/archives/${this.selectedTeamId}/${tabName}`}
aria-selected=${isActive}
@click=${this.navLink}
>
<div
class="text-sm font-medium py-3 border-b-2 transition-colors ${isActive
? "border-primary text-primary"
: "border-transparent text-neutral-500 hover:border-neutral-100 hover:text-neutral-900"}"
>
${label}
</div>
</a>
`;
}
private renderFindCrawl() {
return html`
<sl-dropdown

51
frontend/src/pages/archive/index.ts
View File

@ -113,8 +113,6 @@ export class Archive extends LiteElement {
`;
}
const showMembersTab = Boolean(this.archive.users);
let tabPanelContent = "" as any;
switch (this.archiveTab) {
@ -141,26 +139,7 @@ export class Archive extends LiteElement {
break;
}
return html`<article>
<div class="w-full max-w-screen-lg mx-auto px-3 box-border">
<nav class="-ml-3 flex items-end overflow-x-auto">
${this.renderNavTab({ tabName: "crawls", label: msg("Crawls") })}
${this.renderNavTab({
tabName: "crawl-templates",
label: msg("Crawl Configs"),
})}
${this.renderNavTab({
tabName: "browser-profiles",
label: msg("Browser Profiles"),
})}
${showMembersTab
? this.renderNavTab({ tabName: "members", label: msg("Members") })
: ""}
</nav>
</div>
<hr />
return html`
<main>
<div
class="w-full max-w-screen-lg mx-auto px-3 box-border py-5"
@ -169,34 +148,6 @@ export class Archive extends LiteElement {
${tabPanelContent}
</div>
</main>
</article>`;
}
private renderNavTab({
tabName,
label,
}: {
tabName: ArchiveTab;
label: string;
}) {
const isActive = this.archiveTab === tabName;
return html`
<a
id="${tabName}-tab"
class="block flex-shrink-0 px-3 hover:bg-neutral-50 rounded-t transition-colors"
href=${`/archives/${this.archiveId}/${tabName}`}
aria-selected=${isActive}
@click=${this.navLink}
>
<div
class="text-sm font-medium py-3 border-b-2 transition-colors ${isActive
? "border-primary text-primary"
: "border-transparent text-neutral-500 hover:border-neutral-100 hover:text-neutral-900"}"
>
${label}
</div>
</a>
`;
}