diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html index 5a890467..153dd30a 100644 --- a/src/app/layout/account-switcher.component.html +++ b/src/app/layout/account-switcher.component.html @@ -39,14 +39,39 @@ href="#" (mousedown)="switch(a.key)" > - {{ a.value.profile.email }} - {{ a.value.serverUrl }} - {{ a.value.profile.authenticationStatus }} + +
+ {{ a.value.profile.email }} + {{ + a.value.serverUrl + }} + {{ a.value.profile.authenticationStatus }} +
+ +
- - {{ "addAccount" | i18n }} - + + + {{ "addAccount" | i18n }} + + + + {{ "accountSwitcherLimitReached" | i18n }} + diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts index 88e810f2..18315a72 100644 --- a/src/app/layout/account-switcher.component.ts +++ b/src/app/layout/account-switcher.component.ts @@ -60,6 +60,14 @@ export class AccountSwitcherComponent implements OnInit { return !Utils.isNullOrWhitespace(this.activeAccountEmail); } + get numberOfAccounts() { + if (this.accounts == null) { + this.isOpen = false; + return 0; + } + return Object.keys(this.accounts).length; + } + constructor( private stateService: StateService, private vaultTimeoutService: VaultTimeoutService, diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 00d50a46..a56f8cfb 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1792,5 +1792,8 @@ }, "accountLimitReached": { "message": "No more than 5 accounts may be logged in at the same time." + }, + "accountSwitcherLimitReached": { + "message": "Account limit reached. Log out of an account to add another." } } diff --git a/src/scss/header.scss b/src/scss/header.scss index 3e1ed867..66efc7db 100644 --- a/src/scss/header.scss +++ b/src/scss/header.scss @@ -130,28 +130,33 @@ } .accounts { - padding: 4px 0; + padding: 7px 0; .account { display: grid; - grid-column-gap: 5px; - grid-template: - [row1-start] "email status" [row1-end] - [row2-start] "server server" [row2-end] - / 1fr auto; - align-items: baseline; + grid-template-columns: 24px auto 24px; + grid-column-gap: 11px; + align-items: center; + justify-items: left; - .server { - font-size: $font-size-small; - } + .accountInfo { + display: grid; - .email { - font-size: $font-size-large; - } + .email { + font-size: $font-size-base; + max-width: 168px; + overflow: hidden; + text-overflow: ellipsis; + } - .status { - font-style: italic; - grid-area: status; + .server { + font-size: $font-size-small; + } + + .status { + font-size: $font-size-small; + font-style: italic; + } } } } @@ -169,4 +174,9 @@ .add { margin: 4px 0; } + + .accountLimitReached { + margin: 4px 0; + font-size: $font-size-small; + } }