switch to material icons

US-CBP · May 4, 2017 · 830b349 · 830b349
1 parent 9539129
commit 830b349
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 84 deletions.
diff --git a/index.ts b/index.ts
@@ -7,6 +7,7 @@ import 'cbp-theme/dist/inputmask.js';
 import 'cbp-theme/dist/cbp-theme.js';
 import 'hammerjs';
 
+import 'material-design-icons/iconfont/material-icons.css';
 import './theme/cbp-theme.scss';
 
 export * from './src';

diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
         "core-js": "^2.4.1",
         "hammerjs": "~2.0.8",
         "lodash": "^4.17.4",
+        "material-design-icons": "^3.0.1",
         "moment": "~2.17.1",
         "reflect-metadata": "~0.1.9",
         "rxjs": "^5.3.0",

diff --git a/src/badge/_badge.scss b/src/badge/_badge.scss
@@ -35,10 +35,4 @@
         left: 30px;
         top: 11px;
     }
-
-    .mat-button-wrapper {
-        .mat-icon {
-            padding: 0;
-        }
-    }
 }
diff --git a/src/dual-list/dual-list.component.html b/src/dual-list/dual-list.component.html
@@ -19,19 +19,19 @@
     <div class="vertical-align">
         <button type="button" md-mini-fab color="primary"
             (click)="moveSelectAll()">
-            <md-icon class="fa fa-angle-double-right" aria-hidden="true"></md-icon>
+            <md-icon>last_page</md-icon>
         </button>
         <button type="button" md-mini-fab color="primary"
             (click)="moveSelectedItem()">
-            <md-icon class="fa fa-angle-right" aria-hidden="true"></md-icon>
+            <md-icon>chevron_right</md-icon>
         </button>
         <button type="button" md-mini-fab color="primary"
             (click)="moveDeselectItem()">
-            <md-icon class="fa fa-angle-left" aria-hidden="true"></md-icon>
+            <md-icon>chevron_left</md-icon>
         </button>
         <button type="button" md-mini-fab color="primary"
             (click)="moveDeselectAll()">
-            <md-icon class="fa fa-angle-double-left" aria-hidden="true"></md-icon>
+            <md-icon>first_page</md-icon>
         </button>
     </div>
     <div>

diff --git a/src/dual-list/dual-list.module.ts b/src/dual-list/dual-list.module.ts
@@ -1,7 +1,10 @@
 import { CommonModule }         from '@angular/common';
 import { NgModule }             from '@angular/core';
 import { FormsModule }          from '@angular/forms';
-import { MdButtonModule }       from '@angular/material';
+import {
+    MdButtonModule,
+    MdIconModule,
+}                               from '@angular/material';
 
 import { ListGroupModule }      from '../list-group';
 import { DualListComponent }    from './dual-list.component';
@@ -11,6 +14,7 @@ import { DualListComponent }    from './dual-list.component';
         CommonModule,
         FormsModule,
         MdButtonModule,
