From df3606bd9d6c10bff85956df3860ac12e08530d3 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sat, 8 Sep 2018 03:41:46 +0200
Subject: [PATCH] First experiments with collapsed intermediate steps

---
 .../converter-selector.component.ts              | 10 ++++++++++
 src/app/input-component-manager.service.ts       |  5 +++++
 src/app/step.ts                                  |  1 +
 .../text-input-field.component.html              |  6 ++++--
 .../text-input-field.component.scss              | 16 +++++++++++++++-
 5 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/app/converter-selector/converter-selector.component.ts b/src/app/converter-selector/converter-selector.component.ts
index 877981f..e956d98 100644
--- a/src/app/converter-selector/converter-selector.component.ts
+++ b/src/app/converter-selector/converter-selector.component.ts
@@ -25,9 +25,19 @@ export class ConverterSelectorComponent implements OnInit {
   convert($event: any): void {
     this.step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
     this.textInput.update(this.step);
+    this.updateStepCollapsedState();
   }
 
   ngOnInit() {
     this.converters = this.converterRegistryService.getAllConverters();
   }
+
+  private updateStepCollapsedState(): void {
+    if (this.step.selectedConverter !== undefined
+      && this.step.index > 0
+      && this.step.collapsed === undefined
+      && !this.step.error) {
+      this.step.collapsed = true;
+    }
+  }
 }
diff --git a/src/app/input-component-manager.service.ts b/src/app/input-component-manager.service.ts
index 5e6cc14..23bf4d8 100644
--- a/src/app/input-component-manager.service.ts
+++ b/src/app/input-component-manager.service.ts
@@ -36,6 +36,11 @@ export class InputComponentManagerService {
     return this.components[0];
   }
 
+  public isIntermediate(step: Step): boolean {
+    const index = this.components.indexOf(step);
+    return index > 0 && index < this.components.length - 1;
+  }
+
   private addComponent(): void {
     this.register(new Step(this.components.length));
   }
diff --git a/src/app/step.ts b/src/app/step.ts
index 81a7e78..1d17123 100644
--- a/src/app/step.ts
+++ b/src/app/step.ts
@@ -5,6 +5,7 @@ export class Step {
   public selectedConverter: Converter | undefined;
   public index: number;
   public error = false;
+  public collapsed: boolean = undefined;
   public message = '';
 
   constructor(index: number) {
diff --git a/src/app/text-input-field/text-input-field.component.html b/src/app/text-input-field/text-input-field.component.html
index 4f6f3ec..323571c 100644
--- a/src/app/text-input-field/text-input-field.component.html
+++ b/src/app/text-input-field/text-input-field.component.html
@@ -1,2 +1,4 @@
-<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
-          [(ngModel)]="step.content">{{ step.content }}</textarea>
+<div [ngClass]="{arrow_box: !step.collapsed, collapsed: step.collapsed}">
+    <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
+              [(ngModel)]="step.content">{{step.content}}</textarea>
+</div>
diff --git a/src/app/text-input-field/text-input-field.component.scss b/src/app/text-input-field/text-input-field.component.scss
index a026e44..1de1531 100644
--- a/src/app/text-input-field/text-input-field.component.scss
+++ b/src/app/text-input-field/text-input-field.component.scss
@@ -1,8 +1,14 @@
-:host {
+div {
   border: 1px solid #888;
   display: block;
   margin: 0 0 1em 0;
   padding: 0 1em 0 0;
+  &.collapsed {
+    margin-bottom: 0;
+  }
+}
+
+.arrow_box {
   position: relative;
   transition: border ease-in-out 200ms;
 
@@ -57,6 +63,14 @@ textarea {
   transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
   width: 100%;
 
+  .collapsed & {
+    height: 1.5em;
+    padding: 0;
+    color: #888;
+    text-align: center;
+    transition: all ease-in-out 200ms;
+  }
+
   &:focus, &:hover {
     background-color: #333;
     border-color: #bbb;