From 36a546ff8df7edba74900e59bbd338b7c6e271b7 Mon Sep 17 00:00:00 2001
From: Tim Robin Schweizer <tim.schweizer@mni.thm.de>
Date: Tue, 17 Sep 2019 06:57:44 +0200
Subject: [PATCH] Refactor placeholder for textarea in room-edit component and
fix indentation of create-comment component
---
.../moderators/moderators.component.html | 3 ++-
.../room-edit/room-edit.component.html | 5 +++--
.../password-reset.component.html | 22 +++++++++++--------
.../_dialogs/register/register.component.html | 12 ++++++----
.../user-activation.component.html | 3 ++-
.../moderator-comment-list.component.html | 5 +++--
.../create-comment.component.html | 4 ++--
.../room-create/room-create.component.html | 3 ++-
.../comment-list/comment-list.component.html | 3 ++-
.../shared/login/login.component.html | 8 +++----
.../shared/room-list/room-list.component.html | 5 +++--
src/styles.scss | 4 ++++
12 files changed, 48 insertions(+), 29 deletions(-)
diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.html b/src/app/components/creator/_dialogs/moderators/moderators.component.html
index 7f88080f8..ba3c76d73 100644
--- a/src/app/components/creator/_dialogs/moderators/moderators.component.html
+++ b/src/app/components/creator/_dialogs/moderators/moderators.component.html
@@ -4,8 +4,9 @@
<div fxLayout="row">
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="email" #loginId placeholder="{{ 'room-page.moderator-email' | translate }}" aria-labelledby="moderator-email"
+ matInput type="email" #loginId aria-labelledby="moderator-email"
[formControl]="usernameFormControl" name="username"/>
+ <mat-placeholder class="placeholder">{{ 'room-page.moderator-email' | translate }}</mat-placeholder>
<mat-error *ngIf="usernameFormControl.hasError('email')">
{{ 'room-page.email-error' | translate }}
</mat-error>
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
index a856ec082..5899b940c 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
@@ -4,8 +4,9 @@
<div fxLayout="column">
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- [(ngModel)]="editRoom.name" matInput placeholder="{{ 'session.session-name' | translate }}"
+ [(ngModel)]="editRoom.name" matInput
name="room-name" maxlength="20" aria-labelledby="room-name"/>
+ <mat-placeholder class="placeholder">{{ 'session.session-name' | translate }}</mat-placeholder>
<mat-hint align="end"><span aria-hidden="true">{{ editRoom.name.length }} / 20</span></mat-hint>
</mat-form-field>
<mat-form-field class="input-block">
@@ -17,10 +18,10 @@
matAutosizeMinRows="2"
matAutosizeMaxRows="5"
maxlength="255"
- placeholder="{{ 'session.description' | translate }}"
name="description"
aria-labelledby="description"
></textarea>
+ <mat-placeholder class="placeholder">{{ 'session.description' | translate }}</mat-placeholder>
<mat-hint align="end"><span aria-hidden="true">{{ editRoom.description ? editRoom.description.length : 0 }} / 255</span></mat-hint>
</mat-form-field>
<div fxLayoutAlign="center center">
diff --git a/src/app/components/home/_dialogs/password-reset/password-reset.component.html b/src/app/components/home/_dialogs/password-reset/password-reset.component.html
index 345a6d33c..0aca3fefe 100644
--- a/src/app/components/home/_dialogs/password-reset/password-reset.component.html
+++ b/src/app/components/home/_dialogs/password-reset/password-reset.component.html
@@ -6,9 +6,10 @@
fxLayoutGap="10px">
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="email" #email placeholder="{{ 'password-reset.email' | translate }}"
+ matInput type="email" #email
[formControl]="usernameFormControl" aria-labelledby="password-reset-description"
[errorStateMatcher]="matcher" name="email"/>
+ <mat-placeholder class="placeholder">{{ 'password-reset.email' | translate }}</mat-placeholder>
<mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">
{{ 'password-reset.email-invalid' | translate }}
</mat-error>
@@ -27,16 +28,18 @@
<form (ngSubmit)="setNewPassword(email2.value, key.value, password1.value)" fxLayout="column" fxLayoutAlign="space-around"
fxLayoutGap="10px">
<mat-form-field class="input-block">
- <input matInput type="email" #email2 placeholder="{{ 'password-reset.email' | translate }}"
- [formControl]="usernameFormControl2" [errorStateMatcher]="matcher" name="email"/>
+ <input matInput type="email" #email2 [formControl]="usernameFormControl2"
+ [errorStateMatcher]="matcher" name="email"/>
+ <mat-placeholder class="placeholder">{{ 'password-reset.email' | translate }}</mat-placeholder>
<mat-error *ngIf="usernameFormControl2.hasError('email') && !usernameFormControl2.hasError('required')">
{{ 'password-reset.email-invalid' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="password" #password1 placeholder="{{ 'register.password' | translate }}"
- [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
+ matInput type="password" #password1 [formControl]="passwordFormControl"
+ [errorStateMatcher]="matcher"/>
+ <mat-placeholder class="placeholder">{{ 'register.password' | translate }}</mat-placeholder>
<mat-error *ngIf="passwordFormControl.hasError('required')">
{{ 'register.password-required' | translate }}
</mat-error>
@@ -44,8 +47,9 @@
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="password" #password2 placeholder="{{ 'register.password-verify' | translate}}"
- [formControl]="passwordFormControl2" [errorStateMatcher]="matcher">
+ matInput type="password" #password2 [formControl]="passwordFormControl2"
+ [errorStateMatcher]="matcher"/>
+ <mat-placeholder class="placeholder">{{ 'register.password-verify' | translate }}</mat-placeholder>
<mat-error *ngIf="passwordFormControl2.hasError('required')">
{{ 'register.password-required' | translate }}
</mat-error>
@@ -55,8 +59,8 @@
</mat-form-field>
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="text" #key placeholder="{{ 'password-reset.key' | translate}}"
- [formControl]="keyFormControl" [errorStateMatcher]="matcher">
+ matInput type="text" #key [formControl]="keyFormControl" [errorStateMatcher]="matcher"/>
+ <mat-placeholder class="placeholder">{{ 'password-reset.key' | translate }}</mat-placeholder>
<mat-error *ngIf="keyFormControl.hasError('required')">
{{ 'password-reset.key-required' | translate }}
</mat-error>
diff --git a/src/app/components/home/_dialogs/register/register.component.html b/src/app/components/home/_dialogs/register/register.component.html
index c720eae72..1487008b9 100644
--- a/src/app/components/home/_dialogs/register/register.component.html
+++ b/src/app/components/home/_dialogs/register/register.component.html
@@ -2,8 +2,9 @@
fxLayoutAlign="space-around" fxLayoutGap="10px">
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="email" #userName placeholder="{{ 'register.email' | translate }}" [formControl]="usernameFormControl"
+ matInput type="email" #userName [formControl]="usernameFormControl"
[errorStateMatcher]="matcher" aria-labelledby="register-email-description"/>
+ <mat-placeholder class="placeholder">{{ 'register.email' | translate }}</mat-placeholder>
<mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">
{{ 'register.email-invalid' | translate }}
</mat-error>
@@ -14,8 +15,9 @@
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="email" #userName2 placeholder="{{ 'register.email-verify' | translate }}" [formControl]="username2FormControl"
+ matInput type="email" #userName2 [formControl]="username2FormControl"
[errorStateMatcher]="matcher" aria-labelledby="register-email-description-repeat"/>
+ <mat-placeholder class="placeholder">{{ 'register.email-verify' | translate }}</mat-placeholder>
<mat-error *ngIf="username2FormControl.hasError('emailIsEqual') && !username2FormControl.hasError('required')">
{{ 'register.email-unmatch' | translate }}
</mat-error>
@@ -23,9 +25,10 @@
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="password" #userPassword1 placeholder="{{ 'register.password' | translate }}"
+ matInput type="password" #userPassword1
[formControl]="password1FormControl" [errorStateMatcher]="matcher"
aria-labelledby="register-password-description">
+ <mat-placeholder class="placeholder">{{ 'register.password' | translate }}</mat-placeholder>
<mat-error *ngIf="password1FormControl.hasError('required')">
{{ 'register.password-required' | translate }}
</mat-error>
@@ -33,9 +36,10 @@
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput type="password" #userPassword2 placeholder="{{ 'register.password-verify' | translate}}"
+ matInput type="password" #userPassword2
[formControl]="password2FormControl" [errorStateMatcher]="matcher"
aria-labelledby="register-password-description-repeat">
+ <mat-placeholder class="placeholder">{{ 'register.password-verify' | translate}}</mat-placeholder>
<mat-error *ngIf="password2FormControl.hasError('required')">
{{ 'register.password-required' | translate }}
</mat-error>
diff --git a/src/app/components/home/_dialogs/user-activation/user-activation.component.html b/src/app/components/home/_dialogs/user-activation/user-activation.component.html
index 283e0acb4..4521821bb 100644
--- a/src/app/components/home/_dialogs/user-activation/user-activation.component.html
+++ b/src/app/components/home/_dialogs/user-activation/user-activation.component.html
@@ -2,9 +2,10 @@
fxLayoutGap="10px">
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
- matInput #userActivationKey type="text" placeholder="{{ 'login.activation-key' | translate }}"
+ matInput #userActivationKey type="text"
[formControl]="activationKeyFormControl" name="activation-key"
aria-labelledby="activation-key-input-description"/>
+ <mat-placeholder class="placeholder">{{ 'login.activation-key' | translate }}</mat-placeholder>
<mat-error *ngIf="activationKeyFormControl.hasError('required')">{{ 'login.activation-key-required' | translate }}</mat-error>
</mat-form-field>
</form>
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
index 9742c1195..a9c11bc0c 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
@@ -6,8 +6,9 @@
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
#searchBox id="searchBox" [ngClass]="{'desktop-input': deviceType === 'desktop',
'mobile-input': deviceType === 'mobile' && !search, 'mobile-input-2': deviceType === 'mobile' && search }"
- [placeholder]="searchPlaceholder" (input)="searchComments()" [(ngModel)]="searchInput"
- aria-labelledby="search-box-input-description">
+ (input)="searchComments()" [(ngModel)]="searchInput"
+ aria-labelledby="search-box-input-description"/>
+ <mat-placeholder class="placeholder">{{ searchPlaceholder }}</mat-placeholder>
<button mat-icon-button class="searchBarButton close" *ngIf="searchInput !== '' || search"
(click)="hideCommentsList=false; searchInput = ''; search = false; searchPlaceholder = '';">
<mat-icon>close</mat-icon>
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
index 42f57c417..b65d87a60 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
@@ -1,7 +1,7 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-form-field class="input-block">
- <textarea (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10 maxlength="255"
- [formControl]="bodyForm" aria-labelledby="ask-question-description"></textarea>
+ <textarea (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10 maxlength="255"
+ [formControl]="bodyForm" aria-labelledby="ask-question-description"></textarea>
<mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate}}</mat-placeholder>
<mat-hint align="end"><span aria-hidden="true">{{commentBody.value.length}} / 255</span></mat-hint>
</mat-form-field>
diff --git a/src/app/components/shared/_dialogs/room-create/room-create.component.html b/src/app/components/shared/_dialogs/room-create/room-create.component.html
index c350257ae..04f50c8bd 100644
--- a/src/app/components/shared/_dialogs/room-create/room-create.component.html
+++ b/src/app/components/shared/_dialogs/room-create/room-create.component.html
@@ -2,8 +2,9 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<mat-form-field>
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" (keypress)="resetEmptyInputs()" matInput #roomName class="input-block" type="text"
- placeholder="{{ 'session.session-name' | translate}}" maxlength="20" [(ngModel)]="longName"
+ maxlength="20" [(ngModel)]="longName"
name="roomName" aria-labelledby="room-name-input"/>
+ <mat-placeholder class="placeholder">{{ 'session.session-name' | translate }}</mat-placeholder>
<mat-hint align="end" class="count" *ngIf="!emptyInputs"><span aria-hidden="true">{{roomName.value.length}} / 20</span></mat-hint>
<mat-hint align="start" class="error" *ngIf="emptyInputs"><strong>{{ 'home-page.no-empty-name' | translate }}</strong></mat-hint>
</mat-form-field>
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 479f44caa..9091f23ea 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -5,8 +5,9 @@
</mat-label>
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" #searchBox id="searchBox" [ngClass]="{'desktop-input': deviceType === 'desktop',
'mobile-input': deviceType === 'mobile' && !search, 'mobile-input-2': deviceType === 'mobile' && search }"
- [placeholder]="searchPlaceholder" (input)="searchComments()" [(ngModel)]="searchInput"
+ (input)="searchComments()" [(ngModel)]="searchInput"
aria-labelledby="search-box-input-description">
+ <mat-placeholder class="placeholder">{{ searchPlaceholder }}</mat-placeholder>
<button id="search_close-button" mat-icon-button class="searchBarButton close" *ngIf="searchInput !== '' || search"
(click)="hideCommentsList=false; searchInput = ''; search = false; searchPlaceholder = '';" aria-labelledby="close_search">
<mat-icon>close</mat-icon>
diff --git a/src/app/components/shared/login/login.component.html b/src/app/components/shared/login/login.component.html
index 9b655199f..c0fd4a3b1 100644
--- a/src/app/components/shared/login/login.component.html
+++ b/src/app/components/shared/login/login.component.html
@@ -13,8 +13,8 @@
<mat-form-field class="input-block">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
#userEmail [errorStateMatcher]="matcher" [formControl]="usernameFormControl" matInput
- name="username" placeholder="{{ 'login.email' | translate }}"
- aria-labelledby="email-description"/>
+ name="username" aria-labelledby="email-description"/>
+ <mat-placeholder class="placeholder">{{ 'login.email' | translate }}</mat-placeholder>
<mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">
{{ 'login.email-invalid' | translate }}
</mat-error>
@@ -25,8 +25,8 @@
<mat-form-field>
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
#userPassword [errorStateMatcher]="matcher" [formControl]="passwordFormControl" matInput
- name="password" placeholder="{{ 'login.password' | translate }}" type="password"
- aria-labelledby="password-description"/>
+ name="password" type="password" aria-labelledby="password-description"/>
+ <mat-placeholder class="placeholder">{{ 'login.password' | translate }}</mat-placeholder>
<mat-error *ngIf="passwordFormControl.hasError('required')">{{ 'login.password-required' | translate }}</mat-error>
</mat-form-field>
<button class="login" mat-flat-button type="submit">
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index 0a61fdb56..6eea61d67 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -15,8 +15,9 @@
<!-- filter input -->
<mat-form-field class="filterWrapper">
<input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput (keyup)="applyFilter($event.target.value)"
- placeholder="{{ 'room-list.filter-message' | translate }}" class="filter"
- attr.aria-labelledby="sessionHistoryLabel{{ this.rooms.length === 1 ? '1' : '' }}">
+ class="filter"
+ attr.aria-labelledby="sessionHistoryLabel{{ this.rooms.length === 1 ? '1' : '' }}"/>
+ <mat-placeholder class="placeholder">{{ 'room-list.filter-message' | translate }}</mat-placeholder>
</mat-form-field>
<div [class.tableOverflow]="this.tableDataSource.data.length > 5">
diff --git a/src/styles.scss b/src/styles.scss
index c8848ceaa..5739d77ed 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -54,3 +54,7 @@
outline: none;
border-color: transparent;
}
+
+.placeholder {
+ color: var(--on-surface);
+}
--
GitLab