selection highlights

src/app/vault/groupings.component.html

@@ -1,12 +1,12 @@
 <div class="content">
     <div class="inner-content">
         <ul>
-            <li>
+            <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick (click)="all()">
                     <i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}
                 </a>
             </li>
-            <li>
+            <li [ngClass]="{active: selectedFavorites}">
                 <a href="#" appStopClick (click)="favorites()">
                     <i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}
                 </a>
@@ -14,25 +14,25 @@
         </ul>
         <h2><i class="fa fa-tag"></i> {{'types' | i18n}}</h2>
         <ul>
-            <li>
+            <li [ngClass]="{active: selectedType === cipherType.Login}">
                 <a href="#" appStopClick (click)="type(cipherType.Login)">
                     <i class="fa fa-fw fa-globe"></i>
                     {{'typeLogin' | i18n}}
                 </a>
             </li>
-            <li>
+            <li [ngClass]="{active: selectedType === cipherType.Card}">
                 <a href="#" appStopClick (click)="type(cipherType.Card)">
                     <i class="fa fa-fw fa-credit-card"></i>
                     {{'typeCard' | i18n}}
                 </a>
             </li>
-            <li>
+            <li [ngClass]="{active: selectedType === cipherType.Identity}">
                 <a href="#" appStopClick (click)="type(cipherType.Identity)">
                     <i class="fa fa-fw fa-id-card-o"></i>
                     {{'typeIdentity' | i18n}}
                 </a>
             </li>
-            <li>
+            <li [ngClass]="{active: selectedType === cipherType.SecureNote}">
                 <a href="#" appStopClick (click)="type(cipherType.SecureNote)">
                     <i class="fa fa-fw fa-sticky-note-o"></i>
                     {{'typeSecureNote' | i18n}}
@@ -41,7 +41,7 @@
         </ul>
         <h2><i class="fa fa-folder"></i> {{'folders' | i18n}}</h2>
         <ul class="fa-ul">
-            <li *ngFor="let f of folders">
+            <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
                 <a href="#" appStopClick (click)="folder(f)">
                     <i class="fa-li fa fa-caret-right"></i> {{f.name}}
                 </a>
@@ -50,7 +50,7 @@
         <div *ngIf="collections && collections.length">
             <h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
             <ul class="fa-ul">
-                <li *ngFor="let c of collections">
+                <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
                     <a href="#" appStopClick (click)="collection(c)">
                         <i class="fa-li fa fa-caret-right"></i> {{c.name}}
                     </a>

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;
+    }
 }

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() {

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;
+                }
             }
         }
     }