diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a919f638..c50ca233 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { IconComponent } from './vault/icon.component';
import { LoginComponent } from './accounts/login.component';
import { ModalComponent } from './modal.component';
import { PasswordGeneratorComponent } from './vault/password-generator.component';
+import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
import { StopClickDirective } from './directives/stop-click.directive';
import { StopPropDirective } from './directives/stop-prop.directive';
import { VaultComponent } from './vault/vault.component';
@@ -51,6 +52,7 @@ import { ViewComponent } from './vault/view.component';
LoginComponent,
ModalComponent,
PasswordGeneratorComponent,
+ SearchCiphersPipe,
StopClickDirective,
StopPropDirective,
VaultComponent,
diff --git a/src/app/pipes/search-ciphers.pipe.ts b/src/app/pipes/search-ciphers.pipe.ts
new file mode 100644
index 00000000..0c2dc2e0
--- /dev/null
+++ b/src/app/pipes/search-ciphers.pipe.ts
@@ -0,0 +1,36 @@
+import {
+ Pipe,
+ PipeTransform,
+} from '@angular/core';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Pipe({
+ name: 'searchCiphers',
+})
+export class SearchCiphersPipe implements PipeTransform {
+ transform(ciphers: CipherView[], searchText: string): CipherView[] {
+ if (ciphers == null || ciphers.length === 0) {
+ return [];
+ }
+
+ if (searchText == null || searchText.length < 2) {
+ return ciphers;
+ }
+
+ searchText = searchText.toLowerCase();
+ return ciphers.filter(c => {
+ if (c.name != null && c.name.toLowerCase().indexOf(searchText) > -1) {
+ return true;
+ }
+ if (c.subTitle != null && c.subTitle.toLowerCase().indexOf(searchText) > -1) {
+ return true;
+ }
+ if (c.login && c.login.uri != null && c.login.uri.toLowerCase().indexOf(searchText) > -1) {
+ return true;
+ }
+
+ return false;
+ });
+ }
+}
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 504c63db..9c9838f0 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -1,17 +1,12 @@
-
diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts
index b0a3a348..0e97826a 100644
--- a/src/app/vault/ciphers.component.ts
+++ b/src/app/vault/ciphers.component.ts
@@ -22,6 +22,7 @@ export class CiphersComponent implements OnInit {
@Output() onAddCipher = new EventEmitter();
ciphers: CipherView[] = [];
+ searchText: string;
private filter: (cipher: CipherView) => boolean = null;
constructor(private cipherService: CipherService) {
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index dffd5128..a3f195a6 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -140,90 +140,21 @@
min-height: 44px;
max-height: 44px;
background-color: $brand-primary;
- color: white;
- text-align: center;
- overflow: hidden;
flex: 0 0 auto;
border-bottom: 1px solid darken($brand-primary, 7%);
-
- a, button {
- color: white !important;
- text-decoration: none;
- background: none;
-
- &:hover, &:focus {
- background-color: rgba(255, 255, 255, 0.1);
- }
-
- &:hover {
- text-decoration: none;
- }
-
- &:focus {
- text-decoration: underline;
- }
- }
-
- .title {
- font-weight: bold;
- display: block;
- padding: 12px 0;
- text-align: center;
- }
-
- .left {
- display: block;
- position: absolute;
- left: 0;
- text-align: left;
-
- a, button {
- padding: 12px 10px;
- display: block;
- float: left;
- }
-
- .fa-spinner {
- padding: 15px;
- display: block;
- float: left;
- }
- }
-
- .right {
- display: block;
- right: 0;
- position: absolute;
- z-index: 99999;
-
- a, button {
- padding: 12px 10px;
- display: block;
- float: right;
- }
-
- .fa-spinner {
- padding: 15px;
- display: block;
- float: right;
- }
- }
+ display: flex;
+ align-items: center;
&.header-search {
- .left, .right, .search {
- display: table-cell;
- position: relative;
- }
-
.search {
padding: 0 7px;
width: 100%;
text-align: left;
position: relative;
- .fa-search {
+ .fa {
position: absolute;
- top: 15px;
+ top: 7px;
left: 15px;
color: lighten($brand-primary, 30%);
}
@@ -231,7 +162,6 @@
input {
width: 100%;
margin: 0;
- float: none;
background: darken($brand-primary, 8%);
border: none;
color: white;
@@ -249,11 +179,6 @@
}
}
}
-
- a {
- white-space: nowrap;
- float: none;
- }
}
}