+        MdIconModule,
         ListGroupModule,
     ],
     exports: [

diff --git a/src/header/app-header/app-header.component.html b/src/header/app-header/app-header.component.html
@@ -11,7 +11,7 @@
 
     <div class="expand-when-condensed" *ngIf="isCondensed" fxFlex="0 0 auto">
         <button type="button" md-icon-button [mdMenuTriggerFor]="expansion">
-            <md-icon fontSet="fa" fontIcon="fa-bars"></md-icon>
+            <md-icon>menu</md-icon>
             <span class="sr-only">Toggle Application Navigation</span>
         </button>
     </div>
@@ -26,7 +26,7 @@
         <input mdInput type="text" placeholder="Search" [(ngModel)]="searchText" />
     </md-input-container><!--
     --><button type="button" md-raised-button aria-label="Search" (click)="searchClicked.emit(searchText)">
-        <md-icon fontSet="fa" fontIcon="fa-search"></md-icon>
+        <md-icon>search</md-icon>
     </button>
 </ng-template>
 

diff --git a/src/header/cbp-header/cbp-header.component.html b/src/header/cbp-header/cbp-header.component.html
@@ -12,7 +12,7 @@
 
     <div class="feedback" *ngIf="!isCondensed && disableFeedback !== true" fxFlex="0 0 auto">
         <button type="button" md-button (click)="feedbackClicked.emit()">
-            <md-icon fontSet="fa" fontIcon="fa-comment"></md-icon>
+            <md-icon>comment</md-icon>
             <span>Feedback</span>
         </button>
     </div>
@@ -23,7 +23,7 @@
 
     <div class="expand-when-condensed" *ngIf="isCondensed" fxFlex="0 0 auto">
         <button type="button" md-icon-button [mdMenuTriggerFor]="expansion">
-            <md-icon fontSet="fa" fontIcon="fa-bars"></md-icon>
+            <md-icon>menu</md-icon>
             <span class="sr-only">Toggle Global Navigation</span>
         </button>
     </div>
@@ -42,7 +42,7 @@
         <ng-template [ngTemplateOutlet]="cbpMenu">
         </ng-template>
         <button type="button" md-menu-item *ngIf="disableFeedback !== true" (click)="feedbackClicked.emit()">
-            <md-icon fontSet="fa" fontIcon="fa-comment"></md-icon>
+            <md-icon>comment</md-icon>
             <span>Feedback</span>
         </button>
         <ng-template [ngTemplateOutlet]="userMenu">

diff --git a/src/header/header-menu/header-menu.component.html b/src/header/header-menu/header-menu.component.html
@@ -13,5 +13,5 @@
     <span>
         <ng-content></ng-content>
     </span>
-    <md-icon fontSet="fa" fontIcon="fa-caret-down"></md-icon>
+    <md-icon>arrow_drop_down</md-icon>
 </ng-template>
diff --git a/src/pagination/pagination.component.html b/src/pagination/pagination.component.html
@@ -7,7 +7,7 @@
             </button>
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu9">
                 <li role="presentation" class="dropdown-header">Show up to</li>
-                <li role="presentation" class="active" *ngFor="let limit of query.limits" [ngClass]="{ 'active': limit === query.limit }" >
+                <li role="presentation" class="active" *ngFor="let limit of query.limits" [ngClass]="{ 'active': limit === query.limit }">
                     <a role="menuitem" tabindex="-1" (click)="updateLimit(limit)">{{limit}} items</a>
                 </li>
             </ul>
@@ -16,9 +16,9 @@
     <div class="form-group">
         <div class="btn-group">
             <a class="btn btn-default" (click)="setPage(pager.currentPage - 1)">
-                <i class="fa fa-angle-left"></i>
+                <md-icon>chevron_left</md-icon>
             </a>
-            <a class="btn btn-default" (click)="setPage(1)" [ngClass]="{ 'active': pager.currentPage === 1 }" >1</a>
+            <a class="btn btn-default" (click)="setPage(1)" [ngClass]="{ 'active': pager.currentPage === 1 }">1</a>
             <a class="btn btn-default ellipsis" *ngIf="pager.pages && pager.pages.indexOf(2) === -1" href="javascript:void(0)">...</a>
             <a class="btn btn-default" *ngFor="let page of pager.pages" [ngClass]="{ 'active': pager.currentPage === page }" (click)="setPage(page)">
                 {{page}}
@@ -27,64 +27,20 @@
             <a class="btn btn-default" (click)="setPage(pager.totalPages)" [ngClass]="{ 'active': pager.currentPage === pager.totalPages }">
                 {{pager.totalPages}}
             </a>
-            <a class="btn btn-default"(click)="setPage(pager.currentPage + 1)">
-                <i class="fa fa-angle-right"></i>
+            <a class="btn btn-default" (click)="setPage(pager.currentPage + 1)">
+                <md-icon>chevron_right</md-icon>
             </a>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="input-group">
-        <div class="mdl-textfield mdl-js-textfield" style="width: 150px;">
-            <label class="mdl-textfield__label">15 out of 40</label>
-            <input type="text" class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?">
         </div>
-        <span class="input-group-btn">
-            <button class="btn btn-default" type="button">Go</button>
-        </span>
-    </div>
-</div>
-
-  <!-- <h3>Small</h3>
-  <div class="form-inline">
-    <div class="form-group dropdown">
-      <div class="btn-group">
-        <a href="#" class="btn btn-default">
-          <i class="fa fa-angle-left"></i>
-        </a>
-        <a class="btn btn-default dropdown-toggle" id="dropdownMenu6" data-toggle="dropdown" href="">
-          15/25 <span class="caret"></span>
-        </a>
-        <a href="#" class="btn btn-default">
-          <i class="fa fa-angle-right"></i>
-        </a>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu6">
-          <li class="divider"></li>
-          <li role="presentation" class="dropdown-header">Show up to</li>
-          <li role="presentation" class="active">
-            <a role="menuitem" tabindex="-1" href="#">10 items</a>
-          </li>
-          <li role="presentation">
-            <a role="menuitem" tabindex="-1" href="#">25 items</a>
-          </li>
-          <li role="presentation">
-            <a role="menuitem" tabindex="-1" href="#">50 items</a>
-          </li>
-          <li role="presentation">
-            <a role="menuitem" tabindex="-1" href="#">100 items</a>
-          </li>
-        </ul>
-      </div>
     </div>
     <div class="form-group">
-      <div class="input-group">
-        <div class="mdl-textfield mdl-js-textfield is-upgraded" style="width: 150px;" data-upgraded=",MaterialTextfield">
-          <label for="pagination999" class="mdl-textfield__label">15 out of 40</label>
-          <input id="pagination999" type="text" class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?">
+        <div class="input-group">
+            <div class="mdl-textfield mdl-js-textfield" style="width: 150px;">
+                <label class="mdl-textfield__label">15 out of 40</label>
+                <input type="text" class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?">
+            </div>
+            <span class="input-group-btn">
+                <button class="btn btn-default" type="button">Go</button>
+            </span>
         </div>
-        <span class="input-group-btn">
-          <button class="btn btn-default" type="button">Go</button>
-        </span>
-      </div>
     </div>
-  </div> -->
 </div>
diff --git a/src/pagination/pagination.module.ts b/src/pagination/pagination.module.ts
@@ -1,11 +1,13 @@
 import { CommonModule }         from '@angular/common';
 import { NgModule }             from '@angular/core';
+import { MdIconModule }         from '@angular/material';
 
 import { PaginationComponent }  from './pagination.component';
 
 @NgModule({
     imports: [
         CommonModule,
+        MdIconModule,
     ],
     exports: [
         PaginationComponent,

diff --git a/src/pay-period-calendar/pay-period-calendar.component.html b/src/pay-period-calendar/pay-period-calendar.component.html
@@ -2,7 +2,7 @@
     <div class="pay-period-calendar-nav">
         <div class="prev-month">
             <button type="button" md-icon-button [disabled]="isFirstMonthShown()" (click)="showPreviousMonth()">
-                <md-icon class="fa fa-chevron-circle-left"></md-icon>
+                <md-icon>chevron_left</md-icon>
                 <span class="sr-only">Previous Month</span>
             </button>
         </div><!--
@@ -18,7 +18,7 @@
         </div><!--
         --><div class="next-month">
             <button type="button" md-icon-button [disabled]="isLastMonthShown()" (click)="showNextMonth()">
-                <md-icon class="fa fa-chevron-circle-right"></md-icon>
+                <md-icon>chevron_right</md-icon>
                 <span class="sr-only">Next Month</span>
             </button>
         </div>

diff --git a/src/pay-period-calendar/pay-period-calendar.component.ts b/src/pay-period-calendar/pay-period-calendar.component.ts
@@ -102,17 +102,13 @@ export class PayPeriodCalendarComponent implements OnInit {
     private _initializeShownValues(): void {
         let startDateMoment = this.selectedPayPeriod == null ? moment() : moment(this.selectedPayPeriod.startDate);
         let year = startDateMoment.year();
-        let months = this._monthsByYear.get(year);
+        let monthNumber = startDateMoment.month() + 1;
+        let month = null;
 
-        if(months == null) {
-            startDateMoment = moment();
-            year = startDateMoment.year();
-            months = this._monthsByYear.get(year);
+        if(this._monthsByYear.has(year)) {
+            month = this._monthsByYear.get(year).find(m => monthNumber === m.number);
         }
 
-        let monthNumber = startDateMoment.month() + 1;
-        let month = months.find(m => monthNumber === m.number);
-
         if(month == null) {
             year = this.years[0];
             month = this._findFirstAvailableMonth(year);