From f207aa3a9d7e94952acc99afc19a11c71390abad Mon Sep 17 00:00:00 2001
From: Chad Scharf <3904944+cscharf@users.noreply.github.com>
Date: Mon, 21 Dec 2020 10:59:07 -0500
Subject: [PATCH] show caret or icon, not just "blank" space (#745)

---
 src/app/vault/groupings.component.html | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 761f4910a1..6518415a5c 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -62,7 +62,7 @@
                         <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
                     </a>
                 </h3>
-                <ul class="fa-ul card-ul carets">
+                <ul class="fa-ul card-ul">
                     <ng-template #recursiveFolders let-folders>
                         <li *ngFor="let f of folders"
                             [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
@@ -70,7 +70,9 @@
                                 <i *ngIf="f.children.length" class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
                                     [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
                                     (click)="collapse(f.node)"></i>
-                                <a href="#" appStopClick (click)="selectFolder(f.node)">{{f.node.name}}</a>
+                                <a href="#" appStopClick (click)="selectFolder(f.node)">
+                                    <i *ngIf="f.children.length === 0" class="fa-li fa fa-folder-o" aria-hidden="true"></i>{{f.node.name}}
+                                </a>
                                 <a href="#" class="text-muted ml-auto show-active" appStopClick
                                     (click)="editFolder(f.node)" appA11yTitle="{{'editFolder' | i18n}}"
                                     *ngIf="f.node.id">
@@ -89,13 +91,15 @@
             </ng-container>
             <ng-container *ngIf="showCollections && collections && collections.length">
                 <h3>{{'collections' | i18n}}</h3>
-                <ul class="fa-ul card-ul carets">
+                <ul class="fa-ul card-ul">
                     <ng-template #recursiveCollections let-collections>
                         <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
                             <i *ngIf="c.children.length" class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
                                 [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
                                 (click)="collapse(c.node)"></i>
-                            <a href="#" appStopClick (click)="selectCollection(c.node)">{{c.node.name}}</a>
+                            <a href="#" appStopClick (click)="selectCollection(c.node)">
+                                <i *ngIf="c.children.length === 0" class="fa-li fa fa-cube" aria-hidden="true"></i>{{c.node.name}}
+                            </a>
                             <ul class="fa-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
                                 <ng-container
                                     *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">