work-view-page.component.html

<div class="wrapper"
     #containerEl
     style="overflow:hidden;height:100%; width: 100%; position: absolute; top: 0; left: 0;">
  <div class="today"
       #split1>

    <header class="work-view-header bg-900">
      <div class="status-bar">
        <div class="item"><span class="label">Working today:</span>
          <span class="no-wrap">
      <strong>{{workingToday$|async|msToString}}</strong>
      <mat-icon aria-label="timer icon">timer</mat-icon>
      </span>
        </div>

        <div class="item">
          <span class="label">Estimate remaining:</span>
          <span class="no-wrap">
      ~<strong>{{estimateRemaining$|async|msToString}}</strong>
      <mat-icon>timer</mat-icon>
      </span>
        </div>

        <div class="item"
             *ngIf="isShowTimeWorkedWithoutBreak">
          <span class="label">Without break: </span>
          <span class="no-wrap">
        <strong>{{workedWithoutABreak}}</strong><mat-icon>timer</mat-icon>
      </span>
        </div>
        <button mat-mini-fab
                color="primary"
                (click)="isHideControls = !(isHideControls);"
                aria-label="collapse sub tasks and notes">
          <mat-icon class="hide-controls-icon">vertical_align_center</mat-icon>
        </button>
        <button mat-mini-fab
                color="primary"
                (click)="collapseAllNotesAndSubTasks()"
                aria-label="collapse sub tasks and notes">
          <mat-icon>vertical_align_center</mat-icon>
        </button>
      </div>
    </header>
    <button (click)="isShowBacklog=!isShowBacklog">XXXXX {{isShowBacklog}}</button>

    <div class="component-wrapper page-wrapper">
      <task-list [tasks]="undoneTasks$|async"
                 [focusIdList]="focusTaskIdList$|async"
                 [filterArgs]="{'isDone':false}"></task-list>
      <button (click)="isShowBacklog=!isShowBacklog">Show {{isShowBacklog}}</button>
      <button (click)="isVertical=!isVertical">Vertical {{isVertical}}</button>

      <!--<div *ngIf="!isShowBacklog"-->
      <div
        [@expandFade]>
        <div class="button-controls">
          <button routerLink="/daily-summary"
                  mat-raised-button=""
                  color="primary">
            <mat-icon>done_all</mat-icon>
            Finish working
          </button>
        </div>

        <h2 class="mat-h2">Completed Tasks</h2>
        <task-list [tasks]="doneTasks$|async"
                   [focusIdList]="focusTaskIdList$|async"
                   [filterArgs]="{'isDone':true}"></task-list>
      </div>
    </div>
  </div>

  <div class="backlog"
       #split2>
    <split [containerEl]="containerEl"
           [splitPos]="isShowBacklog ? 50 : 100"
           [splitEl1]="split1"
           [splitEl2]="split2"
           (onHide)="($event==='BOTTOM') ? isShowBacklog=false :isShowBacklog=true"></split>
    <div class="inner-wrapper">
      <div class="component-wrapper page-wrapper">
        <h2 class="mat-h2"
            style="text-align: center; margin-top: 20px;">Backlog ~{{estimateRemainingBacklog$|async|msToString}}</h2>
        <task-list [tasks]="backlogTasks$|async"
                   [focusIdList]="focusTaskIdList$|async"
                   [filterArgs]="{'isDone':true}"></task-list>
      </div>
    </div>
  </div>
</div>