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 { convert($event: any): void {
this.step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id); this.step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
this.textInput.update(this.step); this.textInput.update(this.step);
this.updateStepCollapsedState();
} }
ngOnInit() { ngOnInit() {
this.converters = this.converterRegistryService.getAllConverters(); 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]; 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 { private addComponent(): void {
this.register(new Step(this.components.length)); this.register(new Step(this.components.length));
} }

View file

@ -5,6 +5,7 @@ export class Step {
public selectedConverter: Converter | undefined; public selectedConverter: Converter | undefined;
public index: number; public index: number;
public error = false; public error = false;
public collapsed: boolean = undefined;
public message = ''; public message = '';
constructor(index: number) { 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}">
[(ngModel)]="step.content">{{ step.content }}</textarea> <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; border: 1px solid #888;
display: block; display: block;
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 0 1em 0 0; padding: 0 1em 0 0;
&.collapsed {
margin-bottom: 0;
}
}
.arrow_box {
position: relative; position: relative;
transition: border ease-in-out 200ms; 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; transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
width: 100%; width: 100%;
.collapsed & {
height: 1.5em;
padding: 0;
color: #888;
text-align: center;
transition: all ease-in-out 200ms;
}
&:focus, &:hover { &:focus, &:hover {
background-color: #333; background-color: #333;
border-color: #bbb; border-color: #bbb;