nav dropdown menu styling

This commit is contained in:
Kyle Spearrin 2018-07-06 09:47:50 -04:00
parent 0b779dfd3d
commit b8921713eb
4 changed files with 63 additions and 7 deletions

View File

@ -1,6 +1,6 @@
<nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}"> <nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
<div class="container"> <div class="container">
<a class="navbar-brand" routerLink="/"> <a class="navbar-brand" routerLink="/" title="{{'pageTitle' | i18n : 'Bitwarden'}}">
<i class="fa fa-shield"></i> <i class="fa fa-shield"></i>
</a> </a>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
@ -22,11 +22,28 @@
<i class="fa fa-user fa-lg"></i> <i class="fa fa-user fa-lg"></i>
</a> </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
<a class="dropdown-item" href="#">Help</a> <span class="dropdown-item-text">
<a class="dropdown-item" href="#">Get the Apps</a> {{'loggedInAs' | i18n}}
<small class="text-muted">{{email}}</small>
</span>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" appStopClick (click)="lock()">{{'lockNow' | i18n}}</a> <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
<a class="dropdown-item" href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a> <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> </div>
</li> </li>
</ul> </ul>

View File

@ -1,21 +1,29 @@
import { import {
Component, Component,
OnInit,
} from '@angular/core'; } from '@angular/core';
import { MessagingService } from 'jslib/abstractions/messaging.service'; import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { UserService } from 'jslib/abstractions/user.service';
@Component({ @Component({
selector: 'app-navbar', selector: 'app-navbar',
templateUrl: 'navbar.component.html', templateUrl: 'navbar.component.html',
}) })
export class NavbarComponent { export class NavbarComponent implements OnInit {
selfHosted = false; 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(); this.selfHosted = this.platformUtilsService.isSelfHost();
} }
async ngOnInit() {
this.email = await this.userService.getEmail();
}
lock() { lock() {
this.messagingService.send('lockVault'); this.messagingService.send('lockVault');
} }

View File

@ -1681,5 +1681,14 @@
}, },
"defaultCollection": { "defaultCollection": {
"message": "Default Collection" "message": "Default Collection"
},
"getHelp": {
"message": "Get Help"
},
"getApps": {
"message": "Get the Apps"
},
"loggedInAs": {
"message": "Logged in as"
} }
} }

View File

@ -105,6 +105,22 @@ input, select, textarea {
.navbar { .navbar {
padding-left: 0; padding-left: 0;
padding-right: 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 { .navbar-brand {
@ -112,6 +128,12 @@ input, select, textarea {
margin-bottom: -20px; margin-bottom: -20px;
} }
.dropdown-menu {
button {
cursor: pointer;
}
}
.container { .container {
width: 980px; width: 980px;
max-width: none !important; max-width: none !important;