From 37b03b09a1788759f8ea18daf6545e6b54ec2934 Mon Sep 17 00:00:00 2001 From: Daniel James Smith Date: Thu, 20 Jan 2022 22:56:15 +0100 Subject: [PATCH] [Account Switching] Design changes to settings menu (#1244) * Design changes to settings menu * Remove black border on settings headers * Pull in jslib * Only load account related settings when authed * Hide account related settings when not authed * Change settings titles * Changes discussed with Danielle --- package-lock.json | 12 +- src/app/accounts/settings.component.html | 589 +++++++++++++---------- src/app/accounts/settings.component.ts | 40 +- src/locales/en/messages.json | 18 +- src/scss/box.scss | 41 ++ 5 files changed, 419 insertions(+), 281 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd5f529eff..5588e625da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3955,9 +3955,9 @@ } }, "node_modules/electron/node_modules/@types/node": { - "version": "14.18.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.0.tgz", - "integrity": "sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ==" + "version": "14.18.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.9.tgz", + "integrity": "sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q==" }, "node_modules/emoji-regex": { "version": "8.0.0", @@ -12804,9 +12804,9 @@ }, "dependencies": { "@types/node": { - "version": "14.18.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.0.tgz", - "integrity": "sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ==" + "version": "14.18.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.9.tgz", + "integrity": "sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q==" } } }, diff --git a/src/app/accounts/settings.component.html b/src/app/accounts/settings.component.html index 92e20e6f54..4fce479219 100644 --- a/src/app/accounts/settings.component.html +++ b/src/app/accounts/settings.component.html @@ -2,278 +2,345 @@
+ +
+ +
+

+ +

+ + +
+ +
+ +
+ {{ "vaultTimeoutActionLockDesc" | i18n }} +
+ +
+ {{ "vaultTimeoutActionLogOutDesc" | i18n }} +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+

+ +

+ +
+ + + {{ "clearClipboardDesc" | i18n }} +
+
+
+ +
+ {{ "minimizeOnCopyToClipboardDesc" | i18n }} +
+
+
+ +
+ {{ "disableFaviconDesc" | i18n }} +
+
+
+ +
+ {{ "enableBrowserIntegrationDesc" | i18n }} +
+
+
+ +
+ {{ + "enableBrowserIntegrationFingerprintDesc" | i18n + }} +
+ +
+
+
-
- {{ "security" | i18n }} -
- -
- -
- -
- {{ "vaultTimeoutActionLockDesc" | i18n }} -
- -
- {{ "vaultTimeoutActionLogOutDesc" | i18n }} -
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
-
- {{ "options" | i18n }} -
-
-
- - - {{ "clearClipboardDesc" | i18n }} -
-
-
- + {{ "appPreferences" | i18n }} + + + + + +
+
+ +
+ {{ enableTrayDescText }}
- {{ "minimizeOnCopyToClipboardDesc" | i18n }} -
-
-
- +
+
+ +
+ {{ enableMinToTrayDescText }}
- {{ "disableFaviconDesc" | i18n }} -
-
-
- +
+
+ +
+ {{ enableCloseToTrayDescText }}
- {{ "enableBrowserIntegrationDesc" | i18n }} -
-
-
- +
+
+ +
+ {{ startToTrayDescText }}
- {{ - "enableBrowserIntegrationFingerprintDesc" | i18n - }} -
-
-
- +
+
+ +
+ {{ "openAtLoginDesc" | i18n }}
- {{ enableTrayDescText }} -
-
-
- +
+
+ +
+ {{ "alwaysShowDockDesc" | i18n }}
- {{ enableMinToTrayDescText }} -
-
-
- +
+ + + {{ "themeDesc" | i18n }}
- {{ enableCloseToTrayDescText }} -
-
-
- +
+ + + {{ "languageDesc" | i18n }}
- {{ startToTrayDescText }} -
-
-
- -
- {{ "openAtLoginDesc" | i18n }} -
-
-
- -
- {{ "alwaysShowDockDesc" | i18n }} -
-
- - - {{ "themeDesc" | i18n }} -
-
- - - {{ "languageDesc" | i18n }} -
+
diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts index 371a7fe344..ae17c3bdc3 100644 --- a/src/app/accounts/settings.component.ts +++ b/src/app/accounts/settings.component.ts @@ -65,6 +65,12 @@ export class SettingsComponent implements OnInit { vaultTimeout: FormControl = new FormControl(null); + showSecurity: boolean = true; + showAccountPreferences: boolean = true; + showAppPreferences: boolean = true; + + currentUserEmail: string; + constructor( private i18nService: I18nService, private platformUtilsService: PlatformUtilsService, @@ -151,21 +157,36 @@ export class SettingsComponent implements OnInit { } async ngOnInit() { + // App preferences this.showMinToTray = this.platformUtilsService.getDevice() !== DeviceType.LinuxDesktop; - this.vaultTimeout.setValue(await this.stateService.getVaultTimeout()); - this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction(); - const pinSet = await this.vaultTimeoutService.isPinLockSet(); - this.pin = pinSet[0] || pinSet[1]; - this.disableFavicons = await this.stateService.getDisableFavicon(); - this.enableBrowserIntegration = await this.stateService.getEnableBrowserIntegration(); - this.enableBrowserIntegrationFingerprint = - await this.stateService.getEnableBrowserIntegrationFingerprint(); this.enableMinToTray = await this.stateService.getEnableMinimizeToTray(); this.enableCloseToTray = await this.stateService.getEnableCloseToTray(); this.enableTray = await this.stateService.getEnableTray(); this.startToTray = await this.stateService.getEnableStartToTray(); + + this.alwaysShowDock = await this.stateService.getAlwaysShowDock(); + this.showAlwaysShowDock = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop; + this.openAtLogin = await this.stateService.getOpenAtLogin(); + this.locale = await this.stateService.getLocale(); this.theme = await this.stateService.getTheme(); + + if ((await this.stateService.getUserId()) == null) { + return; + } + this.currentUserEmail = await this.stateService.getEmail(); + + // Security + this.vaultTimeout.setValue(await this.stateService.getVaultTimeout()); + this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction(); + const pinSet = await this.vaultTimeoutService.isPinLockSet(); + this.pin = pinSet[0] || pinSet[1]; + + // Account preferences + this.disableFavicons = await this.stateService.getDisableFavicon(); + this.enableBrowserIntegration = await this.stateService.getEnableBrowserIntegration(); + this.enableBrowserIntegrationFingerprint = + await this.stateService.getEnableBrowserIntegrationFingerprint(); this.clearClipboard = await this.stateService.getClearClipboard(); this.minimizeOnCopyToClipboard = await this.stateService.getMinimizeOnCopyToClipboard(); this.supportsBiometric = await this.platformUtilsService.supportsBiometric(); @@ -173,9 +194,6 @@ export class SettingsComponent implements OnInit { this.biometricText = await this.stateService.getBiometricText(); this.noAutoPromptBiometrics = await this.stateService.getNoAutoPromptBiometrics(); this.noAutoPromptBiometricsText = await this.stateService.getNoAutoPromptBiometricsText(); - this.alwaysShowDock = await this.stateService.getAlwaysShowDock(); - this.showAlwaysShowDock = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop; - this.openAtLogin = await this.stateService.getOpenAtLogin(); } async saveVaultTimeoutOptions() { diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index a56f8cfb9f..0a16b01c57 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -457,9 +457,6 @@ "updateKey": { "message": "You cannot use this feature until you update your encryption key." }, - "options": { - "message": "Options" - }, "editedFolder": { "message": "Edited folder" }, @@ -1793,7 +1790,22 @@ "accountLimitReached": { "message": "No more than 5 accounts may be logged in at the same time." }, + "accountPreferences": { + "message": "Preferences" + }, + "appPreferences": { + "message": "App Settings (All Accounts)" + }, "accountSwitcherLimitReached": { "message": "Account limit reached. Log out of an account to add another." + }, + "settingsTitle": { + "message": "App settings for $EMAIL$", + "placeholders": { + "email": { + "content": "$1", + "example": "jdoe@example.com" + } + } } } diff --git a/src/scss/box.scss b/src/scss/box.scss index 58e2c437d5..a50dd68413 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -4,6 +4,15 @@ position: relative; width: 100%; + .settingsTitle { + margin: 0 10px 5px 10px; + display: flex; + + @include themify($themes) { + color: themed("headingColor"); + } + } + .box-header { margin: 0 10px 5px 10px; text-transform: uppercase; @@ -33,6 +42,38 @@ } } + .box-header-expandable { + border: none; + padding: 5px 0px; + text-transform: uppercase; + display: flex; + width: 100%; + box-sizing: border-box; + + @include themify($themes) { + color: themed("headingColor"); + background-color: themed("boxBackgroundColor"); + } + + &:hover, + &:focus, + &.active { + @include themify($themes) { + background-color: themed("boxBackgroundHoverColor"); + } + } + + .icon { + display: flex; + align-items: flex-end; + margin-left: 5px; + + @include themify($themes) { + color: themed("headingColor"); + } + } + } + .box-content { border-radius: $border-radius; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),