diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 815e4fbe96..48bb445c0e 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -1,12 +1,12 @@
{{'types' | i18n}}
{{'folders' | i18n}}
- -
+
-
{{f.name}}
@@ -50,7 +50,7 @@
{{'collections' | i18n}}
- -
+
-
{{c.name}}
diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts
index d6baace8e8..03c7f62652 100644
--- a/src/app/vault/groupings.component.ts
+++ b/src/app/vault/groupings.component.ts
@@ -30,6 +30,12 @@ export class GroupingsComponent implements OnInit {
folders: any[];
collections: any[];
cipherType = CipherType;
+ selectedAll: boolean = false;
+ selectedFavorites: boolean = false;
+ selectedType: CipherType = null;
+ selectedFolder: boolean = false;
+ selectedFolderId: string = null;
+ selectedCollectionId: string = null;
constructor(private collectionService: CollectionService, private folderService: FolderService) {
// ctor
@@ -41,22 +47,42 @@ export class GroupingsComponent implements OnInit {
}
all() {
+ this.clearSelections();
+ this.selectedAll = true;
this.onAllClicked.emit();
}
favorites() {
+ this.clearSelections();
+ this.selectedFavorites = true;
this.onFavoritesClicked.emit();
}
type(type: CipherType) {
+ this.clearSelections();
+ this.selectedType = type;
this.onCipherTypeClicked.emit(type);
}
folder(folder: FolderView) {
+ this.clearSelections();
+ this.selectedFolder = true;
+ this.selectedFolderId = folder.id;
this.onFolderClicked.emit(folder);
}
collection(collection: CollectionView) {
+ this.clearSelections();
+ this.selectedCollectionId = collection.id;
this.onCollectionClicked.emit(collection);
}
+
+ clearSelections() {
+ this.selectedAll = false;
+ this.selectedFavorites = false;
+ this.selectedType = null;
+ this.selectedFolder = false;
+ this.selectedFolderId = null;
+ this.selectedCollectionId = null;
+ }
}
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index c4c134f307..ed8c146f55 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -14,6 +14,7 @@ import {
import { Location } from '@angular/common';
import { CiphersComponent } from './ciphers.component';
+import { GroupingsComponent } from './groupings.component';
import { CipherType } from 'jslib/enums/cipherType';
@@ -27,6 +28,7 @@ import { FolderView } from 'jslib/models/view/folderView';
})
export class VaultComponent implements OnInit {
@ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
+ @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
action: string;
cipherId: string = null;
@@ -53,14 +55,21 @@ export class VaultComponent implements OnInit {
}
if (params['favorites']) {
+ this.groupingsComponent.selectedFavorites = true;
await this.filterFavorites();
} else if (params['type']) {
- await this.filterCipherType(parseInt(params['type']));
+ const t = parseInt(params['type']);
+ this.groupingsComponent.selectedType = t;
+ await this.filterCipherType(t);
} else if (params['folderId']) {
+ this.groupingsComponent.selectedFolder = true;
+ this.groupingsComponent.selectedFolderId = params['folderId'];
await this.filterFolder(params['folderId']);
} else if (params['collectionId']) {
+ this.groupingsComponent.selectedCollectionId = params['collectionId'];
await this.filterCollection(params['collectionId']);
} else {
+ this.groupingsComponent.selectedAll = true;
await this.ciphersComponent.load();
}
});
@@ -73,7 +82,7 @@ export class VaultComponent implements OnInit {
this.cipherId = cipher.id;
this.action = 'view';
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
}
editCipher(cipher: CipherView) {
@@ -83,7 +92,7 @@ export class VaultComponent implements OnInit {
this.cipherId = cipher.id;
this.action = 'edit';
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
}
addCipher() {
@@ -93,20 +102,20 @@ export class VaultComponent implements OnInit {
this.action = 'add';
this.cipherId = null;
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
}
savedCipher(cipher: CipherView) {
this.cipherId = cipher.id;
this.action = 'view';
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
this.ciphersComponent.updateCipher(cipher);
}
deletedCipher(cipher: CipherView) {
this.cipherId = null;
this.action = null;
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
this.ciphersComponent.removeCipher(cipher.id);
}
@@ -117,7 +126,7 @@ export class VaultComponent implements OnInit {
cancelledAddEdit(cipher: CipherView) {
this.cipherId = cipher.id;
this.action = this.cipherId != null ? 'view' : null;
- this.go({ action: this.action, cipherId: this.cipherId });
+ this.go();
}
async clearGroupingFilters() {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index e452c8d4e4..b187ee64e8 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -128,6 +128,15 @@ textarea {
padding: 5px 0;
color: $text-color;
}
+
+ &.active {
+ background-color: darken($background-color-alt, 5%);
+ border-radius: $border-radius;
+ margin-left: -15px;
+ margin-right: -15px;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
}
}
}