feat(timepicker): replace glyphicons with custom icons (#2640)

valor-software · Sep 14, 2017 · cf3fdc8 · cf3fdc8
1 parent 13043fc
commit cf3fdc8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/timepicker/timepicker.component.html b/src/timepicker/timepicker.component.html
@@ -5,23 +5,23 @@
     <td>
       <a class="btn btn-link" [class.disabled]="!canIncrementHours"
          (click)="changeHours(hourStep)"
-      ><span class="glyphicon glyphicon-chevron-up"></span></a>
+      ><span class="bs-chevron bs-chevron-up"></span></a>
     </td>
     <!-- divider -->
     <td>&nbsp;&nbsp;&nbsp;</td>
     <!-- increment minutes button -->
     <td>
       <a class="btn btn-link" [class.disabled]="!canIncrementMinutes"
          (click)="changeMinutes(minuteStep)"
-      ><span class="glyphicon glyphicon-chevron-up"></span></a>
+      ><span class="bs-chevron bs-chevron-up"></span></a>
     </td>
     <!-- divider -->
     <td *ngIf="showSeconds">&nbsp;</td>
     <!-- increment seconds button -->
     <td *ngIf="showSeconds">
       <a class="btn btn-link" [class.disabled]="!canIncrementSeconds"
          (click)="changeSeconds(secondsStep)">
-        <span class="glyphicon glyphicon-chevron-up"></span>
+        <span class="bs-chevron bs-chevron-up"></span>
       </a>
     </td>
     <!-- space between -->
@@ -90,7 +90,7 @@
     <td>
       <a class="btn btn-link" [class.disabled]="!canDecrementHours"
          (click)="changeHours(-hourStep)">
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="bs-chevron bs-chevron-down"></span>
       </a>
     </td>
     <!-- divider -->
@@ -99,7 +99,7 @@
     <td>
       <a class="btn btn-link" [class.disabled]="!canDecrementMinutes"
          (click)="changeMinutes(-minuteStep)">
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="bs-chevron bs-chevron-down"></span>
       </a>
     </td>
     <!-- divider -->
@@ -108,7 +108,7 @@
     <td *ngIf="showSeconds">
       <a class="btn btn-link" [class.disabled]="!canDecrementSeconds"
          (click)="changeSeconds(-secondsStep)">
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="bs-chevron bs-chevron-down"></span>
       </a>
     </td>
     <!-- space between -->

diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts
@@ -8,7 +8,7 @@ import {
   Input,
   OnChanges,
   Output,
-  SimpleChanges
+  SimpleChanges, ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -39,7 +39,28 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = {
   selector: 'timepicker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore],
-  templateUrl: './timepicker.component.html'
+  templateUrl: './timepicker.component.html',
+  styles: [`
+    .bs-chevron{
+      border-style: solid;
+      display: block;
+      width: 9px;
+      height: 9px;
+      position: relative;
+      border-width: 3px 0px 0 3px;
+    }
+    .bs-chevron-up{
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+      top: 2px;
+    }
+    .bs-chevron-down{
+      -webkit-transform: rotate(-135deg);
+      transform: rotate(-135deg);
+      top: -2px;
+    }
+  `],
+  encapsulation: ViewEncapsulation.None
 })
 export class TimepickerComponent
   implements ControlValueAccessor,