1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-27 12:36:14 +01:00

search and move dropdown button

This commit is contained in:
Kyle Spearrin 2018-06-06 23:00:57 -04:00
parent ecddc1691f
commit 0fb66e247a
6 changed files with 51 additions and 31 deletions

View File

@ -2,19 +2,6 @@
<table class="table table-hover table-sm" *ngIf="searchedCiphers.length > 0">
<tbody>
<tr *ngFor="let c of searchedCiphers">
<td>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
<td>
<input type="checkbox">
</td>
@ -22,12 +9,23 @@
<app-vault-icon [cipher]="c"></app-vault-icon>
</td>
<td>
<a href="#" appStopClick (click)="selectCipher(c)" title="{{'viewItem' | i18n}}">
{{c.name}}
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
</a>
<small class="text-muted">{{c.subTitle}}</small>
<a href="#" appStopClick (click)="selectCipher(c)" title="{{'viewItem' | i18n}}">{{c.name}}</a>
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
<small>{{c.subTitle}}</small>
</td>
<td>
<div class="dropdown" appListDropdown>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>

View File

@ -3,7 +3,8 @@
Filters
</div>
<div class="card-body">
<input type="search" class="form-control" id="search" placeholder="Search vault">
<input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
class="form-control" [(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
<ul class="fa-ul">
<li [ngClass]="{active: selectedAll}">
<a href="#" appStopClick appBlurClick (click)="selectAll()">

View File

@ -1,4 +1,8 @@
import { Component } from '@angular/core';
import {
Component,
EventEmitter,
Output,
} from '@angular/core';
import { CollectionService } from 'jslib/abstractions/collection.service';
import { FolderService } from 'jslib/abstractions/folder.service';
@ -10,7 +14,14 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
templateUrl: 'groupings.component.html',
})
export class GroupingsComponent extends BaseGroupingsComponent {
@Output() onSearchTextChanged = new EventEmitter<string>();
searchText: string = '';
constructor(collectionService: CollectionService, folderService: FolderService) {
super(collectionService, folderService);
}
searchTextChanged() {
this.onSearchTextChanged.emit(this.searchText);
}
}

View File

@ -37,7 +37,8 @@
(onFolderClicked)="filterFolder($event.id)"
(onAddFolder)="addFolder()"
(onEditFolder)="editFolder($event.id)"
(onCollectionClicked)="filterCollection($event.id)">
(onCollectionClicked)="filterCollection($event.id)"
(onSearchTextChanged)="filterSearchText($event)">
</app-vault-groupings>
</div>
<div class="col-6">

View File

@ -128,6 +128,10 @@ export class VaultComponent implements OnInit {
this.go();
}
filterSearchText(searchText: string) {
this.ciphersComponent.searchText = searchText;
}
editCipherAttachments(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();

View File

@ -92,29 +92,25 @@ app-vault {
}
tr:hover {
td:first-child {
background-color: $body-bg;
td:last-child .dropdown button {
visibility: initial;
}
}
td {
vertical-align: middle;
a {
small {
display: block;
color: $text-muted;
}
}
td:first-child {
width: 65px;
border: none;
}
td:nth-child(2) {
width: 25px;
}
td:nth-child(3) {
td:nth-child(2) {
width: 25px;
text-align: center;
@ -123,5 +119,14 @@ app-vault {
@extend .img-fluid;
}
}
td:last-child {
width: 65px;
text-align: right;
.dropdown:not(.show) button {
visibility: hidden;
}
}
}
}