diff --git a/frontend/src/pages/org/settings/components/privacy.ts b/frontend/src/pages/org/settings/components/privacy.ts index 7b17dc96f..c180a117e 100644 --- a/frontend/src/pages/org/settings/components/privacy.ts +++ b/frontend/src/pages/org/settings/components/privacy.ts @@ -1,5 +1,5 @@ import { localized, msg } from "@lit/localize"; -import type { SlChangeEvent, SlSwitch } from "@shoelace-style/shoelace"; +import type { SlChangeEvent, SlRadioGroup } from "@shoelace-style/shoelace"; import { html, type PropertyValues } from "lit"; import { customElement, state } from "lit/decorators.js"; @@ -28,18 +28,23 @@ export class OrgSettingsPrivacy extends BtrixElement { const cols: Cols = [ [ html` - { - this.listPublicCollections = (e.target as SlSwitch).checked; + this.listPublicCollections = + (e.target as SlRadioGroup).value === "public"; await this.updateComplete; void this.save(); }} - >${msg("Enable Public Collections Link")} + ${msg("Public")} + ${msg("Private")} + `, msg( - "Create a link that anyone can visit to view all public collections in the org.", + "If public, anyone with the link to your org's Browsertrix URL will be able to view the org profile and public collections.", ), ], ]; @@ -49,28 +54,25 @@ export class OrgSettingsPrivacy extends BtrixElement { html`
-

- ${msg( - "To customize this link, update your Org URL under General settings.", - )} - - ${msg("Preview Link")} - -

`, - msg( - "Anyone on the internet with this link will be able to view your org's public collections. The link can be accessed even if your org doesn't have public collections.", - ), + html` + ${msg( + "To customize the URL to this page, update your Org URL in profile settings.", + )} + + ${msg("Preview Public Profile")} + + `, ]); } diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index 561c1604d..da6544bb5 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -131,6 +131,7 @@ export class OrgSettings extends BtrixElement { ${choose( this.activePanel, [ + ["information", () => html`

${msg("Profile")}

`], [ "members", () => html` @@ -183,6 +184,7 @@ export class OrgSettings extends BtrixElement { ${this.renderInformation()} + ${this.renderApi()} ${this.renderMembers()} @@ -228,7 +230,7 @@ export class OrgSettings extends BtrixElement { private renderInformation() { if (!this.userOrg) return; - return html`
+ return html`
${columns([ @@ -274,16 +276,6 @@ export class OrgSettings extends BtrixElement { `, msg("Customize your organization's Browsertrix URL."), ], - [ - html` - - `, - msg("Use this ID to reference this org in the Browsertrix API."), - ], ])}
@@ -297,7 +289,32 @@ export class OrgSettings extends BtrixElement { >
-
`; + `; + } + + private renderApi() { + if (!this.userOrg) return; + + return html`

+ ${msg("Developer Tools")} +

+ +
+
+ ${columns([ + [ + html` + + `, + msg("Use this ID to reference this org in the Browsertrix API."), + ], + ])} +
+
`; } private handleSlugInput(e: InputEvent) { diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css index 1a6ce329e..a57e0f64a 100644 --- a/frontend/src/theme.stylesheet.css +++ b/frontend/src/theme.stylesheet.css @@ -147,6 +147,10 @@ background-color: theme(colors.primary.500); } + sl-radio-button[checked]::part(button) { + background-color: theme(colors.primary.500); + } + /* Elevate select and buttons */ sl-select::part(combobox), sl-button:not([variant="text"])::part(base) { @@ -212,8 +216,8 @@ } /* Have button group take up whole width */ - sl-radio-group::part(button-group), - sl-radio-group sl-radio-button { + sl-radio-group:not([size="small"])::part(button-group), + sl-radio-group:not([size="small"]) sl-radio-button { width: 100%; min-width: min-content; }