From b8921713eb8056a6f6bb57c10f1f09b8563fd613 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 6 Jul 2018 09:47:50 -0400
Subject: [PATCH] nav dropdown menu styling

---
 src/app/layouts/navbar.component.html | 27 ++++++++++++++++++++++-----
 src/app/layouts/navbar.component.ts   | 12 ++++++++++--
 src/locales/en/messages.json          |  9 +++++++++
 src/scss/styles.scss                  | 22 ++++++++++++++++++++++
 4 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 1a1710c7fe..98db76249a 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
     <div class="container">
-        <a class="navbar-brand" routerLink="/">
+        <a class="navbar-brand" routerLink="/" title="{{'pageTitle' | i18n : 'Bitwarden'}}">
             <i class="fa fa-shield"></i>
         </a>
         <div class="collapse navbar-collapse">
@@ -22,11 +22,28 @@
                     <i class="fa fa-user fa-lg"></i>
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
-                    <a class="dropdown-item" href="#">Help</a>
-                    <a class="dropdown-item" href="#">Get the Apps</a>
+                    <span class="dropdown-item-text">
+                        {{'loggedInAs' | i18n}}
+                        <small class="text-muted">{{email}}</small>
+                    </span>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#" appStopClick (click)="lock()">{{'lockNow' | i18n}}</a>
-                    <a class="dropdown-item" href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a>
+                    <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-question-circle"></i>
+                        {{'getHelp' | i18n}}
+                    </a>
+                    <a class="dropdown-item" href="https://bitwarden.com#download" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-download"></i>
+                        {{'getApps' | i18n}}
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <button type="button" class="dropdown-item" (click)="lock()">
+                        <i class="fa fa-fw fa-lock"></i>
+                        {{'lockNow' | i18n}}
+                    </button>
+                    <button type="button" class="dropdown-item" (click)="logOut()">
+                        <i class="fa fa-fw fa-sign-out"></i>
+                        {{'logOut' | i18n}}
+                    </button>
                 </div>
             </li>
         </ul>
diff --git a/src/app/layouts/navbar.component.ts b/src/app/layouts/navbar.component.ts
index dd24955d1a..1cf670b85c 100644
--- a/src/app/layouts/navbar.component.ts
+++ b/src/app/layouts/navbar.component.ts
@@ -1,21 +1,29 @@
 import {
     Component,
+    OnInit,
 } from '@angular/core';
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 @Component({
     selector: 'app-navbar',
     templateUrl: 'navbar.component.html',
 })
-export class NavbarComponent {
+export class NavbarComponent implements OnInit {
     selfHosted = false;
+    email: string;
 
-    constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService) {
+    constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService,
+        private userService: UserService) {
         this.selfHosted = this.platformUtilsService.isSelfHost();
     }
 
+    async ngOnInit() {
+        this.email = await this.userService.getEmail();
+    }
+
     lock() {
         this.messagingService.send('lockVault');
     }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 7d1541ca88..a1e60bf6d7 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1681,5 +1681,14 @@
   },
   "defaultCollection": {
     "message": "Default Collection"
+  },
+  "getHelp": {
+    "message": "Get Help"
+  },
+  "getApps": {
+    "message": "Get the Apps"
+  },
+  "loggedInAs": {
+    "message": "Logged in as"
   }
 }
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 169a695653..565d0f45f5 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -105,6 +105,22 @@ input, select, textarea {
 .navbar {
     padding-left: 0;
     padding-right: 0;
+
+    .dropdown-menu {
+        min-width: 200px;
+        max-width: 250px;
+
+        .dropdown-item-text {
+            line-height: 1.3;
+
+            small {
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
 }
 
 .navbar-brand {
@@ -112,6 +128,12 @@ input, select, textarea {
     margin-bottom: -20px;
 }
 
+.dropdown-menu {
+    button {
+        cursor: pointer;
+    }
+}
+
 .container {
     width: 980px;
     max-width: none !important;