Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-19 02:51:14 +02:00
Code Issues Projects Releases Wiki Activity

made nav into a toolbar

Browse Source
This commit is contained in:
addison 2021-02-05 12:34:01 -05:00
parent 3e6f85c206
commit ec933025f3
9 changed files with 183 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.module.ts
View File

@ -63,10 +63,11 @@ import { ShareComponent } from './vault/share.component';
import { VaultComponent } from './vault/vault.component'; import { VaultComponent } from './vault/vault.component';
import { ViewComponent } from './vault/view.component'; import { ViewComponent } from './vault/view.component';
import { AccessComponent } from './send/access.component';
import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component'; import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
import { SendComponent } from './send/send.component'; import { SendComponent } from './send/send.component';
import { NavComponent } from './layout/nav.component';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import localeBe from '@angular/common/locales/be'; import localeBe from '@angular/common/locales/be';
import localeBg from '@angular/common/locales/bg'; import localeBg from '@angular/common/locales/bg';
@ -160,7 +161,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
], ],
declarations: [ declarations: [
A11yTitleDirective, A11yTitleDirective,
AccessComponent,
AddEditComponent, AddEditComponent,
ApiActionDirective, ApiActionDirective,
AppComponent, AppComponent,
@ -183,6 +183,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
LockComponent, LockComponent,
LoginComponent, LoginComponent,
ModalComponent, ModalComponent,
NavComponent,
PasswordGeneratorComponent, PasswordGeneratorComponent,
PasswordGeneratorHistoryComponent, PasswordGeneratorHistoryComponent,
PasswordHistoryComponent, PasswordHistoryComponent,

5
src/app/layout/nav.component.html Normal file
View File

@ -0,0 +1,5 @@
<ng-container *ngFor="let item of items">
<a [routerLink]="item.link" class="btn primary" routerLinkActive="active" [title]="item.label">
<i class="fa" [ngClass]="item.icon"></i>{{ item.label }}
</a>
</ng-container>

20
src/app/layout/nav.component.ts Normal file
View File

@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: 'nav.component.html',
})
export class NavComponent {
items: any[] = [
{
link: '/vault',
icon: 'fa-lock',
label: 'My Vault',
},
{
link: '/send',
icon: 'fa-paper-plane',
label: 'Send',
},
];
}

7
src/app/send/access.component.html
View File

@ -1,7 +0,0 @@
<div class="details">
<div clas="content">
<div class="inner-content">
<p>Under construction</p>
</div>
</div>
</div>

18
src/app/send/access.component.ts
View File

@ -1,18 +0,0 @@
import {
Component,
OnInit,
} from '@angular/core';
@Component({
selector: 'app-send-access',
templateUrl: 'access.component.html',
})
export class AccessComponent implements OnInit {
constructor() {
return;
}
ngOnInit() {
return;
}
}

50
src/app/send/send.component.html
View File

@ -3,32 +3,30 @@
<div class="mac-bar"></div> <div class="mac-bar"></div>
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<div class="top-content"> <h2 class="sr-only">{{'filters' | i18n}}</h2>
<h2 class="sr-only">{{'filters' | i18n}}</h2> <ul>
<ul> <li [ngClass]="{active: selectedAll}">
<li [ngClass]="{active: selectedAll}"> <a href="#" appStopClick appBlurClick (click)="selectAll()">
<a href="#" appStopClick appBlurClick (click)="selectAll()"> <i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allSends' | i18n}}
<i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allSends' | i18n}} </a>
</a> </li>
</li> </ul>
</ul> <h2>{{'types' | i18n}}</h2>
<h2>{{'types' | i18n}}</h2> <ul>
<ul> <li [ngClass]="{active: selectedType === sendType.Text}">
<li [ngClass]="{active: selectedType === sendType.Text}"> <a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)"> <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>&nbsp;{{'sendTypeText' | i18n}}
<i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>&nbsp;{{'sendTypeText' | i18n}} </a>
</a> </li>
</li> <li [ngClass]="{active: selectedType === sendType.File}">
<li [ngClass]="{active: selectedType === sendType.File}"> <a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)"> <i class="fa fa-fw fa-file-o" aria-hidden="true"></i>&nbsp;{{'sendTypeFile' | i18n}}
<i class="fa fa-fw fa-file-o" aria-hidden="true"></i>&nbsp;{{'sendTypeFile' | i18n}} </a>
</a> </li>
</li> </ul>
</ul> </div>
</div> <div class="footer">
<div class="bottom-content"> <app-nav class="nav"></app-nav>
<a routerLink="/" class="fa fa-lock btn primary icon-link" title="Bitwarden Vault"></a>
</div>
</div> </div>
</div> </div>
</div> </div>

