Merge pull request #363 from NickPhura/ACRFD-13-2

ACRFD-13-2: FIx wonky IE spinner.

Author: NickPhura

package.json

@@ -47,6 +47,7 @@
     "mygovbc-bootstrap-theme": "0.4.1",
     "ng2-bootstrap-modal": "1.0.1",
     "ngx-pagination": "3.2.1",
+    "ng-inline-svg": "8.5.1",
     "rxjs": "6.5.2",
     "web-animations-js": "2.3.1",
     "xlsx": "0.14.3",

src/app/applications/application-detail/application-detail.component.html

@@ -36,8 +36,7 @@ <h1>Crown land File: {{application.clFile}}</h1>
         <button class="btn btn-icon" title="Refresh this application with the latest data from Tantalis"
           (click)="refreshApplication()"
           [disabled]="isRefreshing">
-          <i class="material-icons" [ngClass]="{'rotating': isRefreshing}">
-            refresh
+          <i class="material-icons refresh-spinner" [ngClass]="{'rotating': isRefreshing}" [inlineSVG]="'assets/images/baseline-refresh-24px.svg'">
           </i>
         </button>
         <span class="vert-pipe">&nbsp;</span>

src/app/applications/application-detail/application-detail.component.scss

@@ -174,3 +174,30 @@ ngb-alert {
   left: 50%;
   margin-left: -6rem;
 }
+
+// This, plus the use of the inlineSVG directive, is all because IE renders material icons poorly (IE renders the
+// icons asymmetrically, so spinners rotate super wonky).  This entire chunk of scss and the inlineSVG directive
+// could be replaced with the regular use of material icons if IE rendered the icons correctly. See other material-icon
+// <i> tags for examples.
+.btn {
+  &:hover .refresh-spinner > ::ng-deep svg {
+    fill: #212529;
+  }
+
+  .refresh-spinner {
+    height: 24px;
+    width: 24px;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    -moz-transition: background-color 0.15s ease-in-out;
+    -ms-transition: background-color 0.15s ease-in-out;
+    -o-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+
+    // Because the element is loaded dynamically, we need to use ng-deep to force the css to apply
+    > ::ng-deep svg {
+      display: block;
+      margin: auto;
+      fill: #808080;
+    }
+  }
+}

src/app/applications/applications.module.ts

@@ -6,6 +6,7 @@ import { SharedModule } from 'app/shared.module';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ApplicationsRoutingModule } from './applications-routing.module';
+import { InlineSVGModule } from 'ng-inline-svg';
 
 // components
 import { ApplicationListComponent } from './application-list/application-list.component';
@@ -27,6 +28,7 @@ import { ExcelService } from 'app/services/excel.service';
     SharedModule,
     NgxPaginationModule,
     NgbModule.forRoot(),
+    InlineSVGModule.forRoot(),
     ApplicationsRoutingModule
   ],
   declarations: [

src/app/utils/token-interceptor.ts

@@ -1,7 +1,7 @@
 import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { KeycloakService } from 'app/services/keycloak.service';
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, throwError } from 'rxjs';
 import { catchError, switchMap, tap } from 'rxjs/operators';
 
 /**
@@ -42,11 +42,11 @@ export class TokenInterceptor implements HttpInterceptor {
               return next.handle(request);
             }),
             catchError(err => {
-              return Observable.throw(err);
+              return throwError(err);
             })
           );
         }
-        return Observable.throw(error);
+        return throwError(error);
       })
     );
   }