diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.html b/src/app/components/creator/_dialogs/moderators/moderators.component.html
index 7f88080f835cc178060a64e244e2a239d9324d12..ba3c76d733aec5593f44e6f2127d89520c0f22ac 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 a856ec082ac86128fb107504fdbddbd01271ad3c..5899b940c4433585d9e2baf5fe0ee446a03b64b8 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 345a6d33ce0c2e11faf9863e63ff3c47dc3d2e6b..0aca3fefe928a3f8ef29f753d43ea3b870d4f3e5 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 c720eae7276db5538d12c8caaa8bed235ab17deb..1487008b9604906d19968202d8c664b4339d8a62 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 283e0acb4c20308cd346ce7f50e6956443350e52..4521821bbdae3447522ae9b31b2362e00f1b63c9 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 9742c11958d97dc6a7abdde8bcee05dd69ec20a9..a9c11bc0c94200c022cb817405f9cd2ba9f13054 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 42f57c4177c87299c9241bf357bc457de12c46df..b65d87a60dbf82822f9ef7043ff843104c1785cb 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 c350257aef211a39df147e6674f621e20c0244e9..04f50c8bd9b52ddfde92c3ab96b41567d4340744 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 479f44caa662504a9914058801a112c9bd577bde..9091f23ea4fb358c93a0681a026dc4b578a5f3d8 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 9b655199fa326c51350897e10491d1d66675f9af..c0fd4a3b1eb93a2adffaa9b95367ae8292d5f4aa 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 0a61fdb56cc8dc042654eb3ef992ddeb60defbae..6eea61d6720df01dc3a8e4c480e93685b6a224ab 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 c8848ceaa05796d1a4cbcd75a78c4cbec9f5e62d..5739d77ed7f78df7e03fb81d70c3368f749ad2cc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -54,3 +54,7 @@
outline: none;
border-color: transparent;
}
+
+.placeholder {
+ color: var(--on-surface);
+}