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 @@ - +
+ +
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;