From a65a0116cd7c4f345d2358e81de6a8d9ccb15890 Mon Sep 17 00:00:00 2001 From: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Date: Fri, 22 Apr 2022 00:16:40 +1000 Subject: [PATCH] [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 d58bea4874d94d5cdf5a96f7047623b1e0c839b7. * Update jslib from feature branch --- bitwarden_license/src/app/app.module.ts | 2 + src/app/layouts/navbar.component.html | 103 +++++++++++------------- src/app/oss.module.ts | 5 +- src/locales/en/messages.json | 4 +- src/scss/navigation.scss | 24 ------ src/scss/styles.scss | 1 + 6 files changed, 56 insertions(+), 83 deletions(-) diff --git a/bitwarden_license/src/app/app.module.ts b/bitwarden_license/src/app/app.module.ts index 781e3f45..f9619090 100644 --- a/bitwarden_license/src/app/app.module.ts +++ b/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, diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html index b73ccf1f..388c487e 100644 --- a/src/app/layouts/navbar.component.html +++ b/src/app/layouts/navbar.component.html @@ -35,64 +35,59 @@ diff --git a/src/app/oss.module.ts b/src/app/oss.module.ts index fa3d9ae1..87b6d94d 100644 --- a/src/app/oss.module.ts +++ b/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, diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index a00fa801..a8f53ee6 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -4860,8 +4860,8 @@ "keys": { "message": "Keys" }, - "backToReports": { - "message": "Back to Reports" + "accountSettings": { + "message": "Account Settings" }, "generator": { "message": "Generator" diff --git a/src/scss/navigation.scss b/src/scss/navigation.scss index 1449a38a..8c76ebba 100644 --- a/src/scss/navigation.scss +++ b/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) { diff --git a/src/scss/styles.scss b/src/scss/styles.scss index d2678ac8..01c2095b 100644 --- a/src/scss/styles.scss +++ b/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";