[SG-31 End User Vault Refresh] Account Menu updates (#1596)

* Add menuModule

* Use bit-menu for account menu

* Fix styling, replace CSS with TW

* Change out bootstrap styling

* Fix styling

* Fix styling

* Rename My Account to Account Settings

* WIP use Avatar for account menu

* Revert "WIP use Avatar for account menu"

This reverts commit d58bea4874.

* Update jslib from feature branch

bitwarden_license/src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { OverlayModule } from "@angular/cdk/overlay";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -19,6 +20,7 @@ import { MaximumVaultTimeoutPolicyComponent } from "./policies/maximum-vault-tim
 
 @NgModule({
   imports: [
+    OverlayModule,
     JslibModule,
     BrowserAnimationsModule,
     FormsModule,

src/app/layouts/navbar.component.html

@@ -35,64 +35,59 @@
       </ul>
     </div>
     <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
-      <li class="nav-item dropdown">
-        <a
-          class="nav-item nav-link dropdown-toggle"
-          href="#"
-          id="nav-profile"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
+      <li>
+        <button
+          [bitMenuTriggerFor]="accountMenu"
+          class="tw-border-0 tw-bg-transparent tw-text-contrast tw-opacity-70 hover:tw-opacity-90"
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
-          <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
-            <app-avatar
-              [data]="name"
-              [email]="email"
-              size="25"
-              fontSize="14"
-              [circle]="true"
-            ></app-avatar>
-            <div class="ml-2 overflow-hidden">
-              <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="text-muted">{{ name }}</small>
+          <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
+        </button>
+        <bit-menu class="dropdown-menu" #accountMenu>
+          <div class="tw-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col">
+            <div
+              class="tw-flex tw-items-center tw-leading-tight tw-text-info tw-py-1 tw-px-4"
+              *ngIf="name"
+              appStopProp
+            >
+              <app-avatar
+                [data]="name"
+                [email]="email"
+                size="25"
+                fontSize="14"
+                [circle]="true"
+              ></app-avatar>
+              <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
+                <span>{{ "loggedInAs" | i18n }}</span>
+                <small class="tw-text-muted tw-block tw-overflow-hidden tw-whitespace-nowrap">{{
+                  name
+                }}</small>
+              </div>
             </div>
+            <bit-menu-divider></bit-menu-divider>
+            <a bit-menu-item routerLink="/settings/account">
+              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+              {{ "accountSettings" | i18n }}
+            </a>
+            <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
+              <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
+              {{ "getHelp" | i18n }}
+            </a>
+            <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+              <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
+              {{ "getApps" | i18n }}
+            </a>
+            <bit-menu-divider></bit-menu-divider>
+            <button bit-menu-item type="button" (click)="lock()">
+              <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
+              {{ "lockNow" | i18n }}
+            </button>
+            <button bit-menu-item type="button" (click)="logOut()">
+              <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+              {{ "logOut" | i18n }}
+            </button>
           </div>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#" routerLink="/settings/account">
-            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-            {{ "myAccount" | i18n }}
-          </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/help/"
-            target="_blank"
-            rel="noopener"
-          >
-            <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
-            {{ "getHelp" | i18n }}
-          </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/download/"
-            target="_blank"
-            rel="noopener"
-          >
-            <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
-            {{ "getApps" | i18n }}
-          </a>
-          <div class="dropdown-divider"></div>
-          <button type="button" class="dropdown-item" (click)="lock()">
-            <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
-            {{ "lockNow" | i18n }}
-          </button>
-          <button type="button" class="dropdown-item" (click)="logOut()">
-            <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
-            {{ "logOut" | i18n }}
-          </button>
-        </div>
+        </bit-menu>
       </li>
     </ul>
   </div>

src/app/oss.module.ts

@@ -53,7 +53,7 @@ import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-import { BadgeModule, ButtonModule, CalloutModule } from "@bitwarden/components";
+import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
@@ -282,8 +282,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ButtonModule,
     CalloutModule,
     ToastrModule,
-    BadgeModule,
-    ButtonModule,
+    MenuModule,
   ],
   declarations: [
     PremiumBadgeComponent,

src/locales/en/messages.json

@@ -4860,8 +4860,8 @@
   "keys": {
     "message": "Keys"
   },
-  "backToReports": {
-    "message": "Back to Reports"
+  "accountSettings": {
+    "message": "Account Settings"
   },
   "generator": {
     "message": "Generator"

src/scss/navigation.scss

@@ -11,30 +11,6 @@
     }
   }
 
-  .dropdown-menu {
-    max-width: 300px;
-    min-width: 200px;
-
-    .dropdown-item-text {
-      line-height: 1.3;
-      @include themify($themes) {
-        color: themed("dropdownTextColor");
-      }
-
-      span,
-      small {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        &.text-muted {
-          @include themify($themes) {
-            color: themed("dropdownTextMuted") !important;
-          }
-        }
-      }
-    }
-  }
   .nav-item {
     > .nav-link {
       @include themify($themes) {

src/scss/styles.scss

@@ -2,6 +2,7 @@
 @import "./variables";
 @import "../../jslib/angular/src/scss/bwicons/styles/style.scss";
 @import "../../jslib/angular/src/scss/icons.scss";
+@import "@angular/cdk/overlay-prebuilt.css";
 
 //@import "~bootstrap/scss/bootstrap";
 @import "~bootstrap/scss/_functions";