tweak username display, dropdown size + spacing

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -20,21 +20,28 @@
   <ul ngbNav class="order-sm-3">
     <li ngbDropdown class="nav-item dropdown">
       <button class="btn text-light" id="userDropdown" ngbDropdownToggle>
+        <span *ngIf="displayName" class="navbar-text small mr-2 text-light d-none d-sm-inline">
+          {{displayName}}
+        </span>
         <svg width="1.3em" height="1.3em">
           <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
         </svg>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-right shadow mr-2" aria-labelledby="userDropdown">
-          <a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
-            <svg class="sidebaricon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#gear"/>
-            </svg>&nbsp;<ng-container i18n>Settings</ng-container>
-          </a>
-          <a ngbDropdownItem class="nav-link" href="accounts/logout/">
-            <svg class="sidebaricon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
-            </svg>&nbsp;<ng-container i18n>Logout</ng-container>
-          </a>
+        <div *ngIf="displayName" class="d-sm-none">
+          <p class="small mb-0 px-3" i18n>Logged in as {{displayName}}</p>
+          <div class="dropdown-divider"></div>
+        </div>
+        <a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
+          <svg class="sidebaricon mr-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#gear"/>
+          </svg><ng-container i18n>Settings</ng-container>
+        </a>
+        <a ngbDropdownItem class="nav-link" href="accounts/logout/">
+          <svg class="sidebaricon mr-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
+          </svg><ng-container i18n>Logout</ng-container>
+        </a>
       </div>
     </li>
   </ul>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -62,13 +62,16 @@
 /*
  * Navbar
  */
+
 .navbar-brand {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: 1rem;
 }
 
-.navbar-toggler {
+.dropdown.show .dropdown-toggle,
+.dropdown-toggle:hover {
+  opacity: 0.7;
 }
 
 .dropdown-toggle::after {
@@ -76,6 +79,14 @@
   vertical-align: 0.155em;
 }
 
+.navbar .dropdown-menu {
+  font-size: 0.875rem; // body size
+
+  a svg {
+    opacity: 0.6;
+  }
+}
+
 .navbar .search-form-container {
   max-width: 550px;
   position: relative;

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -9,7 +9,8 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { SearchService } from 'src/app/services/rest/search.service';
 import { environment } from 'src/environments/environment';
 import { DocumentDetailComponent } from '../document-detail/document-detail.component';
-  
+import { Meta } from '@angular/platform-browser';
+
 @Component({
   selector: 'app-app-frame',
   templateUrl: './app-frame.component.html',
@@ -22,8 +23,11 @@ export class AppFrameComponent implements OnInit, OnDestroy {
     private activatedRoute: ActivatedRoute,
     private openDocumentsService: OpenDocumentsService,
     private searchService: SearchService,
-    public savedViewService: SavedViewService
+    public savedViewService: SavedViewService,
+    private meta: Meta
     ) {
+      console.log(meta);
+
   }
 
   versionString = `${environment.appTitle} ${environment.version}`
@@ -55,7 +59,7 @@ export class AppFrameComponent implements OnInit, OnDestroy {
         term.length < 2 ? from([[]]) : this.searchService.autocomplete(term)
       )
     )
-  
+
   itemSelected(event) {
     event.preventDefault()
     let currentSearch: string = this.searchField.value
@@ -98,4 +102,17 @@ export class AppFrameComponent implements OnInit, OnDestroy {
     }
   }
 
+  get displayName() {
+    // TODO: taken from dashboard component, is this the best way to pass around username?
+    let tagFullName = this.meta.getTag('name=full_name')
+    let tagUsername = this.meta.getTag('name=username')
+    if (tagFullName && tagFullName.content) {
+      return tagFullName.content
+    } else if (tagUsername && tagUsername.content) {
+      return tagUsername.content
+    } else {
+      return null
+    }
+  }
+
 }