fix(color-picker): use Roboto in color-picker,fix border-radius and e…

…levations,'' as EMPTY_COLOR
tiaguinho · Aug 15, 2020 · 7176bc4 · 7176bc4
1 parent e6529a1
commit 7176bc4
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 50 deletions.
diff --git a/src/demo-app/app/color-picker/color-picker.module.ts b/src/demo-app/app/color-picker/color-picker.module.ts
@@ -30,7 +30,7 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api';
     MatTabsModule,
     MccColorPickerModule.forRoot({
       used_colors: ['#000000', '#123456', '#777666'],
-      empty_color: null
+      empty_color: ''
     })
   ],
   declarations: [ColorPickerComponent, ColorPickerApiComponent, ColorPickerExamplesComponent]

diff --git a/src/lib/color-picker/color-picker-selector.component.scss b/src/lib/color-picker/color-picker-selector.component.scss
@@ -60,12 +60,12 @@ canvas {
   font-weight: bold;
 
   &.black {
-    color: #100214 !important;
+    color: rgba(0,0,0,0.87) !important;
     label.mat-form-field-label {
-      color: #100214 !important;
+      color: rgba(0,0,0,0.87) !important;
     }
     .mat-form-field-underline {
-      background-color: #100214 !important;
+      background-color: rgba(0,0,0,0.87) !important;
     }
   }
   &.white {

diff --git a/src/lib/color-picker/color-picker.component.html b/src/lib/color-picker/color-picker.component.html
@@ -28,7 +28,7 @@
 
 <!-- color picker component content -->
 <ng-template cdkPortal #overlayPanel="cdkPortal">
-  <div class="mcc-color-picker-overlay mat-elevation-z6" [ngClass]="{ 'alpha-enabled': alpha }" role="dialog" aria-label="Color picker">
+  <div class="mcc-color-picker-overlay mat-elevation-z4" [ngClass]="{ 'alpha-enabled': alpha }" role="dialog" aria-label="Color picker">
     <mcc-color-picker-selector
       *ngIf="!hideColorPickerSelector"
       [selectedColor]="tmpSelectedColor$ | async"
@@ -68,6 +68,8 @@
     </ng-container>
 
     <div *ngIf="!hideButtons" class="mcc-color-picker-actions">
+
+      <div style="flex: 1 auto;"></div>
       <button mat-button role="button" aria-label="Cancel" (click)="cancelSelection()">
         {{ btnCancelLabel }}
       </button>

diff --git a/src/lib/color-picker/color-picker.component.scss b/src/lib/color-picker/color-picker.component.scss
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
-
 .btn-picker {
   width: 25px;
   height: 25px;
@@ -25,7 +23,7 @@
   flex-direction: column;
   padding: 0;
   background: #ffffff;
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
   &.alpha-enabled {
     width: 316px;
   }
@@ -52,12 +50,7 @@
   border-top: 1px #dddddd solid;
 
   button {
-    color: #100214;
     text-transform: uppercase;
-    font-family: 'Open Sans', sans-serif;
-    font-size: 12px;
-    font-weight: 400;
-    flex-grow: 1;
   }
 }
 

diff --git a/src/lib/timer-picker/timer-picker.component.html b/src/lib/timer-picker/timer-picker.component.html
@@ -11,7 +11,7 @@
 <ng-template *ngIf="!connected" [cdkPortalOutlet]="panelComponent"></ng-template>
 
 <ng-template cdkPortal #panelComponent="cdkPortal">
-  <div class="mcc-timer-picker-overlay mat-elevation-z6" role="dialog" aria-label="Timer picker">
+  <div class="mcc-timer-picker-overlay mat-elevation-z4" role="dialog" aria-label="Timer picker">
 
     <div class="mcc-timer-picker-header mat-primary">
       <button mat-icon-button class="mcc-timer-picker-hours" [ngClass]="{ 'mcc-active': focus === 'hour' }" (click)="focus = 'hour'">
@@ -59,16 +59,14 @@
 
     </div>
 
-    <div *ngIf="!hideButtons" class="mcc-timer-picker-actions" dir="rtl">
-
-      <button mat-button role="button" aria-label="Confirm" (click)="confirmSelectedTime()">
-        {{ btnConfirm }}
-      </button>
-
+    <div *ngIf="!hideButtons" class="mcc-timer-picker-actions">
+      <div style="flex: 1 auto;"></div>
       <button mat-button role="button" aria-label="Cancel" (click)="cancelSelection()">
         {{ btnCancel }}
       </button>
-
+      <button mat-button role="button" aria-label="Confirm" (click)="confirmSelectedTime()">
+        {{ btnConfirm }}
+      </button>
     </div>
 
   </div>

diff --git a/src/lib/timer-picker/timer-picker.component.scss b/src/lib/timer-picker/timer-picker.component.scss
@@ -1,25 +1,29 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
-
 $primary: #00796b;
 
+$border-radius: 4px;
+
 .mcc-timer-picker-overlay {
+  font-family: 'Roboto', sans-serif;
   width: 290px;
   height: 400px;
+  border-radius: $border-radius;
+  background-color: #ffffff // TODO: use theme background color (support dark theme)
 }
 
 .mcc-timer-picker-header {
   display: flex;
   width: 220px;
   height: 65px;
   padding: 10px 0 5px 70px;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
   background: $primary;
 }
 
 .mcc-timer-picker-hours,
 .mcc-timer-picker-minutes {
   width: 63px;
   height: 63px;
-  font-family: 'Roboto', sans-serif;
   font-size: 50px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
@@ -49,7 +53,6 @@ $primary: #00796b;
 }
 
 .mcc-timer-picker-separator {
-  font-family: 'Roboto', sans-serif;
   font-size: 43px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
@@ -84,7 +87,6 @@ $primary: #00796b;
   width: inherit;
   height: 260px;
   padding: 15px 0 5px 0;
-  background-color: #ffffff;
 }
 
 .mcc-timer-picker-clock {
@@ -303,14 +305,9 @@ $primary: #00796b;
 .mcc-timer-picker-actions {
   display: flex;
   padding: 4px;
-  background-color: #ffffff;
 
   button {
-    color: #100214;
     text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    font-weight: 400;
   }
 }
 

diff --git a/src/lib/timer-picker/timer-picker.component.ts b/src/lib/timer-picker/timer-picker.component.ts
@@ -17,7 +17,7 @@ import {
   MccTimerPickerPeriod,
   HOURS,
   HOURS24,
-  MINUTES,
+  MINUTES, MccTimerPickerTimeValue,
 } from './timer-picker';
 
 @Component({
@@ -46,15 +46,15 @@ export class MccTimerPickerComponent {
   /**
    * Current value (hour/minute) to create the clock
    */
-  get clock$(): Observable<string[]> {
+  get clock$(): Observable<MccTimerPickerTimeValue[]> {
     return this._clock.asObservable();
   }
-  private _clock: BehaviorSubject<string[]> = new BehaviorSubject(HOURS);
+  private _clock: BehaviorSubject<MccTimerPickerTimeValue[]> = new BehaviorSubject(HOURS);
 
   /**
    * Return hours in 24h format
    */
-  get hours24(): string[] {
+  get hours24(): MccTimerPicker24Hour[] {
     return HOURS24;
   }
 
@@ -136,7 +136,7 @@ export class MccTimerPickerComponent {
   /**
    * Change btnConfirm label
    */
-  @Input() btnConfirm: string = 'Ok';
+  @Input() btnConfirm: string = 'Confirm';
 
   /**
    * Event emited when confirm button is pressed.
@@ -182,11 +182,10 @@ export class MccTimerPickerComponent {
 
   /**
    * Select option from the clock.
-   * @param value MccTimerPickerHour | MccTimerPickerMinute
    */
-  select(value: MccTimerPickerHour | MccTimerPickerMinute): void {
+  select(value: MccTimerPickerTimeValue) {
     if (this.focus === 'hour') {
-      this._hour = <MccTimerPickerHour>value;
+      this._hour = <MccTimerPickerHour | MccTimerPicker24Hour>value;
       this.focus = 'min';
     } else {
       this._minute = <MccTimerPickerMinute>value;
@@ -200,7 +199,6 @@ export class MccTimerPickerComponent {
 
   /**
    * Returns array containing time, hour and period fragments from time string
-   * @param time string
    */
   parseTimeInput(time: string): [number, number, string] {
     const parsed = time.split(/\s|:/).map((fragment, index) => {
@@ -223,9 +221,8 @@ export class MccTimerPickerComponent {
 
   /**
    * Returns true if option value is not valid
-   * @param value MccTimerPickerHour | MccTimerPickerMinute
    */
-  isOptionDisabled(value: MccTimerPickerHour | MccTimerPickerMinute): boolean {
+  isOptionDisabled(value: MccTimerPickerTimeValue): boolean {
 
     const [minHour, minMinutes, minPeriod] = this.parseTimeInput(this.min);
     const [maxHour, maxMinutes, maxPeriod] = this.parseTimeInput(this.max);
@@ -255,7 +252,7 @@ export class MccTimerPickerComponent {
    * Change period of the clock
    * @param period MccTimerPickerPeriod
    */
-  changePeriod(period: MccTimerPickerPeriod): void {
+  changePeriod(period: MccTimerPickerPeriod) {
     this._period = period;
     // if buttons are hidden, emit new event when value is changed
     if (this._hideButtons) {
@@ -266,15 +263,15 @@ export class MccTimerPickerComponent {
   /**
    * Update selected color, close the panel and notify the user
    */
-  backdropClick(): void {
+  backdropClick() {
     this.confirmSelectedTime();
     this._isOpen = false;
   }
 
   /**
    * Change values to last confirm select time
    */
-  cancelSelection(): void {
+  cancelSelection() {
     this._hour = this._selectedHour;
     this._minute = this._selectedMinute;
     this._period = this._selectedPeriod;
@@ -284,7 +281,7 @@ export class MccTimerPickerComponent {
   /**
    * Set new values of time and emit new event with the formated timer
    */
-  confirmSelectedTime(): void {
+  confirmSelectedTime() {
     this._selectedHour = this.hour;
     this._selectedMinute = this.minute;
     this._selectedPeriod = this.period;
@@ -296,7 +293,7 @@ export class MccTimerPickerComponent {
     } else {
       let hour: string = this.hour;
       if (this.period === 'pm') {
-        hour = `${parseInt(hour) + 12}`;
+        hour = `${parseInt(hour, 10) + 12}`;
       }
 
       formated = `${hour}:${this.minute}`;

diff --git a/src/lib/timer-picker/timer-picker.ts b/src/lib/timer-picker/timer-picker.ts
@@ -43,6 +43,9 @@ export type MccTimerPickerMinute =
   | '50'
   | '55';
 
+
+export type MccTimerPickerTimeValue = MccTimerPickerHour | MccTimerPicker24Hour | MccTimerPickerMinute;
+
 /**
  * format 12 return hours with 'am' or 'pm'. Examples:
  * 12:00 am
@@ -65,9 +68,9 @@ export type MccTimerPickerTimeType = 'hour' | 'min';
 /**
  * contants to create timer with HOURS or MINUTES
  */
-export const HOURS: string[] = ['12', '11', '1', '10', '2', '9', '3', '8', '4', '7', '5', '6'];
-export const HOURS24: string[] = ['00', '23', '13', '22', '14', '21', '15', '20', '16', '19', '17', '18'];
-export const MINUTES: string[] = [
+export const HOURS: MccTimerPickerHour [] = ['12', '11', '1', '10', '2', '9', '3', '8', '4', '7', '5', '6'];
+export const HOURS24: MccTimerPicker24Hour[] = ['00', '23', '13', '22', '14', '21', '15', '20', '16', '19', '17', '18'];
+export const MINUTES: MccTimerPickerMinute[] = [
   '00',
   '55',
   '05',