diff src/app/actions/action-tray.component.ts @ 423:4387175f594b

Basic action tray for feature analysis. WIP, bit buggy wrt scrolling and not dismissed automatically when extractor selected.

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/actions/action-tray.component.ts	Tue Jun 06 18:11:30 2017 +0100
@@ -0,0 +1,57 @@
+/**
+ * Created by lucast on 06/06/2017.
+ */
+import {Component, Input} from '@angular/core';
+import {
+  animate, keyframes, state, style, transition,
+  trigger
+} from '@angular/animations';
+
+@Component({
+  selector: 'ugly-action-tray',
+  template: `<div
+    class="tray"
+    [@visibility]="visibility"
+  ><ng-content></ng-content></div>`,
+  styles: [
+    `.tray {
+      background: white;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      z-index: 100;
+      overflow-y: hidden;
+    }`
+  ],
+  animations: [
+    trigger('visibility', [
+      state('show', style({
+        height: '100%',
+        'overflow-y': 'scroll'
+      })),
+      state('hide', style({
+        height: 0,
+        'overflow-y': 'hidden',
+      })),
+      transition('hide => show', [
+        animate(300, keyframes([
+          style({height: 0, offset: 0}),
+          style({height: '100%',  offset: 1.0}),
+        ]))
+      ]),
+      transition('show => hide', [
+        animate(300, keyframes([
+          style({height: '100%', offset: 0.0}),
+          style({height: 0, offset: 1.0}),
+        ]))
+      ]),
+    ])
+  ]
+})
+export class ActionTrayComponent {
+  @Input() visibility: 'show' | 'hide' = 'hide';
+
+  toggle() {
+    this.visibility = this.visibility === 'show' ? 'hide' : 'show';
+  }
+}