Updated to Font Awesome 5. Fixed confirmation dialog for Save dialog.

angular.json

@@ -28,7 +28,7 @@
             "styles": [
               "src/styles.scss",
               "node_modules/primeng/resources/themes/omega/theme.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/ng-busy/src/style/busy.css"

package.json

@@ -14,20 +14,20 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "6.0.5",
-    "@angular/cdk": "^6.4.1",
+    "@angular/cdk": "^6.4.2",
     "@angular/common": "6.0.5",
     "@angular/compiler": "6.0.5",
     "@angular/core": "6.0.5",
-    "@angular/flex-layout": "^6.0.0-beta.16",
+    "@angular/flex-layout": "^6.0.0-beta.17",
     "@angular/forms": "6.0.5",
     "@angular/http": "6.0.5",
     "@angular/platform-browser": "6.0.5",
     "@angular/platform-browser-dynamic": "6.0.5",
     "@angular/router": "6.0.5",
+    "@fortawesome/fontawesome-free": "^5.2.0",
     "array-buffer-reader": "^1.0.1",
     "core-js": "^2.5.7",
     "detect-resize": "^0.1.5",
-    "font-awesome": "^4.7.0",
     "ks-astronomy": "^1.0.1",
     "ks-date-time-zone": "^1.4.0",
     "ks-math": "^1.1.1",
@@ -47,8 +47,8 @@
     "@types/googlemaps": "^3.30.11",
     "@types/jasmine": "^2.8.8",
     "@types/jasminewd2": "~2.0.2",
-    "@types/lodash": "^4.14.113",
-    "@types/node": "^6.0.114",
+    "@types/lodash": "^4.14.116",
+    "@types/node": "^6.0.115",
     "codelyzer": "^4.4.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.component.html

@@ -11,11 +11,11 @@ <h2>Sky View Café NP</h2>
   <div class="flex-container" fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="4px" fxFlex="1 0 auto">
     <div fxLayout="row" fxLayoutAlign="center stretch" fxFlex="0 0 auto" class="banner-backdrop">
       <div class="banner" fxFlex="0 0 auto">
-        <div><a href="/assets/help/" target="_blank"><i class="fa fa-question-circle"></i><br>help</a></div>
-        <div><a href="/assets/about.html" target="_blank"><i class="fa fa-info-circle"></i><br>about</a></div>
-        <div><a href="https://www.facebook.com/groups/152276391475378/" target="_blank"><i class="fa fa-facebook-official"></i><br>discuss</a></div>
-        <div><a href="https://github.com/kshetline/sky-view-cafe-astronomy/" target="_blank"><i class="fa fa-code"></i><br>code</a></div>
-        <div><a href="/assets/donate.html" target="_blank"><i class="fa fa-money"></i><br>donate</a></div>
+        <div><a href="/assets/help/" target="_blank"><i class="fas fa-question-circle"></i><br>help</a></div>
+        <div><a href="/assets/about.html" target="_blank"><i class="fas fa-info-circle"></i><br>about</a></div>
+        <div><a href="https://www.facebook.com/groups/152276391475378/" target="_blank"><i class="fab fa-facebook"></i><br>discuss</a></div>
+        <div><a href="https://github.com/kshetline/sky-view-cafe-astronomy/" target="_blank"><i class="fas fa-code"></i><br>code</a></div>
+        <div><a href="/assets/donate.html" target="_blank"><i class="fas fa-money-check-alt"></i><br>donate</a></div>
       </div>
     </div>
     <div class="flex-container" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="0 0 auto">
@@ -32,7 +32,7 @@ <h2>Sky View Café NP</h2>
               <ks-calendar [(ngModel)]="date" [timeZone]="timeZone" [gregorianChangeDate]="gcDate" [showDst]="true" [minYear]="-6000" [maxYear]="9999"
                            (dayClick)="calendarPopup.hide()"></ks-calendar>
             </p-overlayPanel>
-            <ks-icon-button [disabled]="trackTime" icon="fa fa-calendar" (click)="calendarPopup.toggle($event)"></ks-icon-button>&nbsp;
+            <ks-icon-button [disabled]="trackTime" icon="far fa-calendar-alt" (click)="calendarPopup.toggle($event)"></ks-icon-button>&nbsp;
           </div>
           <div class="time-panel-item">
             <p-checkbox [(ngModel)]="trackTime" binary="true" label="Track current time"></p-checkbox>
@@ -53,7 +53,7 @@ <h2>Sky View Café NP</h2>
       </div>
       <div fxFlex="0 0 auto">
         <p-menu #moremenu popup="popup" [model]="moreItems"></p-menu>
-        <button type="button" pButton icon="fa fa-list" label="More..." (click)="moremenu.toggle($event)"></button>
+        <button type="button" pButton icon="fas fa-list" label="More..." (click)="moremenu.toggle($event)"></button>
       </div>
     </div>
     <div class="lower-panel flex-container" fxFlex="100%" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutWrap="none" fxLayoutGap="4px">

src/app/app.component.ts

@@ -49,10 +49,10 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 
   messages: Message[] = [];
   moreItems: MenuItem[] = [
-      { label: 'Preferences', icon: 'fa fa-cog', command: () => this.displayPreferences = true },
-      { label: 'Help', icon: 'fa fa-question-circle', command: () => this.openHelp() },
-      { label: 'Toggle full screen', icon: 'fa fa-arrows-alt', command: () => this.toggleFullScreen() },
-      { label: 'About Sky View Café', icon: 'fa fa-info-circle', command: () => this.displayAbout = true }
+      { label: 'Preferences', icon: 'fas fa-cog', command: () => this.displayPreferences = true },
+      { label: 'Help', icon: 'fas fa-question-circle', command: () => this.openHelp() },
+      { label: 'Toggle full screen', icon: 'fas fa-arrows-alt', command: () => this.toggleFullScreen() },
+      { label: 'About Sky View Café', icon: 'fas fa-info-circle', command: () => this.displayAbout = true }
     ];
 
   displayAbout = false;

src/app/svc/svc-atlas-dialog/svc-atlas-dialog.component.html

@@ -1,4 +1,4 @@
-<p-dialog header="Find Latitude, Longitude, and Time Zone" modal="modal" [(visible)]="visible" width="795" height="500"
+<p-dialog header="Find Latitude, Longitude, and Time Zone" [modal]="true" [(visible)]="visible" width="795" height="500"
           (keyup)="onKey($event)">
   <p-growl [value]="messages" sticky="true"></p-growl>
   <div style="position: relative">
@@ -11,7 +11,7 @@
         <input #searchField type="text" pInputText class="city-field" [(ngModel)]="city" [disabled]="searching"
                (focus)="searchFocus(true)" (blur)="searchFocus(false)"/>
         <ks-dropdown [(ngModel)]="state" [options]="states" [editable]="true" [style]="{width: '19em'}"></ks-dropdown>
-        <button type="button" pButton icon="fa fa-search" (click)="search()" label="Search" [disabled]="searching || becomingVisible"
+        <button type="button" pButton icon="fas fa-search" (click)="search()" label="Search" [disabled]="searching || becomingVisible"
                 (focus)="searchFocus(true)" (blur)="searchFocus(false)"></button>
       </div>
       <div class="bottom-caption-row">
@@ -60,8 +60,8 @@
   </div>
   <p-footer>
     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-      <button type="button" pButton icon="fa fa-close" (click)="visible=false" label="Cancel"></button>
-      <button type="button" pButton icon="fa fa-check" (click)="setLocation()" label="OK" [disabled]="searching || !selection"></button>
+      <button type="button" pButton icon="far fa-window-close" (click)="visible=false" label="Cancel"></button>
+      <button type="button" pButton icon="fas fa-check" (click)="setLocation()" label="OK" [disabled]="searching || !selection"></button>
     </div>
   </p-footer>
 </p-dialog>

src/app/svc/svc-calendar-view/svc-calendar-view-options.component.html

@@ -1,20 +1,20 @@
 <div class="flex-container" fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="4px">
   <div fxFlex="0 0 auto" fxFlexAlign="center" class="inc-dec-panel">
     <div class="inc-dec-pair">
-      <button pButton type="button" icon="fa fa-chevron-left" (click)="changeMonth(-1)"
+      <button pButton type="button" icon="fas fa-chevron-left" (click)="changeMonth(-1)"
         (touchstart)="onTouchStart($event, -1)" (touchend)="stopClickTimer()"
         (mousedown)="onMouseDown(-1)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
       <span>Month</span>
-      <button pButton type="button" icon="fa fa-chevron-right" (click)="changeMonth(1)"
+      <button pButton type="button" icon="fas fa-chevron-right" (click)="changeMonth(1)"
         (touchstart)="onTouchStart($event, 1)" (touchend)="stopClickTimer()"
         (mousedown)="onMouseDown(1)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
     </div>
     <div class="inc-dec-pair">
-      <button pButton type="button" icon="fa fa-chevron-left" (click)="changeMonth(-12)"
+      <button pButton type="button" icon="fas fa-chevron-left" (click)="changeMonth(-12)"
         (touchstart)="onTouchStart($event, -12)" (touchend)="stopClickTimer()"
         (mousedown)="onMouseDown(-12)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
       <span>Year</span>
-      <button pButton type="button" icon="fa fa-chevron-right" (click)="changeMonth(12)"
+      <button pButton type="button" icon="fas fa-chevron-right" (click)="changeMonth(12)"
         (touchstart)="onTouchStart($event, 12)" (touchend)="stopClickTimer()"
         (mousedown)="onMouseDown(12)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
     </div>

src/app/svc/svc-change-location-dialog/svc-change-location-dialog.component.html

@@ -1,4 +1,4 @@
-<p-dialog header="Change Location" modal="modal" [(visible)]="visible" width="425" height="220"
+<p-dialog header="Change Location" [modal]="true" [(visible)]="visible" width="425" height="220"
           (keyup)="onKey($event)">
   <div class="zone-choices">
     Change location to {{formattedLatitude}}, {{formattedLongitude}} and:<br>
@@ -18,8 +18,8 @@
   </div>
   <p-footer>
     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-      <button type="button" pButton icon="fa fa-close" (click)="visible=false" label="Cancel"></button>
-      <button type="button" pButton icon="fa fa-check" (click)="goToLocation()" label="OK"></button>
+      <button type="button" pButton icon="far fa-window-close" (click)="visible=false" label="Cancel"></button>
+      <button type="button" pButton icon="fas fa-check" (click)="goToLocation()" label="OK"></button>
     </div>
   </p-footer>
 </p-dialog>

src/app/svc/svc-ecliptic-view/svc-ecliptic-view-options.component.html

@@ -8,12 +8,12 @@
   <ks-checkbox fxFlex="0 0 auto" [(ngModel)]="showConstellations" binary="true" label="Constellations"></ks-checkbox>
   <ks-checkbox fxFlex="0 0 auto" [(ngModel)]="localHorizon" binary="true" label="Local horizon"></ks-checkbox>
   <div fxFlex="0 0 auto">
-    <ks-checkbox [(ngModel)]="showStars" binary="true" label="Stars"></ks-checkbox>
+    <ks-checkbox [(ngModel)]="showStars" binary="true" label="Stars"></ks-checkbox>&nbsp;&nbsp;
     <ks-checkbox [(ngModel)]="brightenStars" binary="true" [disabled]="!showStars" label="Brighten stars"></ks-checkbox>
   </div>
   <ks-checkbox fxFlex="0 0 auto" [(ngModel)]="topocentricMoon" binary="true" label="Topocentric Moon"></ks-checkbox>
   <ks-checkbox fxFlex="0 0 auto" [(ngModel)]="enlargeSunMoon" binary="true" label="Enlarge Sun/Moon"></ks-checkbox>
 </div>
 <p-menu #menu popup="popup" [model]="namesCategories"></p-menu>
 <br>
-<button type="button" pButton icon="fa fa-list" label="Show Names..." (click)="menu.toggle($event)"></button>
+<button type="button" pButton icon="fas fa-list" label="Show Names..." (click)="menu.toggle($event)"></button>

src/app/svc/svc-ecliptic-view/svc-ecliptic-view-options.component.ts

@@ -31,8 +31,8 @@ import { NO_DEEP_SKY, ALL_DEEP_SKY } from '../generic-sky-view';
 import * as _ from 'lodash';
 import { SvcGenericOptionsComponent } from '../svc-generic-options.component';
 
-const CHECKED = 'fa fa-check-square-o';
-const UNCHECKED = 'fa fa-square-o';
+const CHECKED = 'far fa-check-square';
+const UNCHECKED = 'far fa-square';
 const EM_DASH = '\u2014';
 
 interface MenuItemPlus extends MenuItem {
@@ -76,7 +76,7 @@ export class SvcEclipticViewOptionsComponent extends SvcGenericOptionsComponent
   namesCategories: MenuItemPlus[] = [
     {label: 'None',                  icon: UNCHECKED, property: null,
       command: (event) => { this.toggleLabels(event); }},
-    {label: EM_DASH, icon: 'fa fa-fw'},
+    {label: EM_DASH, icon: 'fas fa-fw'},
     {label: 'Planets',               icon: CHECKED,   property: PROPERTY_LABEL_PLANETS,
       command: (event) => { this.toggleLabels(event); }},
     {label: 'Bright Stars',          icon: UNCHECKED, property: PROPERTY_LABEL_BRIGHT_STARS,
@@ -85,7 +85,7 @@ export class SvcEclipticViewOptionsComponent extends SvcGenericOptionsComponent
       command: (event) => { this.toggleLabels(event); }},
     {label: 'Constellations',        icon: UNCHECKED, property: PROPERTY_LABEL_CONSTELLATIONS,
       command: (event) => { this.toggleLabels(event); }, disabled: true},
-    {label: EM_DASH, icon: 'fa fa-fw'},
+    {label: EM_DASH, icon: 'fas fa-fw'},
     {label: 'No Deep Sky Objects',   icon: CHECKED,   property: PROPERTY_LABEL_DSOS,
       command: (event) => { this.toggleLabels(event); }, value: NO_DEEP_SKY},
     {label: 'DSOs 4.0 and Brighter', icon: UNCHECKED, property: PROPERTY_LABEL_DSOS,

src/app/svc/svc-event-navigator/svc-event-navigator.component.html

@@ -1,12 +1,12 @@
 <div class="flex-container" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
-  <button pButton type="button" icon="fa fa-chevron-left" [disabled]="disabled || !eventFinderReady"
+  <button pButton type="button" icon="fas fa-chevron-left" [disabled]="disabled || !eventFinderReady"
           (touchstart)="onTouchStart($event, true)" (touchend)="onTouchEnd($event)"
           (mousedown)="onMouseDown(true)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
   <ks-dropdown scrollHeight="400px"
                [options]="events" [(ngModel)]="selectedEvent" [disabled]="disabled || !eventFinderReady"></ks-dropdown>
   <ks-dropdown scrollHeight="250px"
                [options]="planets" [(ngModel)]="selectedPlanet" [disabled]="disabled || noPlanets || !eventFinderReady"></ks-dropdown>
-  <button pButton type="button" icon="fa fa-chevron-right" [disabled]="disabled || !eventFinderReady"
+  <button pButton type="button" icon="fas fa-chevron-right" [disabled]="disabled || !eventFinderReady"
           (touchstart)="onTouchStart($event, false)" (touchend)="onTouchEnd($event)"
           (mousedown)="onMouseDown(false)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
 </div>

src/app/svc/svc-location-settings/svc-location-settings.component.html

@@ -20,21 +20,21 @@
       <button pButton type="button" label="Delete" (click)="openDeleteDialog()"></button>
     </div>
   </div>
-  <p-dialog header="Save Location" modal="modal" [(visible)]="showSaveDialog" width="350" height="190">
+  <p-dialog header="Save Location" [modal]="true" [(visible)]="showSaveDialog" width="350" height="190">
     <div style="height: 60px;">
       Save location as:&nbsp;
       <ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" [style]="{width: '200px'}"></ks-dropdown>
       <br><br><p-checkbox [(ngModel)]="makeDefault" binary="true" label="Make this the default location"></p-checkbox>
     </div>
     <p-footer>
       <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-        <button type="button" pButton icon="fa fa-close" (click)="showSaveDialog=false" label="Cancel"></button>
-        <button type="button" pButton icon="fa fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
+        <button type="button" pButton icon="far fa-window-close" (click)="showSaveDialog=false" label="Cancel"></button>
+        <button type="button" pButton icon="fas fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
       </div>
     </p-footer>
-    <p-confirmDialog header="Same location name in use" icon="fa fa-question-circle" width="400" appendTo="body"></p-confirmDialog>
+    <p-confirmDialog key="save-confirm" header="Same location name in use" icon="fas fa-question-circle" width="400"></p-confirmDialog>
   </p-dialog>
-  <p-dialog header="Delete Location" modal="modal" [(visible)]="showDeleteDialog" width="350" height="165">
+  <p-dialog header="Delete Location" [modal]="true" [(visible)]="showDeleteDialog" width="350" height="165">
     <div style="height: 35px;">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
         <span>Location to delete:&nbsp;</span>
@@ -43,8 +43,8 @@
     </div>
     <p-footer>
       <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-        <button type="button" pButton icon="fa fa-close" (click)="showDeleteDialog=false" label="Cancel"></button>
-        <button type="button" pButton icon="fa fa-check" (click)="doDelete()" label="OK"></button>
+        <button type="button" pButton icon="far fa-window-close" (click)="showDeleteDialog=false" label="Cancel"></button>
+        <button type="button" pButton icon="fas fa-check" (click)="doDelete()" label="OK"></button>
       </div>
     </p-footer>
   </p-dialog>