TSK-1547: Rework task-list-toolbar component with Angular Material

web/src/app/shared/components/sort/sort.component.html

@@ -1,5 +1,5 @@
 <div class="sort">
-  <button class="sort__button" mat-stroked-button [matMenuTriggerFor]="sortMenu" matTooltip="Sort workbaskets">
+  <button class="sort__button" mat-stroked-button [matMenuTriggerFor]="sortMenu" matTooltip="Modify sorting order">
     <mat-icon>sort</mat-icon>
 
     <mat-menu #sortMenu="matMenu" >

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html

@@ -1,19 +1,23 @@
-<li id="task-list-action-toolbar" class="list-group-item tab-align">
+<div class="task-list-toolbar">
-  <div class="row">
+
-    <div *ngIf="searched" class="col-xs-2">
+  <!-- SEARCH INPUT -->
-      <button (click)="createTask()" type="button" class="btn btn-default pull-left green-blue"  data-toggle="tooltip" title="Add Task to current Workbasket">
+  <div class="task-list-toolbar__search">
-        <span class="material-icons md-20 green-blue">add_circle_outline</span>
+
-      </button>
+    <div class="task-list-toolbar__filter">
-    </div>
+
+      <!-- BUTTON TO FURTHER FILTER OPTIONS -->
+      <button mat-stroked-button style="margin-right: 8px; min-width: 1%" class="task-list-toolbar__button--secondary" matTooltip="Display more filter options" (click)="toolbarState=!toolbarState">
+        <mat-icon *ngIf="!toolbarState">keyboard_arrow_down</mat-icon>
+        <mat-icon *ngIf="toolbarState">keyboard_arrow_up</mat-icon>
+      </button>
 
-    <!-- SEARCH INPUT -->
-    <div [ngClass]="{'col-xs-8': !searched, 'col-xs-5': searched}">
 
       <!-- SEARCH FOR WORKBASKET -->
-      <mat-form-field *ngIf="searchSelected === search.byWorkbasket" class="task-list-toolbar__search-workbasket">
+      <mat-form-field *ngIf="searchSelected === search.byWorkbasket" class="task-list-toolbar__filter--workbasket">
+        <mat-label>Search for Workbasket</mat-label>
         <input matInput
                type="text"
-               placeholder="Search for workbasket ..."
+               placeholder="Workbasket"
                [(ngModel)]="resultName"
                (ngModelChange)="filterWorkbasketNames()"
                [matAutocomplete]="auto">
@@ -24,62 +28,85 @@
         </mat-autocomplete>
       </mat-form-field>
 
-      <!-- SEARCH FOR TYPE AND VALUE-->
-      <div class="input-group" *ngIf="searchSelected === search.byTypeAndValue">
-        <input [(ngModel)]="resultType" class="form-control" (keyup.enter)="searchBasket()" placeholder="Search by type ..." />
-        <span _ngcontent-c10="" class="input-group-btn">
-          <button _ngcontent-c10="" class="btn btn-primary" type="button" (click)="searchBasket()">
-            <span class="material-icons md-20 white">search</span>
-          </button>
-        </span>
-      </div>
-      <input [(ngModel)]="resultValue" *ngIf="searchSelected === search.byTypeAndValue" class="form-control" (keyup.enter)="searchBasket()"
-        placeholder="Search by value ..." />
-    </div>
 
 
-    <div *ngIf="searched" class="pull-right margin-right btn-group">
+      <!-- SEARCH BY TYPE AND VALUE-->
-      <taskana-shared-sort class="btn-group" [sortingFields]="sortingFields" [defaultSortBy]="taskDefaultSortBy"
+      <div class="task-list-toolbar__filter--type-value" *ngIf="searchSelected === search.byTypeAndValue">
-                           (performSorting)="sorting($event)"> </taskana-shared-sort>
+
-      <button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState">
+        <!-- SEARCH BY TYPE -->
-        <span class="material-icons md-20 blue">search</span>
+        <mat-form-field style="padding-right: 8px">
-      </button>
+          <mat-label>Type</mat-label>
-    </div>
+          <input matInput type="text" placeholder="Type" [(ngModel)]="resultType" (keyup.enter)="searchBasket()">
-      <div class="dropdown clearfix pull-right margin-right">
+        </mat-form-field>
-        <button type="button" class="btn btn-default dropdown-button" [ngClass]="{'reduced-width': searched}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="{{searchSelected == search.byTypeAndValue ? 'Type and value' : 'Workbasket'}}">
+
-          <svg-icon *ngIf="searchSelected == search.byWorkbasket" class="blue small" src="./assets/icons/wb-empty.svg"></svg-icon>
+        <!-- SEARCH BY VALUE-->
-          <span *ngIf="searchSelected == search.byTypeAndValue" class="material-icons md-20 blue">title</span>
+        <mat-form-field style="padding-right: 8px">
-          <span class="caret"></span>
+          <mat-label>Value</mat-label>
+          <input matInput type="text" placeholder="Value" [(ngModel)]="resultValue" (keyup.enter)="searchBasket()">
+        </mat-form-field>
+
+        <!-- SEARCH BUTTON -->
+        <button class="task-list-toolbar__button--primary" style="top: 11px; min-width: 1%"
+                mat-flat-button matTooltip="Search by given type and value" (click)="searchBasket()">
+          <mat-icon class="md-20">search</mat-icon>
         </button>
