Initial styling with open todos. (#288)

src/app/base-components/base-components.component.html

@@ -99,7 +99,12 @@ <h2>Buttons - Text only</h2>
  </design-button-text>
 </div>
 <div class="componentContainer">
- <design-text-input>
+ <h2>Input fields</h2>
+ <design-text-input
+ [label]="'Label'"
+ [placeholder]="'Platzhalter'"
+ [hintText]="'Das ist der Tipp.'"
+ (keydown.enter)="changedText($event)">
  </design-text-input>
 </div>
 </div>

src/app/base-components/base-components.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
  selector: 'app-base-components',
@@ -7,9 +7,12 @@ import { Component } from '@angular/core';
 })
 export class BaseComponentsComponent {
 
- constructor() { }
-
  pressedAlert(name: string) {
  alert(name + " was pressed!");
  }
+
+ changedText(event: any) {
+ console.log(event)
+ alert("Text changed! Text: " + event.target.value);
+ }
 }

src/core/components/inputs/text-input/text-input.component.html

@@ -1 +1,8 @@
-<input type="text" placeholder="test" (change)="onChange.emit()">
+<span>
+<label for="inputElement">{{label}}</label>
+<input id="inputElement" type="text"
+ [placeholder]="placeholder"
+ (keydown.enter)="onEnter.emit()">
+ <small class="hint">{{hintText}}</small>
+</span>
+

src/core/components/inputs/text-input/text-input.component.scss

@@ -1,5 +1,44 @@
 @import "src/global-styles/_theme-colors.scss";
 
 input {
- border: $primary-default
+ width: auto; //TODO @Marcel. Richte das bitte mal anständig aus. Dankee :)
+ min-width: 95%;
+ // Die beiden margins sind iwie kacke. Sollten nicht nötig sein.
+ margin-top: 2px;
+ margin-bottom: 1px;
+
+ font-size: 20px;
+
+ background-color: $input-background;
+ color: $light-font;
+ padding: 8px 16px 8px 16px;
+ border: 0;
+ border-radius: 8px;
+
+ &:focus {
+ accent-color: $primary-default;
+ }
+
+ &::placeholder {
+ color: $placeholder-font
+ }
+}
+
+.hint {
+ font-size: 16px;
+ display: block;
+ color: $grey-font;
 }
+
+label {
+ font-size: 20px;
+ font-weight: bold; //Durch Jost medium ersetzen.
+ color: $light-font;
+}
+
+span {
+ vertical-align: top;
+ display: inline-block;
+}
+
+

src/core/components/inputs/text-input/text-input.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
  selector: 'design-text-input',
@@ -7,6 +7,10 @@ import {Component, EventEmitter, Output} from '@angular/core';
 })
 export class TextInputComponent {
 
+ @Input() placeholder: string = "Placeholder";
+ @Input() hintText: string = "This is a small hint.";
+ @Input() label: string = "Label";
+
  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
- @Output() public onChange = new EventEmitter<InputEvent>();
+ @Output() public onEnter = new EventEmitter<InputEvent>();
 }