From c2812fc21d345783fd0e3c21a50d499d4af8012a Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Wed, 8 May 2024 19:25:24 +0200 Subject: [PATCH] [PM-7176] Create appearance settings component (navigational changes) (#8911) * Move about.component into tools ownership * Split out account security settings Move settings.component.ts to auth/popup/settings and rename to account-security.component.ts Move controls from settings.component.html and create account-security.component.html Move settings.component.html to tools/popup/settings.component.html Create settings.component.ts under tools/popup/settings Fixup module imports and routing Add new strings to en/message.json * Move vault-timeout-input.component to auth * Move await-desktop-dialog.component to auth * Add transition for account-security * Create appearance settings component * Add entry in settings to navigate to the appearance settings page * Add transition animation for settings to appearance and back * Remove settings from options that are now under appearance --------- Co-authored-by: Daniel James Smith --- apps/browser/src/_locales/en/messages.json | 3 + .../src/popup/app-routing.animations.ts | 4 ++ apps/browser/src/popup/app-routing.module.ts | 7 ++ apps/browser/src/popup/app.module.ts | 2 + .../src/popup/settings/options.component.html | 51 -------------- .../src/popup/settings/options.component.ts | 35 ---------- .../popup/settings/settings.component.html | 8 +++ .../popup/settings/appearance.component.html | 67 +++++++++++++++++++ .../popup/settings/appearance.component.ts | 62 +++++++++++++++++ 9 files changed, 153 insertions(+), 86 deletions(-) create mode 100644 apps/browser/src/vault/popup/settings/appearance.component.html create mode 100644 apps/browser/src/vault/popup/settings/appearance.component.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 493a909f8a..fcc80e5ff7 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -3035,6 +3035,9 @@ "accountSecurity": { "message": "Account security" }, + "appearance": { + "message": "Appearance" + }, "errorAssigningTargetCollection": { "message": "Error assigning target collection." }, diff --git a/apps/browser/src/popup/app-routing.animations.ts b/apps/browser/src/popup/app-routing.animations.ts index 9bad33f744..55d2687a43 100644 --- a/apps/browser/src/popup/app-routing.animations.ts +++ b/apps/browser/src/popup/app-routing.animations.ts @@ -202,6 +202,10 @@ export const routerTransition = trigger("routerTransition", [ transition("tabs => options", inSlideLeft), transition("options => tabs", outSlideRight), + // Appearance settings + transition("tabs => appearance", inSlideLeft), + transition("appearance => tabs", outSlideRight), + transition("tabs => premium", inSlideLeft), transition("premium => tabs", outSlideRight), diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index 9e1872f1ce..8fb397fe24 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/apps/browser/src/popup/app-routing.module.ts @@ -48,6 +48,7 @@ import { VaultFilterComponent } from "../vault/popup/components/vault/vault-filt import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items.component"; import { VaultV2Component } from "../vault/popup/components/vault/vault-v2.component"; import { ViewComponent } from "../vault/popup/components/vault/view.component"; +import { AppearanceComponent } from "../vault/popup/settings/appearance.component"; import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component"; import { FoldersComponent } from "../vault/popup/settings/folders.component"; import { SyncComponent } from "../vault/popup/settings/sync.component"; @@ -303,6 +304,12 @@ const routes: Routes = [ canActivate: [AuthGuard], data: { state: "options" }, }, + { + path: "appearance", + component: AppearanceComponent, + canActivate: [AuthGuard], + data: { state: "appearance" }, + }, { path: "clone-cipher", component: AddEditComponent, diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index 8ff4f9e4a2..4a310027c1 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -70,6 +70,7 @@ import { VaultSelectComponent } from "../vault/popup/components/vault/vault-sele import { VaultV2Component } from "../vault/popup/components/vault/vault-v2.component"; import { ViewCustomFieldsComponent } from "../vault/popup/components/vault/view-custom-fields.component"; import { ViewComponent } from "../vault/popup/components/vault/view.component"; +import { AppearanceComponent } from "../vault/popup/settings/appearance.component"; import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component"; import { FoldersComponent } from "../vault/popup/settings/folders.component"; import { SyncComponent } from "../vault/popup/settings/sync.component"; @@ -148,6 +149,7 @@ import "../platform/popup/locales"; LoginViaAuthRequestComponent, LoginDecryptionOptionsComponent, OptionsComponent, + AppearanceComponent, GeneratorComponent, PasswordGeneratorHistoryComponent, PasswordHistoryComponent, diff --git a/apps/browser/src/popup/settings/options.component.html b/apps/browser/src/popup/settings/options.component.html index 93c018233a..fa2b7514db 100644 --- a/apps/browser/src/popup/settings/options.component.html +++ b/apps/browser/src/popup/settings/options.component.html @@ -192,56 +192,5 @@ {{ "showIdentitiesCurrentTabDesc" | i18n }} -
-
-
- - -
-
- -
-
-
-
- - -
-
- -
-
-
-
- - -
-
- -
diff --git a/apps/browser/src/popup/settings/options.component.ts b/apps/browser/src/popup/settings/options.component.ts index dbdb94c586..0344362d36 100644 --- a/apps/browser/src/popup/settings/options.component.ts +++ b/apps/browser/src/popup/settings/options.component.ts @@ -2,7 +2,6 @@ import { Component, OnInit } from "@angular/core"; import { firstValueFrom } from "rxjs"; import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service"; -import { BadgeSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/badge-settings.service"; import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service"; import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service"; import { ClearClipboardDelaySetting } from "@bitwarden/common/autofill/types"; @@ -12,8 +11,6 @@ import { } from "@bitwarden/common/models/domain/domain-service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; -import { ThemeType } from "@bitwarden/common/platform/enums"; -import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; import { enableAccountSwitching } from "../../platform/flags"; @@ -23,8 +20,6 @@ import { enableAccountSwitching } from "../../platform/flags"; templateUrl: "options.component.html", }) export class OptionsComponent implements OnInit { - enableFavicon = false; - enableBadgeCounter = true; enableAutoFillOnPageLoad = false; autoFillOnPageLoadDefault = false; autoFillOnPageLoadOptions: any[]; @@ -36,8 +31,6 @@ export class OptionsComponent implements OnInit { showCardsCurrentTab = false; showIdentitiesCurrentTab = false; showClearClipboard = true; - theme: ThemeType; - themeOptions: any[]; defaultUriMatch: UriMatchStrategySetting = UriMatchStrategy.Domain; uriMatchOptions: any[]; clearClipboard: ClearClipboardDelaySetting; @@ -52,18 +45,9 @@ export class OptionsComponent implements OnInit { private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction, private autofillSettingsService: AutofillSettingsServiceAbstraction, private domainSettingsService: DomainSettingsService, - private badgeSettingsService: BadgeSettingsServiceAbstraction, i18nService: I18nService, - private themeStateService: ThemeStateService, private vaultSettingsService: VaultSettingsService, ) { - this.themeOptions = [ - { name: i18nService.t("default"), value: ThemeType.System }, - { name: i18nService.t("light"), value: ThemeType.Light }, - { name: i18nService.t("dark"), value: ThemeType.Dark }, - { name: "Nord", value: ThemeType.Nord }, - { name: i18nService.t("solarizedDark"), value: ThemeType.SolarizedDark }, - ]; this.uriMatchOptions = [ { name: i18nService.t("baseDomain"), value: UriMatchStrategy.Domain }, { name: i18nService.t("host"), value: UriMatchStrategy.Host }, @@ -117,14 +101,8 @@ export class OptionsComponent implements OnInit { this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$); - this.enableFavicon = await firstValueFrom(this.domainSettingsService.showFavicons$); - - this.enableBadgeCounter = await firstValueFrom(this.badgeSettingsService.enableBadgeCounter$); - this.enablePasskeys = await firstValueFrom(this.vaultSettingsService.enablePasskeys$); - this.theme = await firstValueFrom(this.themeStateService.selectedTheme$); - const defaultUriMatch = await firstValueFrom( this.domainSettingsService.defaultUriMatchStrategy$, ); @@ -166,15 +144,6 @@ export class OptionsComponent implements OnInit { await this.autofillSettingsService.setAutofillOnPageLoadDefault(this.autoFillOnPageLoadDefault); } - async updateFavicon() { - await this.domainSettingsService.setShowFavicons(this.enableFavicon); - } - - async updateBadgeCounter() { - await this.badgeSettingsService.setEnableBadgeCounter(this.enableBadgeCounter); - this.messagingService.send("bgUpdateContextMenu"); - } - async updateShowCardsCurrentTab() { await this.vaultSettingsService.setShowCardsCurrentTab(this.showCardsCurrentTab); } @@ -183,10 +152,6 @@ export class OptionsComponent implements OnInit { await this.vaultSettingsService.setShowIdentitiesCurrentTab(this.showIdentitiesCurrentTab); } - async saveTheme() { - await this.themeStateService.setSelectedTheme(this.theme); - } - async saveClearClipboard() { await this.autofillSettingsService.setClearClipboardDelay(this.clearClipboard); } diff --git a/apps/browser/src/tools/popup/settings/settings.component.html b/apps/browser/src/tools/popup/settings/settings.component.html index 71f4f1b991..997bc557b6 100644 --- a/apps/browser/src/tools/popup/settings/settings.component.html +++ b/apps/browser/src/tools/popup/settings/settings.component.html @@ -86,6 +86,14 @@
{{ "options" | i18n }}
+ + +

+ {{ "appearance" | i18n }} +

+
+ +
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
diff --git a/apps/browser/src/vault/popup/settings/appearance.component.ts b/apps/browser/src/vault/popup/settings/appearance.component.ts new file mode 100644 index 0000000000..154d4e426d --- /dev/null +++ b/apps/browser/src/vault/popup/settings/appearance.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from "@angular/core"; +import { firstValueFrom } from "rxjs"; + +import { BadgeSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/badge-settings.service"; +import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; +import { ThemeType } from "@bitwarden/common/platform/enums"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; + +import { enableAccountSwitching } from "../../../platform/flags"; + +@Component({ + selector: "vault-appearance", + templateUrl: "appearance.component.html", +}) +export class AppearanceComponent implements OnInit { + enableFavicon = false; + enableBadgeCounter = true; + theme: ThemeType; + themeOptions: any[]; + accountSwitcherEnabled = false; + + constructor( + private messagingService: MessagingService, + private domainSettingsService: DomainSettingsService, + private badgeSettingsService: BadgeSettingsServiceAbstraction, + i18nService: I18nService, + private themeStateService: ThemeStateService, + ) { + this.themeOptions = [ + { name: i18nService.t("default"), value: ThemeType.System }, + { name: i18nService.t("light"), value: ThemeType.Light }, + { name: i18nService.t("dark"), value: ThemeType.Dark }, + { name: "Nord", value: ThemeType.Nord }, + { name: i18nService.t("solarizedDark"), value: ThemeType.SolarizedDark }, + ]; + + this.accountSwitcherEnabled = enableAccountSwitching(); + } + + async ngOnInit() { + this.enableFavicon = await firstValueFrom(this.domainSettingsService.showFavicons$); + + this.enableBadgeCounter = await firstValueFrom(this.badgeSettingsService.enableBadgeCounter$); + + this.theme = await firstValueFrom(this.themeStateService.selectedTheme$); + } + + async updateFavicon() { + await this.domainSettingsService.setShowFavicons(this.enableFavicon); + } + + async updateBadgeCounter() { + await this.badgeSettingsService.setEnableBadgeCounter(this.enableBadgeCounter); + this.messagingService.send("bgUpdateContextMenu"); + } + + async saveTheme() { + await this.themeStateService.setSelectedTheme(this.theme); + } +}