diff --git a/src/app/app.component.html b/src/app/app.component.html index 99e094c..86f1dc6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,4 +6,5 @@ } +
Wanna say something? Tell me!
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 63be152..afc898e 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,3 +1,9 @@ +.contact { + font-size: small; + margin-right: 2em; + text-align: right; +} + .inputwrapper { font-family: "ABeeZee", sans-serif; margin: 0 1em 1em 1em; diff --git a/src/app/converter-selector/converter-selector.component.ts b/src/app/converter-selector/converter-selector.component.ts index 877981f..7f8589b 100644 --- a/src/app/converter-selector/converter-selector.component.ts +++ b/src/app/converter-selector/converter-selector.component.ts @@ -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; + } + } } diff --git a/src/app/input-component-manager.service.ts b/src/app/input-component-manager.service.ts index 5e6cc14..23bf4d8 100644 --- a/src/app/input-component-manager.service.ts +++ b/src/app/input-component-manager.service.ts @@ -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)); } diff --git a/src/app/step.ts b/src/app/step.ts index 81a7e78..ab7b2aa 100644 --- a/src/app/step.ts +++ b/src/app/step.ts @@ -1,11 +1,12 @@ import {Converter} from './converter/converter'; export class Step { - public content = ''; + public content: string = ''; public selectedConverter: Converter | undefined; public index: number; - public error = false; - public message = ''; + public error: boolean = false; + public collapsed: boolean = false; + public message: string = ''; constructor(index: number) { this.index = index; diff --git a/src/app/text-input-field/text-input-field.component.html b/src/app/text-input-field/text-input-field.component.html index 4f6f3ec..323571c 100644 --- a/src/app/text-input-field/text-input-field.component.html +++ b/src/app/text-input-field/text-input-field.component.html @@ -1,2 +1,4 @@ - +
+ +
diff --git a/src/app/text-input-field/text-input-field.component.scss b/src/app/text-input-field/text-input-field.component.scss index a026e44..1de1531 100644 --- a/src/app/text-input-field/text-input-field.component.scss +++ b/src/app/text-input-field/text-input-field.component.scss @@ -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; diff --git a/src/app/text-input-field/text-input-field.component.ts b/src/app/text-input-field/text-input-field.component.ts index ab91a73..977742d 100644 --- a/src/app/text-input-field/text-input-field.component.ts +++ b/src/app/text-input-field/text-input-field.component.ts @@ -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() diff --git a/src/styles.scss b/src/styles.scss index a24f0f1..47cb31a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -18,6 +18,16 @@ font-style: normal; } +a { + color: #fc0; + transition: all ease-in-out 200ms; + + &:hover { + color: #222; + background-color: #fc0; + } +} + body { background-color: #222; color: #eee;