tasks: compact mode

matsen-tool/src/app/_views/tasks/task-list/task-list.component.html

@@ -7,8 +7,9 @@
                 [dataSource]="dataSource"
     >
         <div class="tasks-box">
+            <div class="mb-3 mt-3 taskCompactModeBox" (click)="switchTaskDisplay()" [class.taskCompactMode]="taskCompactMode">Kompaktansicht</div>
             <div class="tasks pb-1" *ngFor="let task of tasks">
-                <div class="card p-3">
+                <div class="card p-3" *ngIf="taskCompactMode">
                     <div class="row pb-1">
                         <div class="col-12">
                             <div style="display: flex;justify-content: flex-start;align-items: center;">
@@ -42,7 +43,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card p-3">
+                <div class="card p-3" *ngIf="!taskCompactMode">
                     <div class="row">
                         <div class="col-4">
                             <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>

matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts

@@ -24,6 +24,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     protected tasksSub: Subscription;
     protected tasks: Array<TaskJsonld>;
     protected dataSource;
+    protected taskCompactMode: boolean;
 
     protected taskNotesVisibility: Map<string, boolean>;
 
@@ -37,6 +38,11 @@ export class TaskListComponent implements OnInit, AfterViewInit {
         this.dataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
         this.taskNotesVisibility = new Map<string, boolean>();
         this.currentUser = this.accountService.userValue;
+        if (localStorage.getItem('taskCompactMode') !== null) {
+            this.taskCompactMode = localStorage.getItem('taskCompactMode') === 'true';
+        } else {
+            this.taskCompactMode = false;
+        }
     }
 
     ngOnInit(): void {
@@ -93,4 +99,9 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     openModalEditTaskNote(taskNote: TaskNoteJsonld) {
         this.appHelperService.openModal(NewTaskNoteComponent, { 'taskNote': taskNote }, this.getData);
     }
+
+    switchTaskDisplay() {
+        localStorage.setItem('taskCompactMode', this.taskCompactMode ? 'false' : 'true');
+        this.taskCompactMode = !this.taskCompactMode;
+    }
 }

matsen-tool/src/assets/scss/_basics.scss

@@ -384,3 +384,29 @@ img {
     }
   }
 }
+
+.taskCompactModeBox {
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgb(33, 37, 41);
+  }
+  &.taskCompactMode {
+    &:after {
+      content: "";
+      position: absolute;
+      left: 3px;
+      top: 6px;
+      width: 8px;
+      height: 8px;
+      background: rgb(33, 37, 41);
+    }
+  }
+}