First experiments with collapsed intermediate steps

This commit is contained in:
Manuel Friedli 2018-09-08 03:41:46 +02:00
parent 9ef4e9443e
commit df3606bd9d
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
5 changed files with 35 additions and 3 deletions

View file

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

View file

@ -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));
}

View file

@ -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) {

View file

@ -1,2 +1,4 @@
<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
<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>

View file

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