feat: colapsable tree view

Commandos-app · Aug 4, 2021 · a2f4ee7 · a2f4ee7
1 parent 743f6da
commit a2f4ee7
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 4 deletions.
diff --git a/src/app/routes/repository/repository-commit/repository-commit.component.html b/src/app/routes/repository/repository-commit/repository-commit.component.html
@@ -99,8 +99,17 @@
         </div>
 
         <div *ngSwitchDefault class="comander-tree-row commander-tree-folder-row">
-            <cds-icon shape="folder-open" solid="true"></cds-icon>
-            <span class="comander-tree-row-text">
+            <ng-container *ngIf="!node.hideChildren">
+                <cds-icon shape="angle" class="commander-tree-arrow" size="sm" direction="down"
+                    (click)="hideChild(node)"></cds-icon>
+                <cds-icon shape="folder-open" solid="true" (click)="hideChild(node)"></cds-icon>
+            </ng-container>
+            <ng-container *ngIf="node.hideChildren">
+                <cds-icon shape="angle" class="commander-tree-arrow" direction="right" (click)="hideChild(node)">
+                </cds-icon>
+                <cds-icon shape="folder" solid="true" (click)="hideChild(node)"></cds-icon>
+            </ng-container>
+            <span cds-text="secondary" class="comander-tree-row-text" (click)="hideChild(node)">
                 {{node.name}}
             </span>
 

diff --git a/src/app/routes/repository/repository-commit/repository-commit.component.scss b/src/app/routes/repository/repository-commit/repository-commit.component.scss
@@ -80,3 +80,7 @@ cds-textarea {
     --cds-global-layout-space-xxl: 32px;
     --padding: var(--cds-global-space-4)
 }
+
+.commander-tree-arrow {
+    --color: var(--cds-global-color-warm-gray-400);
+}
diff --git a/src/app/routes/repository/repository-commit/repository-commit.component.ts b/src/app/routes/repository/repository-commit/repository-commit.component.ts
@@ -168,4 +168,8 @@ export class RepositoryCommitComponent implements OnInit {
     }
 
 
+    hideChild(node: any) {
+        node.hideChildren = !node.hideChildren;
+    }
+
 }
diff --git a/src/app/shared/components/tree-view/tree-view.component.html b/src/app/shared/components/tree-view/tree-view.component.html
@@ -12,7 +12,7 @@
             </ng-container>
 
         </div>
-        <ng-container *ngIf="node.children.length > 0">
+        <ng-container *ngIf="node.children.length > 0 && !node.hideChildren">
             <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ list: node.children, index: index+1 }">
             </ng-container>
         </ng-container>

diff --git a/src/app/shared/components/tree-view/tree-view.component.ts b/src/app/shared/components/tree-view/tree-view.component.ts
@@ -15,4 +15,5 @@ export class TreeViewComponent implements OnInit {
     ngOnInit(): void {
     }
 
+
 }
diff --git a/src/theme/tree.scss b/src/theme/tree.scss
@@ -53,14 +53,15 @@
     display: grid !important;
     grid-template-columns: 16px 1fr 0 0 auto;
     box-sizing: border-box !important;
+    margin-left: 16px;
     &:hover {
         grid-template-columns: 16px 1fr 24px 24px auto;
     }
 }
 
 .commander-tree-folder-row {
     display: grid !important;
-    grid-template-columns: 16px 1fr auto;
+    grid-template-columns: 16px 16px 1fr auto;
 }
 
 .comander-tree-title {
@@ -76,6 +77,7 @@
 
 .commander-tree-item {
     --base-padding: 10px;
+    cursor: pointer;
     &:hover {
         background: var(--cds-global-color-gray-100);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -168,4 +168,8 @@ export class RepositoryCommitComponent implements OnInit { @@
         }
+        hideChild(node: any) {
+            node.hideChildren = !node.hideChildren;
+        }
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,5 @@ export class TreeViewComponent implements OnInit {
		ngOnInit(): void {
		}


		}