182
src/app/vault/groupings.component.html
View File

@ -1,106 +1,104 @@
<div class="mac-bar"></div> <div class="mac-bar"></div>
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<div class="top-content"> <h2 class="sr-only">{{'filters' | i18n}}</h2>
<h2 class="sr-only">{{'filters' | i18n}}</h2> <ul>
<li [ngClass]="{active: selectedAll}">
<a href="#" appStopClick appBlurClick (click)="selectAll()">
<i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allItems' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedFavorites}">
<a href="#" appStopClick appBlurClick (click)="selectFavorites()">
<i class="fa fa-fw fa-star" aria-hidden="true"></i>&nbsp;{{'favorites' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedTrash}">
<a href="#" appStopClick appBlurClick (click)="selectTrash()">
<i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>&nbsp;{{'trash' | i18n}}
</a>
</li>
</ul>
<h2>{{'types' | i18n}}</h2>
<ul>
<li [ngClass]="{active: selectedType === cipherType.Login}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
<i class="fa fa-fw fa-globe" aria-hidden="true"></i>&nbsp;{{'typeLogin' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.Card}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
<i class="fa fa-fw fa-credit-card" aria-hidden="true"></i>&nbsp;{{'typeCard' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.Identity}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
<i class="fa fa-fw fa-id-card-o" aria-hidden="true"></i>&nbsp;{{'typeIdentity' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.SecureNote}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
<i class="fa fa-fw fa-sticky-note-o" aria-hidden="true"></i>&nbsp;{{'typeSecureNote' | i18n}}
</a>
</li>
</ul>
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
<ng-container *ngIf="loaded">
<div class="heading">
<h2>{{'folders' | i18n}}</h2>
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>
</button>
</div>
<ul> <ul>
<li [ngClass]="{active: selectedAll}"> <ng-template #recursiveFolders let-folders>
<a href="#" appStopClick appBlurClick (click)="selectAll()"> <li *ngFor="let f of folders"
<i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allItems' | i18n}} [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
</a> <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
</li> <i *ngIf="f.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
<li [ngClass]="{active: selectedFavorites}"> [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
<a href="#" appStopClick appBlurClick (click)="selectFavorites()"> (click)="collapse(f.node)" appStopProp></i>
<i class="fa fa-fw fa-star" aria-hidden="true"></i>&nbsp;{{'favorites' | i18n}} <i *ngIf="f.children.length === 0" class="fa-fw fa fa-folder-o" aria-hidden="true"></i>
</a> &nbsp;{{f.node.name}}
</li> <span appStopProp appStopClick (click)="editFolder(f.node)" role="button"
<li [ngClass]="{active: selectedTrash}"> appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
<a href="#" appStopClick appBlurClick (click)="selectTrash()"> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
<i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>&nbsp;{{'trash' | i18n}} </span>
</a> </a>
</li> <ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
</ul> </ul>
<h2>{{'types' | i18n}}</h2> <div *ngIf="collections && collections.length">
<ul> <h2>{{'collections' | i18n}}</h2>
<li [ngClass]="{active: selectedType === cipherType.Login}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
<i class="fa fa-fw fa-globe" aria-hidden="true"></i>&nbsp;{{'typeLogin' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.Card}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
<i class="fa fa-fw fa-credit-card" aria-hidden="true"></i>&nbsp;{{'typeCard' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.Identity}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
<i class="fa fa-fw fa-id-card-o" aria-hidden="true"></i>&nbsp;{{'typeIdentity' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === cipherType.SecureNote}">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
<i class="fa fa-fw fa-sticky-note-o" aria-hidden="true"></i>&nbsp;{{'typeSecureNote' | i18n}}
</a>
</li>
</ul>
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
<ng-container *ngIf="loaded">
<div class="heading">
<h2>{{'folders' | i18n}}</h2>
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>
</button>
</div>
<ul> <ul>
<ng-template #recursiveFolders let-folders> <ng-template #recursiveCollections let-collections>
<li *ngFor="let f of folders" <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
[ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}"> <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)"> <i *ngIf="c.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
<i *ngIf="f.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true" [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
[ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}" (click)="collapse(c.node)" appStopProp></i>
(click)="collapse(f.node)" appStopProp></i> <i *ngIf="c.children.length === 0" class="fa-fw fa fa-cube" aria-hidden="true"></i>
<i *ngIf="f.children.length === 0" class="fa-fw fa fa-folder-o" aria-hidden="true"></i> &nbsp;{{c.node.name}}
&nbsp;{{f.node.name}}
<span appStopProp appStopClick (click)="editFolder(f.node)" role="button"
appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
</span>
</a> </a>
<ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)"> <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"> <ng-container
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
</ng-container> </ng-container>
</ul> </ul>
</li> </li>
</ng-template> </ng-template>
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container> <ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
</ng-container>
</ul> </ul>
<div *ngIf="collections && collections.length"> </div>
<h2>{{'collections' | i18n}}</h2> </ng-container>
<ul> </div>
<ng-template #recursiveCollections let-collections> <div class="footer">
<li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}"> <app-nav class="nav"></app-nav>
<a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
<i *ngIf="c.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
[ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
(click)="collapse(c.node)" appStopProp></i>
<i *ngIf="c.children.length === 0" class="fa-fw fa fa-cube" aria-hidden="true"></i>
&nbsp;{{c.node.name}}
</a>
<ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
<ng-container
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
</ng-container>
</ul>
</div>
</ng-container>
</div>
<div class="bottom-content">
<a routerLink="/send" class="fa fa-paper-plane btn primary icon-link" title="Bitwarden Send"></a>
</div>
</div> </div>
</div> </div>

10
src/scss/buttons.scss
View File

@ -77,16 +77,6 @@
text-decoration: underline; text-decoration: underline;
} }
} }
&.icon-link {
padding: 10px;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 45px;
}
} }
.action-buttons { .action-buttons {

48
src/scss/vault.scss
View File

@ -24,17 +24,24 @@
border-right-color: themed('borderColor'); border-right-color: themed('borderColor');
} }
.inner-content { .content {
display: flex; display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
justify-content: space-between; justify-content: space-between;
padding-right: 5px;
user-select: none;
> ul, > div > ul { .footer {
margin: 0 0 15px 0; padding: 0;
}
.inner-content {
padding-bottom: 0;
padding-right: 5px;
user-select: none;
> ul, > div > ul {
margin: 0 0 15px 0;
}
} }
} }
@ -418,7 +425,7 @@
} }
.footer { .footer {
height: 50px; height: 55px;
flex: 0 0 auto; flex: 0 0 auto;
border-top: 1px solid #000000; border-top: 1px solid #000000;
display: flex; display: flex;
@ -443,4 +450,31 @@
display: flex; display: flex;
} }
} }
.nav {
height: 100%;
width: 100%;
display: flex;
.btn {
width: 100%;
font-size: $font-size-base * 0.8;
flex: 1;
border: 0;
border-radius: 0;
padding-bottom: 4px;
&:not(.active) {
@include themify($themes) {
background-color: themed('backgroundColorAlt');
}
}
i {
font-size: $font-size-base * 1.5;
display: block;
margin-bottom: 2px;
text-align: center;
}
}
}
} }