diff --git a/docs/config.md b/docs/config.md index 36362111f52..24c2d60e792 100644 --- a/docs/config.md +++ b/docs/config.md @@ -212,7 +212,6 @@ Starting with `branding`, the following subproperties are available: 3. `auth_footer_links`: A list of links to add to the footer during login, registration, etc. Each entry must have a `text` and `url` property. - 4. `title_template`: A template string that can be used to configure the title of the application when not viewing a room. 5. `title_template_in_room`: A template string that can be used to configure the title of the application when viewing a room @@ -220,11 +219,11 @@ Starting with `branding`, the following subproperties are available: - `$brand` The name of the web app, as configured by the `brand` config value. - `$room_name` The friendly name of a room. Only applicable to `title_template_in_room`. -- `$status` The client's status, repesented as. - - The notification count, when at least one room is unread. - - "*" when no rooms are unread, but notifications are not muted. - - "Offline", when the client is offline. - - "", when the client isn't logged in or notifications are muted. +- `$status` The client's status, repesented as. + - The notification count, when at least one room is unread. + - "\*" when no rooms are unread, but notifications are not muted. + - "Offline", when the client is offline. + - "", when the client isn't logged in or notifications are muted. `embedded_pages` can be configured as such: diff --git a/playwright/e2e/branding/title.spec.ts b/playwright/e2e/branding/title.spec.ts index 71cb864aad0..2a2eb1593ab 100644 --- a/playwright/e2e/branding/title.spec.ts +++ b/playwright/e2e/branding/title.spec.ts @@ -11,36 +11,37 @@ import { expect, test } from "../../element-web-test"; * Tests for branding configuration **/ -test.describe('Test without branding config', () => { +test.describe("Test without branding config", () => { test("Shows standard branding when showing the home page", async ({ pageWithCredentials: page }) => { await page.goto("/"); await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 }); - expect(page.title()).toEqual('Element *'); + expect(page.title()).toEqual("Element *"); }); test("Shows standard branding when showing a room", async ({ app, pageWithCredentials: page }) => { await app.client.createRoom({ name: "Test Room" }); await app.viewRoomByName("Test Room"); - expect(page.title()).toEqual('Element * | Test Room'); + expect(page.title()).toEqual("Element * | Test Room"); }); }); -test.describe('Test with custom branding', () => { - test.use({ config: { - brand: 'TestBrand', - branding: { - title_template: 'TestingApp $ignoredParameter $brand $status $ignoredParameter', - title_template_in_room: 'TestingApp $brand $status $room_name $ignoredParameter' - } - }}); +test.describe("Test with custom branding", () => { + test.use({ + config: { + brand: "TestBrand", + branding: { + title_template: "TestingApp $ignoredParameter $brand $status $ignoredParameter", + title_template_in_room: "TestingApp $brand $status $room_name $ignoredParameter", + }, + }, + }); test("Shows custom branding when showing the home page", async ({ pageWithCredentials: page }) => { await page.goto("/"); await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 }); - expect(page.title()).toEqual('TestingApp TestBrand * $ignoredParameter'); + expect(page.title()).toEqual("TestingApp TestBrand * $ignoredParameter"); }); test("Shows custom branding when showing a room", async ({ app, pageWithCredentials: page }) => { await app.client.createRoom({ name: "Test Room" }); await app.viewRoomByName("Test Room"); - expect(page.title()).toEqual('TestingApp TestBrand * Test Room $ignoredParameter'); + expect(page.title()).toEqual("TestingApp TestBrand * Test Room $ignoredParameter"); }); }); - diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 0602e44260b..14990c9eecc 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -285,8 +285,8 @@ export default class MatrixChat extends React.PureComponent { // we don't do it as react state as i'm scared about triggering needless react refreshes. this.subTitleStatus = ""; - this.titleTemplate = props.config.branding?.title_template ?? '$brand $status'; - this.titleTemplateInRoom = props.config.branding?.title_template_in_room ?? '$brand $status | $room_name'; + this.titleTemplate = props.config.branding?.title_template ?? "$brand $status"; + this.titleTemplateInRoom = props.config.branding?.title_template_in_room ?? "$brand $status | $room_name"; } /** @@ -1961,7 +1961,7 @@ export default class MatrixChat extends React.PureComponent { const params: { $brand: string; $status: string; - $room_name: string|undefined; + $room_name: string | undefined; } = { $brand: SdkConfig.get().brand, $status: this.subTitleStatus, @@ -1975,14 +1975,16 @@ export default class MatrixChat extends React.PureComponent { params.$room_name = room.name; } } - + const titleTemplate = params.$room_name ? this.titleTemplateInRoom : this.titleTemplate; const title = Object.entries(params).reduce( - (title: string, [key, value]) => title.replaceAll(key, (value ?? '').replaceAll('$', '$_DLR$')), titleTemplate); + (title: string, [key, value]) => title.replaceAll(key, (value ?? "").replaceAll("$", "$_DLR$")), + titleTemplate, + ); if (document.title !== title) { - document.title = title.replaceAll('$_DLR$', '$'); + document.title = title.replaceAll("$_DLR$", "$"); } }