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 @@
}
+
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;