[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
2022-01-20 22:56:15 +01:00 · 2022-01-20 22:56:15 +01:00 · 37b03b09a1
parent d1c01a2bb0
commit 37b03b09a1
5 changed files with 419 additions and 281 deletions
--- 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=="
        }
      }
    },
--- a/src/app/accounts/settings.component.html
+++ b/src/app/accounts/settings.component.html
@ -2,11 +2,31 @@
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body form">
+        <ng-container *ngIf="currentUserEmail != null">
          <div class="box">
-          <div class="box-header">
-            {{ "security" | i18n }}
-          </div>
+            <label class="settingsTitle">{{ "settingsTitle" | i18n: currentUserEmail }} </label>
            <div class="box-content box-content-padded">
+              <h2>
+                <button
+                  type="button"
+                  class="box-header-expandable"
+                  (click)="showSecurity = !showSecurity"
+                  [attr.aria-expanded]="showSecurity"
+                >
+                  {{ "security" | i18n }}
+                  <i
+                    *ngIf="!showSecurity"
+                    class="fa fa-chevron-down fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                  <i
+                    *ngIf="showSecurity"
+                    class="fa fa-chevron-up fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                </button>
+              </h2>
+              <ng-container *ngIf="showSecurity">
                <app-vault-timeout-input
                  [vaultTimeouts]="vaultTimeouts"
                  [formControl]="vaultTimeout"
@ -86,13 +106,32 @@
                    </label>
                  </div>
                </div>
+              </ng-container>
            </div>
          </div>
          <div class="box">
-          <div class="box-header">
-            {{ "options" | i18n }}
-          </div>
            <div class="box-content box-content-padded">
+              <h2>
+                <button
+                  type="button"
+                  class="box-header-expandable"
+                  (click)="showAccountPreferences = !showAccountPreferences"
+                  [attr.aria-expanded]="showAccountPreferences"
+                >
+                  {{ "accountPreferences" | i18n }}
+                  <i
+                    *ngIf="!showAccountPreferences"
+                    class="fa fa-chevron-down fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                  <i
+                    *ngIf="showAccountPreferences"
+                    class="fa fa-chevron-up fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                </button>
+              </h2>
+              <ng-container *ngIf="showAccountPreferences">
                <div class="form-group">
                  <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
                  <select
@ -170,6 +209,33 @@
                    "enableBrowserIntegrationFingerprintDesc" | i18n
                  }}</small>
                </div>
+              </ng-container>
+            </div>
+          </div>
+        </ng-container>
+        <div class="box">
+          <div class="box-content box-content-padded">
+            <h2>
+              <button
+                type="button"
+                class="box-header-expandable"
+                (click)="showAppPreferences = !showAppPreferences"
+                [attr.aria-expanded]="showAppPreferences"
+              >
+                {{ "appPreferences" | i18n }}
+                <i
+                  *ngIf="!showAppPreferences"
+                  class="fa fa-chevron-down fa-sm icon"
+                  aria-hidden="true"
+                ></i>
+                <i
+                  *ngIf="showAppPreferences"
+                  class="fa fa-chevron-up fa-sm icon"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </h2>
+            <ng-container *ngIf="showAppPreferences">
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableTray">
@ -274,6 +340,7 @@
                </select>
                <small class="help-block">{{ "languageDesc" | i18n }}</small>
              </div>
+            </ng-container>
          </div>
        </div>
      </div>
--- 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() {
--- 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"
+      }
+    }
  }
 }
--- 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),