fix: Update browser title (#2054)
Updates browser title when visiting the following pages: - Superadmin dashboard - Org top-level pages - Account settings
This commit is contained in:
sua yoo
GitHub
parent
988d9c9e2b
commit
eb2dab8ae0
24
frontend/src/components/document-title.ts
Normal file
24
frontend/src/components/document-title.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { LitElement, type PropertyValues } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
/**
|
||||
* Updates user's browser title bar
|
||||
*/
|
||||
@customElement("btrix-document-title")
|
||||
export class DocumentTitle extends LitElement {
|
||||
@property({ type: String })
|
||||
title = "";
|
||||
|
||||
disconnectedCallback(): void {
|
||||
// Reset back to default title
|
||||
document.title = "Browsertrix";
|
||||
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("title") && this.title) {
|
||||
document.title = this.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import "./ui";
|
||||
import "./utils";
|
||||
import "./document-title";
|
||||
|
||||
import("./orgs-list");
|
||||
import("./not-found");
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
import("./account-settings");
|
||||
import("./invite-form");
|
||||
import("./sign-up-form");
|
||||
|
||||
@ -124,6 +124,10 @@ export class AccountSettings extends LiteElement {
|
||||
render() {
|
||||
if (!this.userInfo) return;
|
||||
return html`
|
||||
<btrix-document-title
|
||||
title=${msg("Account Settings")}
|
||||
></btrix-document-title>
|
||||
|
||||
<div class="mx-auto max-w-screen-sm">
|
||||
<h1 class="mb-7 text-xl font-semibold leading-8">
|
||||
${msg("Account Settings")}
|
||||
@ -99,6 +99,10 @@ export class Home extends LiteElement {
|
||||
|
||||
if (this.userInfo.orgs.length && !this.orgList) {
|
||||
return html`
|
||||
<btrix-document-title
|
||||
title=${msg("Admin dashboard")}
|
||||
></btrix-document-title>
|
||||
|
||||
<div class="my-24 flex items-center justify-center text-3xl">
|
||||
<sl-spinner></sl-spinner>
|
||||
</div>
|
||||
@ -106,6 +110,10 @@ export class Home extends LiteElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<btrix-document-title
|
||||
title=${msg("Admin dashboard")}
|
||||
></btrix-document-title>
|
||||
|
||||
<div class="bg-white">
|
||||
<header
|
||||
class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4 md:py-8"
|
||||
|
||||
@ -95,14 +95,16 @@ export class Crawls extends LiteElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <div
|
||||
class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4"
|
||||
>
|
||||
${this.crawlId
|
||||
? // Render loading indicator while preparing to redirect
|
||||
this.renderLoading()
|
||||
: this.renderCrawls()}
|
||||
</div>`;
|
||||
return html`<btrix-document-title
|
||||
title=${msg("Running crawls")}
|
||||
></btrix-document-title>
|
||||
|
||||
<div class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4">
|
||||
${this.crawlId
|
||||
? // Render loading indicator while preparing to redirect
|
||||
this.renderLoading()
|
||||
: this.renderCrawls()}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
private renderCrawls() {
|
||||
|
||||
@ -9,3 +9,4 @@ import(/* webpackChunkName: "verify" */ "./verify");
|
||||
import(/* webpackChunkName: "reset-password" */ "./reset-password");
|
||||
import(/* webpackChunkName: "users-invite" */ "./users-invite");
|
||||
import(/* webpackChunkName: "accept-invite" */ "./invite/accept");
|
||||
import(/* webpackChunkName: "account-settings" */ "./account-settings");
|
||||
|
||||
@ -87,6 +87,10 @@ export class AcceptInvite extends BtrixElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<btrix-document-title
|
||||
title=${msg("Accept invitation")}
|
||||
></btrix-document-title>
|
||||
|
||||
<section
|
||||
class="flex min-h-full w-full flex-col justify-center gap-12 p-5 md:flex-row md:gap-16 md:py-16"
|
||||
>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { localized, msg, str } from "@lit/localize";
|
||||
import { nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { choose } from "lit/directives/choose.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -231,6 +232,10 @@ export class Org extends LiteElement {
|
||||
this.orgTab === "items" && (this.params as OrgParams["items"]).qaTab;
|
||||
|
||||
return html`
|
||||
<btrix-document-title
|
||||
title=${ifDefined(this.userOrg?.name)}
|
||||
></btrix-document-title>
|
||||
|
||||
<div class="flex min-h-full flex-col">
|
||||
<btrix-org-status-banner></btrix-org-status-banner>
|
||||
${this.renderOrgNavBar()}
|
||||
@ -240,19 +245,58 @@ export class Org extends LiteElement {
|
||||
: "w-full max-w-screen-desktop pt-7"} mx-auto box-border flex flex-1 flex-col p-3"
|
||||
aria-labelledby="${this.orgTab}-tab"
|
||||
>
|
||||
${when(this.userOrg, () =>
|
||||
${when(this.userOrg, (userOrg) =>
|
||||
choose(
|
||||
this.orgTab,
|
||||
[
|
||||
["home", this.renderDashboard],
|
||||
["items", this.renderArchivedItem],
|
||||
["workflows", this.renderWorkflows],
|
||||
["browser-profiles", this.renderBrowserProfiles],
|
||||
["collections", this.renderCollections],
|
||||
[
|
||||
"items",
|
||||
() => html`
|
||||
<btrix-document-title
|
||||
title=${`${msg("Archived Items")} - ${userOrg.name}`}
|
||||
></btrix-document-title>
|
||||
${this.renderArchivedItem()}
|
||||
`,
|
||||
],
|
||||
[
|
||||
"workflows",
|
||||
() => html`
|
||||
<btrix-document-title
|
||||
title=${`${msg("Crawl Workflows")} - ${userOrg.name}`}
|
||||
></btrix-document-title>
|
||||
${this.renderWorkflows()}
|
||||
`,
|
||||
],
|
||||
[
|
||||
"browser-profiles",
|
||||
() => html`
|
||||
<btrix-document-title
|
||||
title=${`${msg("Browser Profiles")} - ${userOrg.name}`}
|
||||
></btrix-document-title>
|
||||
${this.renderBrowserProfiles()}
|
||||
`,
|
||||
],
|
||||
[
|
||||
"collections",
|
||||
() => html`
|
||||
<btrix-document-title
|
||||
title=${`${msg("Collections")} - ${userOrg.name}`}
|
||||
></btrix-document-title>
|
||||
${this.renderCollections()}
|
||||
`,
|
||||
],
|
||||
[
|
||||
"settings",
|
||||
() =>
|
||||
this.appState.isAdmin ? this.renderOrgSettings() : html``,
|
||||
this.appState.isAdmin
|
||||
? html`
|
||||
<btrix-document-title
|
||||
title=${`${msg("Org Settings")} - ${userOrg.name}`}
|
||||
></btrix-document-title>
|
||||
${this.renderOrgSettings()}
|
||||
`
|
||||
: nothing,
|
||||
],
|
||||
],
|
||||
() =>
|
||||
@ -429,7 +473,7 @@ export class Org extends LiteElement {
|
||||
></btrix-archived-item-qa>`;
|
||||
}
|
||||
|
||||
return html` <btrix-archived-item-detail
|
||||
return html`<btrix-archived-item-detail
|
||||
crawlId=${params.itemId}
|
||||
collectionId=${params.collectionId || ""}
|
||||
workflowId=${params.workflowId || ""}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user