-        <div class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu">
-          <div class="dropdown">
-            <h5 class="bold-blue align-center">Search by</h5>
-          </div>
-          <div role="separator" class="divider"></div>
-          <ul>
-            <li data-toggle="tooltip" title="Workbasket">
-              <a class="dropdown-item" (click)="selectSearch(search.byWorkbasket)">
-                <label>
-                  <span class="material-icons md-20 blue margin-right" aria-hidden="true">{{ searchSelected === search.byWorkbasket ? 'check_box': 'check_box_outline_blank' }}</span>
-                  <svg-icon class="margin-right small" src="./assets/icons/wb-empty.svg"></svg-icon>
-                  <small class="margin-right blue-font">Workbasket</small>
-                </label>
-              </a>
-            </li>
-          <li data-toggle="tooltip" title="Type and value">
-            <a class="dropdown-item" (click)="selectSearch(search.byTypeAndValue)">
-              <label>
-                <span class="material-icons md-20 blue" aria-hidden="true">{{ searchSelected === search.byTypeAndValue ? 'check_box': 'check_box_outline_blank' }}</span>
-                <span class="material-icons md-20 blue">title</span>
-                <small class="blue-font">Type and value</small>
-              </label>
-            </a>
-          </li>
-        </ul>
       </div>
     </div>
+
+
+
+    <!-- SELECT WHETHER TO SEARCH BY WORKBASKET OR BY TYPE / VALUE -->
+    <div class="task-list-toolbar__select-search">
+      <button mat-stroked-button class="task-list-toolbar__button--secondary" [matMenuTriggerFor]="menu" matTooltip="Select search">
+        Search by
+        <svg-icon *ngIf="searchSelected==='workbasket'" style="top: -10px; margin: 0 4px" class="task-list-toolbar__workbasket-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
+        <mat-icon *ngIf="searchSelected==='type-and-value'" style="fill: #555" class="">title</mat-icon>
+      </button>
+
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="selectSearch(search.byWorkbasket)">
+          <span>
+            <svg-icon style="left: 4px; margin-right: 20px" class="task-list-toolbar__workbasket-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
+            Workbasket
+          </span>
+        </button>
+        <button mat-menu-item (click)="selectSearch(search.byTypeAndValue)">
+          <span>
+            <mat-icon style="color: #555" class="">title</mat-icon>
+            Type and Value
+          </span>
+        </button>
+      </mat-menu>
+    </div>
   </div>
-  <div [@toggleDown]="toolbarState" class="row no-overflow">
+
+
+
+
+  <!-- FURTHER FILTER OPTIONS -->
+  <div *ngIf="toolbarState">
     <taskana-shared-task-filter (performFilter)="filtering($event)"></taskana-shared-task-filter>
   </div>
