First experiments with collapsed intermediate steps
This commit is contained in:
parent
9ef4e9443e
commit
df3606bd9d
5 changed files with 35 additions and 3 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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));
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
[(ngModel)]="step.content">{{step.content}}</textarea>
|
||||||
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue