mirror of
https://github.com/bitwarden/browser
synced 2025-12-22 11:13:46 +00:00
[Account Switching] [Feature] Add the ability to maintain state for up to 5 accounts at once (#1079)
* [refactor] Remove references to deprecated services * [feature] Implement account switching * [bug] Fix state handling for authentication dependent system menu items * [bug] Enable the account switcher to fucntion properly when switching to a locked accounts * [feature] Enable locking any account from the menu * [bug] Ensure the avatar instance used in the account switcher updates on account change * [style] Fix lint complaints * [bug] Ensure the logout command callback can handle any user in state * [style] Fix lint complaints * rollup * [style] Fix lint complaints * [bug] Don't clean up state until everything else is done on logout * [bug] Navigate to vault on a succesful account switch * [bug] Init the state service on start * [feature] Limit account switching to 5 account maximum * [bug] Resolve app lock state with 5 logged out accounts * [chore] Update account refrences to match recent jslib restructuring * [bug] Add missing awaits * [bug] Update app menu on logout * [bug] Hide the switcher if there are no authed accounts * [bug] Move authenticationStatus display information out of jslib * [bug] Remove unused active style from scss * [refactor] Rewrite the menu bar * [style] Fix lint complaints * [bug] Clean state of loggout out user after redirect * [bug] Redirect on logout if not explicity provided a userId that isn't active * [bug] Relocated several settings items to persistant storage * [bug] Correct account switcher styles on all themes * [chore] Include state migration service in services * [bug] Swap to next account on logout * [bug] Correct DI service * [bug] fix loginGuard deps in services.module * [chore] update jslib * [bug] Remove badly merged scss * [chore] update jslib * [review] Code review cleanup * [review] Code review cleanup Co-authored-by: Hinton <oscar@oscarhinton.com>
This commit is contained in:
Addison Beck
GitHub
171
src/scss/header.scss
Normal file
171
src/scss/header.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
.header {
|
||||
-webkit-app-region: drag;
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-column-gap: 5px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerBackgroundColor');
|
||||
border-bottom-color: themed('headerBorderColor');
|
||||
}
|
||||
|
||||
app-search {
|
||||
grid-column-start: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
app-account-switcher {
|
||||
justify-self: end;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 0 7px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 15px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundColor');
|
||||
color: themed('headerInputColor');
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundFocusColor');
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-switcher {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-column-gap: 5px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('accountSwitcherTextColor');
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerBorderColor');
|
||||
color: themed('accountSwitcherTextColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-switcher-dropdown {
|
||||
@include themify($themes) {
|
||||
background-color: themed('accountSwitcherBackgroundColor');
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-top: 1px; // Fix for border-bottom in header
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
|
||||
border-radius: $border-radius;
|
||||
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
display: block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColorAlt2');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accounts {
|
||||
padding: 4px 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;
|
||||
|
||||
.server {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-size: $font-size-large
|
||||
}
|
||||
|
||||
.status {
|
||||
font-style: italic;
|
||||
grid-area: status;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
@include themify($themes) {
|
||||
background: themed('borderColor');
|
||||
}
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
@@ -435,3 +435,7 @@ app-root > #loading {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius:50% !important;
|
||||
}
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
@media (min-height: 500px) {
|
||||
height: calc(100% + 50px);
|
||||
margin-top: -50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
height: calc(100% + 300px);
|
||||
margin-top: -300px;
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -124,6 +124,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding: 1em;
|
||||
font-size: 1.2em;
|
||||
.environment-urls-settings-icon {
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#sso-page {
|
||||
.content {
|
||||
width: 300px;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "../../jslib/angular/src/scss/webfonts.css";
|
||||
@import "../../jslib/angular/src/scss/webfonts.css";
|
||||
@import '~@angular/cdk/overlay-prebuilt.css';
|
||||
@import "variables.scss";
|
||||
@import "base.scss";
|
||||
@import "grid.scss";
|
||||
@@ -11,3 +12,4 @@
|
||||
@import "modal.scss";
|
||||
@import "plugins.scss";
|
||||
@import "environment.scss";
|
||||
@import "header.scss";
|
||||
|
||||
@@ -88,6 +88,8 @@ $themes: (
|
||||
passwordSpecialColor: #c40800,
|
||||
calloutBorderColor: $border-color-dark,
|
||||
calloutBackgroundColor: $background-color,
|
||||
acccountSwitcherBackgroundColor: $background-color,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
dark: (
|
||||
textColor: #ffffff,
|
||||
@@ -138,6 +140,8 @@ $themes: (
|
||||
passwordSpecialColor: #ff7c70,
|
||||
calloutBorderColor: #2f2f2f,
|
||||
calloutBackgroundColor: #363636,
|
||||
accountSwitcherBackgroundColor: #2f2f2f,
|
||||
accountSwitcherTextColor: #ffffff,
|
||||
),
|
||||
nord: (
|
||||
textColor: $nord5,
|
||||
@@ -188,6 +192,8 @@ $themes: (
|
||||
passwordSpecialColor: $nord12,
|
||||
calloutBorderColor: $nord1,
|
||||
calloutBackgroundColor: $nord2,
|
||||
accountSwitcherBackgroundColor: $nord0,
|
||||
accountSwitcherTextColor: $nord5,
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
@import "variables.scss";
|
||||
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vault {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -356,67 +367,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
flex: 0 0 auto;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerBackgroundColor');
|
||||
border-bottom-color: themed('headerBorderColor');
|
||||
}
|
||||
|
||||
&.header-search {
|
||||
.search {
|
||||
padding: 0 7px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 15px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundColor');
|
||||
color: themed('headerInputColor');
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('headerInputBackgroundFocusColor');
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
@include themify($themes) {
|
||||
color: themed('headerInputPlaceholderColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user