make clearer that profile selection is optional and that a default profile is used by default (#290)

- Rename 'Select Profile' -> 'Default Profile'
- Rename 'No Profiles' -> 'No Additional Profiles'
This commit is contained in:
sua yoo 2022-08-10 15:54:39 -07:00 committed by GitHub
parent ee6161ad43
commit 319a8a3c07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -50,9 +50,8 @@ export class SelectBrowserProfile extends LiteElement {
clearable clearable
value=${this.selectedProfile?.id || ""} value=${this.selectedProfile?.id || ""}
placeholder=${this.browserProfiles placeholder=${this.browserProfiles
? msg("Select Profile") ? msg("Default Profile")
: msg("Loading")} : msg("Loading")}
?disabled=${!this.browserProfiles?.length}
hoist hoist
@sl-change=${this.onChange} @sl-change=${this.onChange}
@sl-focus=${() => { @sl-focus=${() => {
@ -81,11 +80,14 @@ export class SelectBrowserProfile extends LiteElement {
></sl-menu-item> ></sl-menu-item>
` `
)} )}
${this.browserProfiles && !this.browserProfiles.length
? this.renderNoProfiles()
: ""}
</sl-select> </sl-select>
${this.browserProfiles && !this.browserProfiles.length ${this.browserProfiles && this.browserProfiles.length
? this.renderNoProfiles() ? this.renderSelectedProfileInfo()
: this.renderSelectedProfileInfo()} : ""}
`; `;
} }
@ -120,14 +122,21 @@ export class SelectBrowserProfile extends LiteElement {
private renderNoProfiles() { private renderNoProfiles() {
return html` return html`
<div class="mt-2 text-sm text-neutral-500"> <div class="mx-2 text-sm text-neutral-500">
<span class="inline-block align-middle" <span class="inline-block align-middle"
>${msg("No browser profiles found.")}</span >${msg("No additional browser profiles found.")}</span
> >
<a <a
href=${`/archives/${this.archiveId}/browser-profiles/new`} href=${`/archives/${this.archiveId}/browser-profiles/new`}
class="font-medium text-primary hover:text-indigo-500" class="font-medium text-primary hover:text-indigo-500"
target="_blank" target="_blank"
@click=${(e: any) => {
const select = e.target.closest("sl-select");
if (select) {
select.blur();
select.dropdown?.hide();
}
}}
><span class="inline-block align-middle" ><span class="inline-block align-middle"
>${msg("Create a browser profile")}</span >${msg("Create a browser profile")}</span
> >