From af5788c9daeb414edcffa9d76fcd937efbae5530 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 9 Nov 2018 23:03:43 -0500
Subject: [PATCH] expand/collapse groupings

---
 src/app/vault/groupings.component.html | 16 ++++++++++----
 src/locales/en/messages.json           |  4 ++++
 src/scss/vault.scss                    | 29 +++++++++++++-------------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index ff9e4bad..fec7e6d5 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -48,13 +48,17 @@
                     <li *ngFor="let f of folders" 
                         [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
                         <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
-                            <i class="fa-li fa fa-caret-right"></i> {{f.node.name}}
+                            <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
+                                [ngClass]="{'fa-caret-right': isCollapsed(f.node),
+                                    'fa-caret-down': !isCollapsed(f.node)}"
+                                (click)="collapse(f.node)" appStopProp></i>
+                            {{f.node.name}}
                             <span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
                                     *ngIf="f.node.id">
                                 <i class="fa fa-pencil fa-fw"></i>
                             </span>
                         </a>
-                        <ul class="fa-ul" *ngIf="f.children.length">
+                        <ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
                             <ng-container
                                 *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
                         </ul>
@@ -69,9 +73,13 @@
                     <ng-template #recursiveCollections let-collections>
                         <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
                             <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
-                                <i class="fa-li fa fa-caret-right"></i> {{c.node.name}}
+                                <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
+                                    [ngClass]="{'fa-caret-right': isCollapsed(c.node),
+                                        'fa-caret-down': !isCollapsed(c.node)}"
+                                    (click)="collapse(c.node)" appStopProp></i>
+                                {{c.node.name}}
                             </a>
-                            <ul class="fa-ul" *ngIf="c.children.length">
+                            <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
                                 <ng-container
                                     *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
                                 </ng-container>
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index a46d3c40..fa91673a 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -112,6 +112,10 @@
   "toggleVisibility": {
     "message": "Toggle Visibility"
   },
+  "toggleCollapse": {
+    "message": "Toggle Collapse",
+    "description": "Toggling an expand/collapse state."
+  },
   "cardholderName": {
     "message": "Cardholder Name"
   },
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index caa570cd..9effed29 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -76,6 +76,7 @@
 
                 .fa-li {
                     top: 8px;
+                    width: 1.1em;
                 }
             }
         }
@@ -89,11 +90,11 @@
                 }
 
                 .fa-li {
-                    left: -11px;
+                    left: -4px;
                 }
 
                 &.active > a .fa-li {
-                    left: 4px;
+                    left: 11px;
                 }
             }
 
@@ -104,11 +105,11 @@
                 }
 
                 .fa-li {
-                    left: 0;
+                    left: 7px;
                 }
 
                 &.active > a .fa-li {
-                    left: 15px;
+                    left: 22px;
                 }
             }
 
@@ -119,11 +120,11 @@
                 }
 
                 .fa-li {
-                    left: 11px;
+                    left: 18px;
                 }
 
                 &.active > a .fa-li {
-                    left: 26px;
+                    left: 33px;
                 }
             }
 
@@ -134,11 +135,11 @@
                 }
 
                 .fa-li {
-                    left: 22px;
+                    left: 29px;
                 }
 
                 &.active > a .fa-li {
-                    left: 37px;
+                    left: 44px;
                 }
             }
 
@@ -149,11 +150,11 @@
                 }
 
                 .fa-li {
-                    left: 33px;
+                    left: 40px;
                 }
 
                 &.active > a .fa-li {
-                    left: 48px;
+                    left: 55px;
                 }
             }
 
@@ -164,11 +165,11 @@
                 }
 
                 .fa-li {
-                    left: 44px;
+                    left: 51px;
                 }
 
                 &.active > a .fa-li {
-                    left: 59px;
+                    left: 66px;
                 }
             }
 
@@ -179,11 +180,11 @@
                 }
 
                 .fa-li {
-                    left: 55px;
+                    left: 62px;
                 }
 
                 &.active > a .fa-li {
-                    left: 70px;
+                    left: 77px;
                 }
             }
         }