Compare commits
2 commits
main
...
feature/co
Author | SHA1 | Date | |
---|---|---|---|
133cb396b8 | |||
df3606bd9d |
9 changed files with 57 additions and 7 deletions
|
@ -6,4 +6,5 @@
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<app-version></app-version>
|
<app-version></app-version>
|
||||||
|
<div class="contact">Wanna say something? <a href="mailto:manuel@fritteli.ch?subject=Contact%20via%20Convertorizr">Tell me!</a></div>
|
||||||
<!--<router-outlet></router-outlet>-->
|
<!--<router-outlet></router-outlet>-->
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
|
.contact {
|
||||||
|
font-size: small;
|
||||||
|
margin-right: 2em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.inputwrapper {
|
.inputwrapper {
|
||||||
font-family: "ABeeZee", sans-serif;
|
font-family: "ABeeZee", sans-serif;
|
||||||
margin: 0 1em 1em 1em;
|
margin: 0 1em 1em 1em;
|
||||||
|
|
|
@ -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
|
||||||
|
&& !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));
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
import {Converter} from './converter/converter';
|
import {Converter} from './converter/converter';
|
||||||
|
|
||||||
export class Step {
|
export class Step {
|
||||||
public content = '';
|
public content: string = '';
|
||||||
public selectedConverter: Converter | undefined;
|
public selectedConverter: Converter | undefined;
|
||||||
public index: number;
|
public index: number;
|
||||||
public error = false;
|
public error: boolean = false;
|
||||||
public message = '';
|
public collapsed: boolean = false;
|
||||||
|
public message: string = '';
|
||||||
|
|
||||||
constructor(index: number) {
|
constructor(index: number) {
|
||||||
this.index = index;
|
this.index = index;
|
||||||
|
|
|
@ -1,2 +1,4 @@
|
||||||
<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
|
<div [ngClass]="{arrow_box: !step.collapsed, collapsed: step.collapsed}">
|
||||||
[(ngModel)]="step.content">{{ step.content }}</textarea>
|
<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;
|
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;
|
||||||
|
|
|
@ -3,13 +3,14 @@ import {Step} from '../step';
|
||||||
import {Converter} from '../converter/converter';
|
import {Converter} from '../converter/converter';
|
||||||
import {InputComponentManagerService} from '../input-component-manager.service';
|
import {InputComponentManagerService} from '../input-component-manager.service';
|
||||||
import {FormsModule} from '@angular/forms';
|
import {FormsModule} from '@angular/forms';
|
||||||
|
import {NgClass} from '@angular/common';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-text-input-field',
|
selector: 'app-text-input-field',
|
||||||
templateUrl: './text-input-field.component.html',
|
templateUrl: './text-input-field.component.html',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
styleUrls: ['./text-input-field.component.scss'],
|
styleUrls: ['./text-input-field.component.scss'],
|
||||||
imports: [FormsModule]
|
imports: [FormsModule, NgClass]
|
||||||
})
|
})
|
||||||
export class TextInputFieldComponent {
|
export class TextInputFieldComponent {
|
||||||
@Input()
|
@Input()
|
||||||
|
|
|
@ -18,6 +18,16 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fc0;
|
||||||
|
transition: all ease-in-out 200ms;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #222;
|
||||||
|
background-color: #fc0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
|
|
Loading…
Reference in a new issue