nested folders and collections

jslib

@@ -1 +1 @@
-Subproject commit 4165a78277048d7b37319e63bd7e6473cbba5156
+Subproject commit b0eea9d7cefdc5453750f49985689fefa1fa53a5

src/app/vault/groupings.component.html

@@ -44,24 +44,43 @@
                 </button>
             </h2>
             <ul class="fa-ul">
-                <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
+                <ng-template #recursiveFolders let-folders>
-                    <a href="#" appStopClick appBlurClick (click)="selectFolder(f)">
+                    <li *ngFor="let f of folders" 
-                        <i class="fa-li fa fa-caret-right"></i> {{f.name}}
+                        [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
-                        <span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
+                        <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
-                              *ngIf="f.id">
+                            <i class="fa-li fa fa-caret-right"></i> {{f.node.name}}
-                            <i class="fa fa-pencil fa-fw"></i>
+                            <span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
-                        </span>
+                                    *ngIf="f.node.id">
-                    </a>
+                                <i class="fa fa-pencil fa-fw"></i>
-                </li>
+                            </span>
+                        </a>
+                        <ul class="fa-ul" *ngIf="f.children.length">
+                            <ng-container
+                                *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
+                        </ul>
+                    </li>
+                </ng-template>
+                <ng-container
+                    *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
             </ul>
             <div *ngIf="collections && collections.length">
                 <h2>{{'collections' | i18n}}</h2>
                 <ul class="fa-ul">
-                    <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
+                    <ng-template #recursiveCollections let-collections>
-                        <a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
+                        <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
-                            <i class="fa-li fa fa-caret-right"></i> {{c.name}}
+                            <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
-                        </a>
+                                <i class="fa-li fa fa-caret-right"></i> {{c.node.name}}
-                    </li>
+                            </a>
+                            <ul class="fa-ul" *ngIf="c.children.length">
+                                <ng-container
+                                    *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
+                                </ng-container>
+                            </ul>
+                        </li>
+                    </ng-template>
+                    <ng-container
+                        *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
+                    </ng-container>
                 </ul>
             </div>
         </ng-container>

src/app/vault/groupings.component.ts

@@ -12,5 +12,7 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
 export class GroupingsComponent extends BaseGroupingsComponent {
     constructor(collectionService: CollectionService, folderService: FolderService) {
         super(collectionService, folderService);
+        this.loadNestedCollections = true;
+        this.loadNestedFolders = true;
     }
 }

src/scss/vault.scss

@@ -27,6 +27,10 @@
         .inner-content {
             padding-bottom: 0;
             padding-right: 5px;
+
+            > ul {
+                margin: 0 0 15px 0;
+            }
         }
 
         h2 {
@@ -71,23 +75,122 @@
                 word-break: break-all;
 
                 .fa-li {
-                    left: -11px;
                     top: 8px;
                 }
+            }
+        }
 
-                a {
+        // Nested indentions
+        ul.fa-ul {
+            // Level 1
+            li {
+                > a {
                     padding-left: 12px;
                 }
 
-                &.active .fa-li {
+                .fa-li {
+                    left: -11px;
+                }
+
+                &.active > a .fa-li {
                     left: 4px;
                 }
             }
+
+            // Level 2
+            ul li { 
+                > a {
+                    padding-left: 23px;
+                }
+
+                .fa-li {
+                    left: 0;
+                }
+
+                &.active > a .fa-li {
+                    left: 15px;
+                }
+            }
+
+            // Level 3
+            ul ul li { 
+                > a {
+                    padding-left: 34px;
+                }
+
+                .fa-li {
+                    left: 11px;
+                }
+
+                &.active > a .fa-li {
+                    left: 26px;
+                }
+            }
+
+            // Level 4
+            ul ul ul li { 
+                > a {
+                    padding-left: 45px;
+                }
+
+                .fa-li {
+                    left: 22px;
+                }
+
+                &.active > a .fa-li {
+                    left: 37px;
+                }
+            }
+
+            // Level 5
+            ul ul ul ul li { 
+                > a {
+                    padding-left: 56px;
+                }
+
+                .fa-li {
+                    left: 33px;
+                }
+
+                &.active > a .fa-li {
+                    left: 48px;
+                }
+            }
+
+            // Level 6
+            ul ul ul ul ul li { 
+                > a {
+                    padding-left: 67px;
+                }
+
+                .fa-li {
+                    left: 44px;
+                }
+
+                &.active > a .fa-li {
+                    left: 59px;
+                }
+            }
+
+            // Level 7
+            ul ul ul ul ul ul li { 
+                > a {
+                    padding-left: 78px;
+                }
+
+                .fa-li {
+                    left: 55px;
+                }
+
+                &.active > a .fa-li {
+                    left: 70px;
+                }
+            }
         }
 
         ul {
             padding: 0;
-            margin: 0 0 15px 0;
+            margin: 0;
 
             li {
                 a {
@@ -130,6 +233,17 @@
                     @include themify($themes) {
                         background-color: themed('groupingsActiveColor');
                     }
+
+                    ul {
+                        @include themify($themes) {
+                            background-color: themed('backgroundColorAlt');
+                        }
+
+                        margin-left: -15px;
+                        margin-right: -5px;
+                        padding-left: 15px;
+                        padding-right: 5px;
+                    }
                 }
             }
         }