Converted input placeholders to mat-label

Various style improvements

Updated translations

src/app/dialogs/add-user-dialog/add-user-dialog.component.html

@@ -3,12 +3,14 @@
 <mat-dialog-content>
     <div>
         <mat-form-field>
-            <input matInput placeholder="User name" i18n-placeholder="User name placeholder" [(ngModel)]="usernameInput">
+            <mat-label i18n="User name">User name</mat-label>
+            <input matInput [(ngModel)]="usernameInput">
         </mat-form-field>
     </div>
     <div>
         <mat-form-field>
-            <input matInput placeholder="Password" i18n-placeholder="Password placeholder" [(ngModel)]="passwordInput" type="password">
+            <mat-label i18n="Password">Password</mat-label>
+            <input matInput [(ngModel)]="passwordInput" type="password">
         </mat-form-field>
     </div>
 </mat-dialog-content>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html

@@ -25,7 +25,7 @@
                         <mat-autocomplete #autochip="matAutocomplete">
                             <mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
                                 <span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
-                                <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                                <button class="info-autocomplete-icon" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
                             </mat-option>
                         </mat-autocomplete>
                     </mat-card-content>
@@ -38,12 +38,13 @@
                         <form >
                             <div>
                                 <mat-form-field style="width: 75%" color="accent">
-                                    <input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
+                                    <mat-label i18n="Arg">Arg</mat-label>
+                                    <input matInput [matAutocomplete]="auto" [formControl]="stateCtrl">
                                 </mat-form-field>
                                 <mat-autocomplete #auto="matAutocomplete">
                                     <mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
                                         <span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
-                                        <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                                        <button class="info-autocomplete-icon" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
                                     </mat-option>
                                 </mat-autocomplete>
 
@@ -68,7 +69,8 @@
                             </div>
                             <div *ngIf="secondArgEnabled">
                                 <mat-form-field style="width: 75%" color="accent">
-                                    <input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
+                                    <mat-label i18n="Arg value">Arg value</mat-label>
+                                    <input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" [(ngModel)]="secondArg">
                                 </mat-form-field>
                             </div>
                         </form>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.scss

@@ -1,3 +1,17 @@
 .info-menu-icon {
     float: right;
+}
+
+.info-autocomplete-icon {
+    float: right;
+    position: relative;
+    top: -12px;
+}
+
+::ng-deep.mat-menu-panel {
+    max-width: none !important;
+}
+
+::ng-deep.mdc-list-item__primary-text {
+    width: 100%;
 }

src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html

@@ -2,7 +2,8 @@
 
 <mat-dialog-content style="max-height: 50vh">
     <mat-form-field style="width: 250px; margin-bottom: 5px;">
-        <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="category['name']" required>
+        <mat-label i18n="Category name">Name</mat-label>
+        <input matInput [(ngModel)]="category['name']" required>
     </mat-form-field>
 
     <mat-divider></mat-divider>
@@ -41,7 +42,8 @@
     <mat-divider></mat-divider>
 
     <mat-form-field style="width: 250px; margin-top: 10px;">
-        <input matInput [(ngModel)]="category['custom_output']" placeholder="Custom file output" i18n-placeholder="Category custom file output placeholder">
+        <mat-label i18n="Custom file output">Custom file output</mat-label>
+        <input matInput [(ngModel)]="category['custom_output']">
         <mat-hint>
             <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
             <ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.

src/app/dialogs/set-default-admin-dialog/set-default-admin-dialog.component.html

@@ -7,7 +7,8 @@
     <div style="position: relative">
         <div>
             <mat-form-field color="accent">
-                <input type="password" (keyup.enter)="create()" matInput [(ngModel)]="input" placeholder="Password" i18n-placeholder="Password">
+                <mat-label i18n="Password">Password</mat-label>
+                <input type="password" (keyup.enter)="create()" matInput [(ngModel)]="input">
             </mat-form-field>
         </div>
     </div>

src/app/dialogs/share-media-dialog/share-media-dialog.component.html

@@ -11,7 +11,8 @@
         <div>
             <mat-checkbox style="margin-right: 15px;" (change)="useTimestampChanged()" [(ngModel)]="timestamp_enabled"><ng-container i18n="Use timestamp">Use timestamp</ng-container></mat-checkbox>
             <mat-form-field>
-                <input matInput type="number" [(ngModel)]="current_timestamp" [disabled]="!timestamp_enabled" (change)="timestampInputChanged($event)" placeholder="Seconds" i18n-placeholder="Seconds">
+                <mat-label i18n="Seconds">Seconds</mat-label>
+                <input matInput type="number" [(ngModel)]="current_timestamp" [disabled]="!timestamp_enabled" (change)="timestampInputChanged($event)">
             </mat-form-field>
         </div>
         <div>

src/app/dialogs/video-info-dialog/video-info-dialog.component.html

@@ -5,16 +5,19 @@
         <button style="position: absolute; right: 16px; top: 8px;" mat-icon-button (click)="editing = !editing"><mat-icon>edit</mat-icon></button>
     </div>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.title" matInput placeholder="Name" i18n-placeholder="Name" [disabled]="!editing">
+        <mat-label i18n="Name">Name</mat-label>
+        <input [(ngModel)]="new_file.title" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.url" matInput placeholder="URL" i18n-placeholder="URL" [disabled]="!editing">
+        <mat-label i18n="URL">URL</mat-label>
+        <input [(ngModel)]="new_file.url" matInput [disabled]="!editing">
         <button mat-icon-button matSuffix (click)="window.open(new_file.url, '_blank')">
             <mat-icon>link</mat-icon>
         </button>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.uploader" matInput placeholder="Uploader" i18n-placeholder="Uploader" [disabled]="!editing">
+        <mat-label i18n="Uploader">Uploader</mat-label>
+        <input [(ngModel)]="new_file.uploader" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
         <mat-label i18n="Upload date">Upload date</mat-label>
@@ -23,10 +26,12 @@
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.thumbnailPath" matInput placeholder="Thumbnail path" i18n-placeholder="Thumbnail path" [disabled]="!editing">
+        <mat-label i18n="Thumbnail path">Thumbnail path</mat-label>
+        <input [(ngModel)]="new_file.thumbnailPath" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.thumbnailURL" matInput placeholder="Thumbnail URL" i18n-placeholder="Thumbnail URL" [disabled]="!editing || new_file.thumbnailPath">
+        <mat-label i18n="Thumbnail URL">Thumbnail URL</mat-label>
+        <input [(ngModel)]="new_file.thumbnailURL" matInput [disabled]="!editing || new_file.thumbnailPath">
     </mat-form-field>
     <mat-form-field *ngIf="initialized && postsService.categories" class="info-field">
         <mat-select placeholder="Category" i18n-placeholder="Category" [value]="category" (selectionChange)="categoryChanged($event)" [compareWith]="categoryComparisonFunction" [disabled]="!editing">
@@ -39,10 +44,12 @@
         </mat-select>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input type="number" [(ngModel)]="new_file.view_count" matInput placeholder="View count" i18n-placeholder="View count" [disabled]="!editing">
+        <mat-label i18n="View count">View count</mat-label>
+        <input type="number" [(ngModel)]="new_file.view_count" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input type="number" [(ngModel)]="new_file.local_view_count" matInput placeholder="Local view count" i18n-placeholder="Local view count" [disabled]="!editing">
+        <mat-label i18n="Local view count">Local view count</mat-label>
+        <input type="number" [(ngModel)]="new_file.local_view_count" matInput [disabled]="!editing">
     </mat-form-field>
 
     <mat-divider style="margin-bottom: 16px;"></mat-divider>