fix(time-picker): only emit change when full time when buttons hidden…

…, closing fix
tiaguinho · Aug 15, 2020 · 1843530 · 1843530
1 parent 20513b6
commit 1843530
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 45 deletions.
diff --git a/src/lib/timer-picker/timer-picker.component.html b/src/lib/timer-picker/timer-picker.component.html
@@ -14,21 +14,25 @@
   <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'">
-        {{ hour }}
-      </button>
-      <span class="mcc-timer-picker-separator"></span>
-      <button mat-icon-button class="mcc-timer-picker-minutes" [ngClass]="{ 'mcc-active': focus === 'min' }" (click)="focus = 'min'">
-        {{ minute }}
-      </button>
-
-      <div class="mcc-timer-picker-am-pm" *ngIf="format === '12'">
-        <button mat-icon-button [ngClass]="{ 'mcc-active': period === 'am' }" (click)="changePeriod('am')">
-          AM
+      <div class="mcc-timer-picker-header-clock">
+        <button mat-icon-button class="mcc-timer-picker-hours" [ngClass]="{ 'mcc-active': focus === 'hour' }"
+                (click)="focus = 'hour'">
+          {{ hour }}
         </button>
-        <button mat-icon-button [ngClass]="{ 'mcc-active': period === 'pm' }" (click)="changePeriod('pm')">
-          PM
+        <span class="mcc-timer-picker-separator">:</span>
+        <button mat-icon-button class="mcc-timer-picker-minutes" [ngClass]="{ 'mcc-active': focus === 'min' }"
+                (click)="focus = 'min'">
+          {{ minute }}
         </button>
+
+        <div class="mcc-timer-picker-am-pm" *ngIf="format === '12'">
+          <button mat-icon-button [ngClass]="{ 'mcc-active': period === 'am' }" (click)="changePeriod('am')">
+            AM
+          </button>
+          <button mat-icon-button [ngClass]="{ 'mcc-active': period === 'pm' }" (click)="changePeriod('pm')">
+            PM
+          </button>
+        </div>
       </div>
     </div>
 

diff --git a/src/lib/timer-picker/timer-picker.component.scss b/src/lib/timer-picker/timer-picker.component.scss
@@ -7,19 +7,23 @@ $transition: 200ms ease;
 .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)
+  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;
+  justify-content: center;
+  width: 100%;
+  padding: 4px 0;
+  box-sizing: border-box;
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
   background: $primary;
+  .mcc-timer-picker-header-clock {
+    display: flex;
+   align-items: center;
+  }
 }
 
 .mcc-timer-picker-hours,
@@ -41,7 +45,6 @@ $transition: 200ms ease;
 .mcc-timer-picker-24hours {
   width: 63px;
   height: 63px;
-  font-family: 'Roboto', sans-serif;
   font-size: 50px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
@@ -58,23 +61,16 @@ $transition: 200ms ease;
   font-size: 43px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.3);
-  margin: 5px 5px 0 0;
-
-  &::after {
-    content: ':';
-  }
 }
 
 .mcc-timer-picker-am-pm {
   display: flex;
   flex-direction: column;
-  margin: 10px;
 
   button {
     width: 25px;
     height: 25px;
     line-height: 25px;
-    font-family: 'Roboto', sans-serif;
     font-size: 12px;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.3);

diff --git a/src/lib/timer-picker/timer-picker.component.ts b/src/lib/timer-picker/timer-picker.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, ChangeDetectorRef } from '@angular/core';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Observable, BehaviorSubject } from 'rxjs';
@@ -75,6 +75,7 @@ export class MccTimerPickerComponent {
   }
   set isOpen(value: boolean) {
     this._isOpen = coerceBooleanProperty(value);
+    this.changeDetectorRef.detectChanges();
   }
   private _isOpen: boolean;
 
@@ -149,7 +150,7 @@ export class MccTimerPickerComponent {
    */
   connected: boolean = false;
 
-  constructor() {}
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   /**
    * Return timer option class to create line between the middle of the clock and
@@ -181,14 +182,13 @@ export class MccTimerPickerComponent {
   select(value: MccTimerPickerTimeValue) {
     if (this.focus === 'hour') {
       this._hour = <MccTimerPickerHour | MccTimerPicker24Hour>value;
-      setTimeout(() => (this.focus = 'min'), 250);
+      setTimeout(() => (this.focus = 'min'), 200);
     } else {
       this._minute = <MccTimerPickerMinute>value;
-    }
-
-    // if buttons are hidden, emit new event when value is changed
-    if (this._hideButtons) {
-      this.confirmSelectedTime();
+      // if buttons are hidden, emit new event when value is changed
+      if (this._hideButtons) {
+        this.confirmSelectedTime();
+      }
     }
   }
 
@@ -249,17 +249,17 @@ export class MccTimerPickerComponent {
   changePeriod(period: MccTimerPickerPeriod) {
     this._period = period;
     // if buttons are hidden, emit new event when value is changed
-    if (this._hideButtons) {
-      this.confirmSelectedTime();
-    }
   }
 
   /**
    * Update selected color, close the panel and notify the user
    */
   backdropClick() {
-    this.confirmSelectedTime();
-    this._isOpen = false;
+    if (this._hideButtons) {
+      this.confirmSelectedTime();
+    } else {
+      this.cancelSelection();
+    }
   }
 
   /**
@@ -269,11 +269,11 @@ export class MccTimerPickerComponent {
     this._hour = this._selectedHour;
     this._minute = this._selectedMinute;
     this._period = this._selectedPeriod;
-    this._isOpen = false;
+    this.isOpen = false;
   }
 
   /**
-   * Set new values of time and emit new event with the formated timer
+   * Set new values of time and emit new event with the formatted timer
    */
   confirmSelectedTime() {
     this._selectedHour = this.hour;
@@ -295,9 +295,6 @@ export class MccTimerPickerComponent {
 
     this.selected.emit(formated);
 
-    // only close automatically if button aren't hidden
-    if (!this._hideButtons) {
-      this._isOpen = false;
-    }
+    this.isOpen = false;
   }
 }