Compare commits

..

2 commits

Author SHA1 Message Date
133cb396b8
Add contact email link.
All checks were successful
continuous-integration/drone/push Build is passing
2024-01-28 21:16:48 +01:00
df3606bd9d
First experiments with collapsed intermediate steps 2024-01-28 04:51:53 +01:00
6 changed files with 37 additions and 4 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
&& !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: boolean = false;
public collapsed: boolean = false;
public message: string = '';
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;

View file

@ -3,13 +3,14 @@ import {Step} from '../step';
import {Converter} from '../converter/converter';
import {InputComponentManagerService} from '../input-component-manager.service';
import {FormsModule} from '@angular/forms';
import {NgClass} from '@angular/common';
@Component({
selector: 'app-text-input-field',
templateUrl: './text-input-field.component.html',
standalone: true,
styleUrls: ['./text-input-field.component.scss'],
imports: [FormsModule]
imports: [FormsModule, NgClass]
})
export class TextInputFieldComponent {
@Input()