Compare commits
2 commits
main
...
feature/co
Author | SHA1 | Date | |
---|---|---|---|
133cb396b8 | |||
df3606bd9d |
6 changed files with 37 additions and 4 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in a new issue