frontend

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

@@ -7,51 +7,52 @@
                     [getDataFunction]="getData"
                     [dataSource]="dataSource"
         >
-            <div class="tasks mb-3" *ngFor="let task of tasks">
-                <div class="card p-3">
-                    <div class="position-relative">
-                        <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
-                        <h3 class="m-0" *ngIf="task.product"><a href="/product/{{this.appHelperService.extractId(task.product)}}">{{task.productName}}</a></h3>
-                        <span class="info d-flex position-absolute">
+            <div class="tasks-box">
+                <div class="tasks pb-1" *ngFor="let task of tasks">
+                    <div class="card p-3">
+                        <div class="row">
+                            <div class="col-4">
                                 <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                                <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                                <h3 class="m-0" *ngIf="task.product"><a href="/product/{{this.appHelperService.extractId(task.product)}}">{{task.productName}}</a></h3>
+                                <p>Zugewiesen an: {{ task.assignedToName }}</p>
+                            </div>
+                            <div class="spt-border col-8">
                                 <span class="importance" [attr.data-importance]="task.prio"></span>
-                            </span>
-                        <h2 class="m-0">{{ task.headline }}</h2>
-                        <div class="pt-3 pe-5 position-relative">
-                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
-                            <p>Zugewiesen an: {{ task.assignedToName }}</p>
-                            <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                                <h2 class="m-0">{{ task.headline }}</h2>
+                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
+                                <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                                <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
+                                    <span *ngIf="task.taskNotes?.length !== 0" role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
+                                          (click)="showTaskNotes(task)">
+                                        <ng-container
+                                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                                        <ng-container
+                                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                                    </span>
+                                    <span role="button" class="badge bg-secondary p-2"
+                                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
-                    <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
-                        <div class="card-body">
-                            <div class="d-flex justify-content-between align-items-center">
-                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
-                                <p>{{ taskNote.ownerName }}</p>
+                    <div *ngIf="task.id && taskNotesVisibility.get(task.id)" class="pb-1">
+                        <div class="card spt-comments" *ngFor="let taskNote of task.taskNotes">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
+                                    <p>{{ taskNote.ownerName }}</p>
+                                </div>
+                                <div>
+                                    <p>{{ taskNote.message }}</p>
+                                </div>
+                                <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                             </div>
-                            <div>
-                                <p>{{ taskNote.message }}</p>
-                            </div>
-                            <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
                     </div>
                 </div>
-
-                <div class="d-flex justify-content-end mt-1">
-                        <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                              (click)="showTaskNotes(task)">
-                            <ng-container
-                                *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                            <ng-container
-                                *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                        </span>
-                    <span role="button" class="badge bg-secondary p-2"
-                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
-                </div>
             </div>
         </app-paging>
     </div>

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

@@ -3,10 +3,4 @@
     right: 0;
     top: 0;
   }
-  .due-date {
-
-  }
-  .importance {
-
-  }
 }

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

@@ -188,7 +188,7 @@ img {
     display: flex;
     justify-content: flex-end;
   }
-  .card:not(.contacts .card) {
+  .card:not(.contacts .card, .tasks .card) {
     border: none;
     border-radius: 0;
     border-top: 1px solid #2B3A44;
@@ -225,6 +225,35 @@ img {
   }
 }
 
+.tasks-box {
+  border-top: 1px solid #525f66;
+  padding-top: 3px;
+  background: #fff;
+}
+.tasks {
+  .card {
+    border: none;
+    border-radius: 0;
+    background: #fafafa;
+    .spt-border {
+      border-left: 1px solid #c1c1c1;
+    }
+  }
+  [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
+    right: 0;
+    top: 5px;
+    bottom: auto;
+  }
+}
+
+.spt-comments-box {
+  right: 0;
+  bottom: 0;
+}
+.spt-comments {
+  margin: 5px 0 0 200px;
+}
+
 .contacts {
   .row:not(.card .row) {
     border-top: 1px solid #2B3A44;
@@ -254,12 +283,12 @@ img {
 
 .importance {
   display: block;
-  width: 50vw;
+  width: 50%;
   max-width: 800px;
   height: 5px;
   position: absolute;
   right: 0;
-  top: -16px;
+  top: 0px;
 
   &[data-importance="low"] {
     background: #77bb33;
@@ -275,6 +304,10 @@ img {
 }
 
 .toggle-component {
+  .spt-container {
+    background: #fafafa;
+    margin-bottom: 20px;
+  }
   .top-btn {
     position: absolute;
     //right: 0;
@@ -342,46 +375,3 @@ img {
     }
   }
 }
-
-//.spt-toggle {
-//  position: relative;
-//  padding-left: 30px;
-//  &:before,
-//  &:after {
-//    content: "";
-//    position: absolute;
-//    top: 42px;
-//    width: 15px;
-//    height: 2px;
-//    background: #000;
-//    @include transition();
-//  }
-//
-//  &:before {
-//    transform: rotate(45deg);
-//    left: 0;
-//  }
-//
-//  &:after {
-//    transform: rotate(-45deg);
-//    left: 10px;
-//  }
-//
-//  &.collapsed {
-//    &:before {
-//      transform: rotate(-45deg);
-//    }
-//
-//    &:after {
-//      transform: rotate(45deg);
-//    }
-//  }
-//}
-//
-//.tasks {
-//  .collapse {
-//    div {
-//      padding-left: 30px;
-//    }
-//  }
-//}

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

@@ -13,6 +13,15 @@
   }
 }
 
+body {
+  .spt-btn-low {
+    background-color: #a7adb1 !important;
+    &:hover {
+      background-color: #75797c !important;
+    }
+  }
+}
+
 .btn-delete-user {
   width: 40px;
   text-align: center;
@@ -72,4 +81,8 @@
   background: #2b3b44 !important;
   font-weight: 400;
   text-transform: uppercase;
+  @include transition();
+  &:hover {
+    background: #556169 !important;
+  }
 }

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

@@ -29,6 +29,7 @@ th.mat-sort-header-sorted {
 }
 
 .mat-mdc-paginator {
+  background: transparent !important;
   border-top: 1px solid #2b3a44;
   .mat-mdc-paginator-container {
     display: flex;

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

@@ -77,7 +77,8 @@ table,
 p,
 ul,
 ol,
-dl {
+dl,
+.tasks h3 {
   a {
     color: $color-matsen;
     @include transition();