feat: added Button to switch layout

Commandos-app · Oct 2, 2021 · 485ae2d · 485ae2d
1 parent 926ebff
commit 485ae2d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 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
@@ -13,6 +13,20 @@
                     </cds-form-group>
 
                     <div cds-layout="horizontal gap:sm align-items:bottom align:right m-t:xs m-r:sm">
+
+                        <cds-icon-button *ngIf="viewMode === 'tree';else TreeView" (click)="changeToListView()"
+                            size="sm" action="flat" cds-layout="m-l:xs m-r:auto" aria-label="change to listview"
+                            [loadingState]="isLoading">
+                            <cds-icon shape="view-list" size="14"></cds-icon>
+                        </cds-icon-button>
+
+                        <ng-template #TreeView>
+                            <cds-icon-button (click)="changeToTreeView()" size="sm" action="flat"
+                                cds-layout="m-l:xs m-r:auto" aria-label="change to treeview" [loadingState]="isLoading">
+                                <cds-icon shape="tree-view" size="14"></cds-icon>
+                            </cds-icon-button>
+                        </ng-template>
+
                         <cds-button action="flat" status="success" [loadingState]="isCommiting" size="sm"
                             (click)="commit()" [disabled]="formDisabled">
                             Commit

diff --git a/src/app/routes/repository/repository-commit/repository-commit.component.ts b/src/app/routes/repository/repository-commit/repository-commit.component.ts
@@ -10,6 +10,8 @@ import { interval } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { basename, sleep, LoadingState, LocalStorage } from '@shared/functions';
 
+type ViewMode = 'tree' | 'list';
+
 @UntilDestroy()
 @Component({
     selector: 'app-repository-commit',
@@ -22,6 +24,8 @@ export class RepositoryCommitComponent implements OnInit {
 
     fileTree: GroupedChangedFiles = [];
     formDisabled = false;
+    viewMode: ViewMode = 'tree';
+
 
     get commitMessage(): string {
         return localStorage.getItem(`commitMessage-${this.repositoryService.currentId}`);
@@ -244,6 +248,13 @@ export class RepositoryCommitComponent implements OnInit {
         this.isDiffLoading = false;
     }
 
+    changeToListView() {
+        this.viewMode = 'list';
+    }
+
+    changeToTreeView() {
+        this.viewMode = 'tree';
+    }
 
     hideChild(node: any) {
         node.hideChildren = !node.hideChildren;

diff --git a/src/app/shared/clarity-icons.module.ts b/src/app/shared/clarity-icons.module.ts
@@ -7,7 +7,7 @@ import {
     minusIcon, moonIcon, noteIcon, pencilIcon, playIcon,
     plusIcon, shrinkIcon, sunIcon, timesIcon, trashIcon, undoIcon,
     unknownStatusIcon, uploadCloudIcon, wandIcon, windowCloseIcon, windowMaxIcon, windowMinIcon,
-    windowRestoreIcon, twoWayArrowsIcon, userIcon, refreshIcon, happyFaceIcon, arrowIcon, syncIcon, pinIcon, barsIcon, viewCardsIcon, viewListIcon
+    windowRestoreIcon, twoWayArrowsIcon, userIcon, refreshIcon, happyFaceIcon, arrowIcon, syncIcon, pinIcon, barsIcon, viewCardsIcon, viewListIcon, treeViewIcon
 } from '@cds/core/icon';
 
 import '@cds/core/icon/register.js';
@@ -20,7 +20,7 @@ const icons = [
     fileIcon, sunIcon, moonIcon, homeIcon, historyIcon,
     trashIcon, downloadIcon, twoWayArrowsIcon, userIcon,
     refreshIcon, happyFaceIcon, arrowIcon, syncIcon, pinIcon,
-    barsIcon, viewCardsIcon, viewListIcon
+    barsIcon, viewCardsIcon, viewListIcon, treeViewIcon
 ]
 
 ClarityIcons.addIcons(...icons);

diff --git a/src/theme/import.scss b/src/theme/import.scss
@@ -8,3 +8,4 @@
 @import './animations';
 @import './typo';
 @import './button';
+@import './layout';
diff --git a/src/theme/layout.scss b/src/theme/layout.scss
@@ -0,0 +1,7 @@
+[cds-layout~="m-r:auto"] {
+    margin-right: auto !important;
+}
+
+[cds-layout~="m-l:auto"] {
+    margin-left: auto !important;
+}