-</li>
+
+
+
+  <!-- ADDITIONAL MENU WHEN TASK LIST IS DISPLAYED -->
+  <div *ngIf="searched" class="task-list-toolbar__additional-toolbar">
+
+    <!-- ADD TASK BUTTON -->
+    <button class="task-list-toolbar__button--primary"
+            mat-flat-button matTooltip="Add Task" (click)="createTask()">
+      Add
+      <mat-icon class="md-20">add</mat-icon>
+    </button>
+
+
+    <!-- SORT TASKS BUTTON -->
+      <taskana-shared-sort
+        [sortingFields]="sortingFields" [defaultSortBy]="taskDefaultSortBy" (performSorting)="sorting($event)">
+      </taskana-shared-sort>
+
+  </div>
+
+</div>
+

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss

@@ -1,68 +1,50 @@
-@import '../../../../theme/colors';
+@import 'src/theme/_colors.scss';
 
-.task-list-toolbar__search-workbasket {
+.task-list-toolbar {
-  margin-left: 16px;
+  padding: 4px 16px 16px 16px;
-}
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 
-.list-group-item {
+  &__search {
-  padding: 5px 0px 2px 1px;
+    display: flex;
-  border: none;
+    justify-content: space-between;
-}
+    height: 54px;
-
-.tab-align {
-  padding: 8px 12px 8px 0px;
-  margin-bottom: 0px;
-
-  & > div {
-    margin: 6px 0px;
   }
-}
 
-ul {
+  &__filter {
-  list-style-type: none;
+    display: flex;
-}
-
-.blue-font {
-  color: $blue;
-}
-
-.bold-blue {
-  font-weight: bold;
-  color: $blue;
-}
-
-svg-icon {
-  fill: $blue;
-}
-
-svg-icon.blue {
-  fill: $blue;
-}
-
-@media screen and (min-width: 991px) and (max-width: 1115px) {
-  .reduced-width {
-    width: 37px;
-    padding-left: 5px;
-    padding-right: 5px;
   }
+
+  &__filter--type-value {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__button--primary {
+    background-color: $aquamarine;
+    color: white;
+    height: 36px;
+    margin-right: 4px;
+  }
+
+  &__button--secondary {
+    height: 36px;
+    top: 12px;
+    color: #555;
+  }
+
+  &__workbasket-icon {
+    width: 16px;
+    height: 16px;
+    fill: #555;
+  }
+
+  &__additional-toolbar {
+    display: flex;
+    margin-top: 12px;
+  }
+
 }
 
-small.margin-right.blue-font {
+::ng-deep .task-list-toolbar__filter--type-value .mat-form-field-wrapper {
-  margin-left: 4px;
+  width: 100px;
-}
-
-div.dropdown-menu ul {
-  padding: 15px;
-}
-
-div.input-group {
-  margin-bottom: 1px;
-}
-
-button.btn.btn-primary {
-  height: 34px;
-}
-
-#task-list-action-toolbar svg-icon.blue {
-  position: initial;
 }

web/src/app/workplace/components/task-list/task-list.component.html

@@ -32,7 +32,7 @@
 
 <!-- EMPTY TASK-LIST -->
 <ng-template #empty_list>
-  <div class="container-no-items center-block">
+  <div style="margin-top: 60px" class="container-no-items center-block">
     <h3 class="grey">Select a workbasket</h3>
     <svg-icon class="img-responsive empty-icon workbasket-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
   </div>

web/src/app/workplace/components/task-master/task-master.component.ts

@@ -128,7 +128,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
     if (this.toolbarElement) {
       const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
       const cardHeight = 90;
-      const unusedHeight = 150;
+      const unusedHeight = 180;
       const totalHeight = window.innerHeight;
       const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);
       this.paging['page-size'] = cards > 0 ? cards : 1;

web/src/app/workplace/workplace.module.ts

@@ -29,6 +29,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatMenuModule } from '@angular/material/menu';
 
 const MODULES = [
   TypeaheadModule.forRoot(),
@@ -60,7 +64,16 @@ const DECLARATIONS = [
 
 @NgModule({
   declarations: DECLARATIONS,
-  imports: [MODULES, MatListModule, MatBadgeModule, MatTooltipModule],
+  imports: [
+    MODULES,
+    MatListModule,
+    MatBadgeModule,
+    MatTooltipModule,
+    MatIconModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatMenuModule
+  ],
   providers: [
     TaskService,
     ClassificationCategoriesService,