feat: improve split further and further

johannesjo · Nov 2, 2018 · 4b50856 · 4b50856
1 parent 0ee9339
commit 4b50856
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/src/app/pages/work-view/work-view-page.component.html b/src/app/pages/work-view/work-view-page.component.html
@@ -70,20 +70,23 @@ <h2 class="mat-h2">Completed Tasks</h2>
       </div>
     </div>
   </div>
-  <split [containerEl]="containerEl"
-         [splitPos]="isShowBacklog ? 50 : 100"
-         [splitEl1]="split1"
-         [splitEl2]="split2"
-         (onHide)="($event==='BOTTOM') ? isShowBacklog=false :isShowBacklog=true"></split>
+
   <div class="backlog"
        #split2>
-    <div class="component-wrapper page-wrapper">
-      <h2 class="mat-h2">Backlog ~{{estimateRemainingBacklog$|async|msToString}}</h2>
-      <task-list [tasks]="backlogTasks$|async"
-                 [focusIdList]="focusTaskIdList$|async"
-                 [filterArgs]="{'isDone':true}"></task-list>
+    <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>
 

diff --git a/src/app/pages/work-view/work-view-page.component.scss b/src/app/pages/work-view/work-view-page.component.scss
@@ -54,15 +54,27 @@
   position: absolute;
   left: 0;
   //transition: max-height, min-height 500ms ease-in-out;
-  overflow-y: scroll !important;
   //transition: all 500ms linear;
   width: 100%;
 }
 
+.today,
+.backlog .inner-wrapper {
+  overflow-y: scroll !important;
+}
+
 .today {
   top: 0;
 }
 
 .backlog {
   bottom: 0;
+  .inner-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
 }
+
diff --git a/src/app/ui/split/split.component.scss b/src/app/ui/split/split.component.scss
@@ -4,7 +4,7 @@
   z-index: 100;
   position: absolute;
   left: 0;
-  top: 50%;
+  top: 0;
   width: 100%;
   cursor: row-resize;
 
@@ -15,10 +15,11 @@
   .handle {
     position: absolute;
     width: 100%;
-    height: 4px;
+    height: 6px;
     top: -3px;
     display: block;
-    box-shadow: 0 -3px 12px 0 rgba(0, 0, 0, .3);
+    //box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .3);
+    box-shadow:  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 -3px 12px 0 rgba(0, 0, 0, .4);
   }
 
   button {

diff --git a/src/app/ui/split/split.component.ts b/src/app/ui/split/split.component.ts
@@ -1,4 +1,15 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -18,6 +29,9 @@ export class SplitComponent implements OnInit {
   subscription: Subscription;
   @ViewChild('buttonEl') buttonEl;
 
+  @HostBinding('class.is2Visible') get is2Visible() {
+    return this.pos !== 100;
+  }
 
   @Input() set splitPos(pos: number) {
     this._updatePos(pos);
@@ -98,11 +112,11 @@ export class SplitComponent implements OnInit {
         'height',
         `${100 - pos}%`,
       );
-      this._renderer.setStyle(
-        this._el.nativeElement,
-        'top',
-        `${pos}%`,
-      );
+      // this._renderer.setStyle(
+      //   this._el.nativeElement,
+      //   'top',
+      //   `${pos}%`,
+      // );
     }
   }
 }