Updated to material design v15

src/app/components/login/login.component.scss

@@ -12,17 +12,15 @@
 }
 
 .login-button-div {
-    margin-bottom: 10px;
-    margin-top: 10px;
-    margin-left: -16px;
-    margin-right: -16px;
     bottom: 0px;
     width: 100%;
+    height: 42px;
     position: absolute;
 }
 
 .login-button-div > button {
     width: 100%;
+    height: 100%;
     border-radius: 0px 0px 4px 4px !important;
 }
 

src/app/components/manage-role/manage-role.component.html

@@ -3,13 +3,13 @@
 <mat-dialog-content *ngIf="role">
     <mat-list>
         <mat-list-item role="listitem" *ngFor="let permission of available_permissions">
-            <h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
-            <span matLine>
+            <div matListItemTitle>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</div>
+            <div matListItemLine>
                 <mat-radio-group [disabled]="permission === 'settings' && role.key === 'admin'" (change)="changeRolePermissions($event, permission, permissions[permission])" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give role permission for ' + permission">
                     <mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
                     <mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
                 </mat-radio-group>
-            </span>
+            </div>
         </mat-list-item>
     </mat-list>
 </mat-dialog-content>

src/app/components/manage-role/manage-role.component.scss

@@ -1,4 +1,4 @@
-.mat-radio-button {
+.mat-mdc-radio-button {
     margin-right: 10px;
     margin-top: 5px;
 }

src/app/components/manage-user/manage-user.component.html

@@ -13,14 +13,14 @@
     <div>
         <mat-list>
             <mat-list-item role="listitem" *ngFor="let permission of available_permissions">
-                <h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
-                <span matLine>
+                <div matListItemTitle>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</div>
+                <div matListItemLine>
                     <mat-radio-group [disabled]="permission === 'settings' && postsService.user.uid === user.uid" (change)="changeUserPermissions($event, permission)" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give user permission for ' + permission">
                         <mat-radio-button value="default"><ng-container i18n="Use role default">Use role default</ng-container></mat-radio-button>
                         <mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
                         <mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
                     </mat-radio-group>
-                </span>
+                </div>
             </mat-list-item>
         </mat-list>
     </div>

src/app/components/manage-user/manage-user.component.scss

@@ -1,4 +1,4 @@
-.mat-radio-button {
+.mat-mdc-radio-button {
     margin-right: 10px;
     margin-top: 5px;
 }

src/app/components/manage-user/manage-user.component.ts

@@ -15,12 +15,13 @@ export class ManageUserComponent implements OnInit {
   permissions = null;
 
   permissionToLabel = {
-    'filemanager': 'File manager',
-    'settings': 'Settings access',
-    'subscriptions': 'Subscriptions',
-    'sharing': 'Share files',
-    'advanced_download': 'Use advanced download mode',
-    'downloads_manager': 'Use downloads manager'
+    'filemanager': $localize`File manager`,
+    'settings': $localize`Settings access`,
+    'subscriptions': $localize`Subscriptions`,
+    'sharing': $localize`Share files`,
+    'advanced_download': $localize`Use advanced download mode`,
+    'downloads_manager': $localize`Use downloads manager`,
+    'tasks_manager': $localize`Use tasks manager`,
   }
 
   settingNewPassword = false;

src/app/components/modify-users/modify-users.component.html

@@ -1,10 +1,10 @@
 <div *ngIf="dataSource; else loading">
     <div style="padding: 15px">
     <div class="row">
-        <div class="table table-responsive pb-4 pt-2">
+        <div class="table table-responsive pb-4 pt-4">
         <div class="example-header">
-            <mat-form-field>
-            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
+            <mat-form-field appearance="outline">
+                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
             </mat-form-field>
         </div>
         

src/app/components/recent-videos/recent-videos.component.html

@@ -3,7 +3,7 @@
         <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
             <div>
                 <div style="display: inline-block;">
-                    <mat-form-field style="width: 132px;">
+                    <mat-form-field appearance="outline" style="width: 165px;">
                         <mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
                             <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
                                 {{filterOption['value']['label']}}
@@ -21,7 +21,7 @@
             <h4 *ngIf="customHeader" class="my-videos-title">{{customHeader}}</h4>
         </div>
         <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
-            <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
+            <mat-form-field appearance="outline" [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
                 <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
@@ -96,7 +96,7 @@
     </div>
 
     <div style="position: relative;" *ngIf="usePaginator && selectedIndex > 0">
-        <div style="position: absolute; margin-left: 8px; margin-top: 5px; scale: 0.8">
+        <div style="position: absolute; margin-left: 8px; margin-top: -2px; scale: 0.8">
             <mat-form-field>
                 <mat-label><ng-container i18n="File type">File type</ng-container></mat-label>
                 <mat-select color="accent" [(ngModel)]="fileTypeFilter" (selectionChange)="fileTypeFilterChanged($event.value)">

src/app/components/recent-videos/recent-videos.component.scss

@@ -17,7 +17,7 @@
 }
  
 .search-bar-unfocused {
-    width: 132px;
+    width: 165px;
 }
 
 .search-input {
@@ -44,7 +44,7 @@
 .sort-dir-div {
     display: inline-block;
     position: absolute;
-    top: 10px;
+    top: 4px;
 }
 
 .paginator {

src/app/components/unified-file-card/unified-file-card.component.scss

@@ -21,14 +21,17 @@
 
 .menuButton {
   right: 0px;
-  top: -1px;
+  width: 40px !important;
+  height: 40px !important;
   position: absolute;
+  display: flex;
+  align-items: center;
   z-index: 999;
-  
 }
 
 /* Coerce the <span> icon container away from display:inline */
-.mat-icon-button .mat-button-wrapper {
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+.mat-mdc-icon-button .mat-button-wrapper {
   display: flex;
   justify-content: center;
 }