Added "now"-button feature to date-time-picker component

CHANGELOG.md

@@ -4,8 +4,12 @@
 
 ### Features
 
+* Added a "now"-button to the date-time-picker component for improved UX (GUIC-201)
+
 ### Fixes
 
+* Updated the Style of the clear-buttons in the date-time-picker and select component (GUIC-197)
+
 ## 6.4.0 (2018-11-22)
 
 ### Features

src/components/date-time-picker/date-time-picker.component.ts

@@ -7,7 +7,7 @@ import {ModalService} from '../modal/modal.service';
 import {DateTimePickerModal} from './date-time-picker-modal.component';
 import {DateTimePickerStrings} from './date-time-picker-strings';
 import {DateTimePickerFormatProvider} from './date-time-picker-format-provider.service';
-import {coerceToBoolean} from '../../common/coerce-to-boolean';
+import { coerceToBoolean } from '../../common/coerce-to-boolean';
 import * as momentjs from 'moment';
 
 export {DateTimePickerStrings};
@@ -47,6 +47,11 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
         this._clearable = coerceToBoolean(val);
     }
 
+    /** If true, the "now"-button will be displayed which allows the user to set the date to Date.now() without opening the calendar. */
+    @Input() set displayNow(val: any) {
+        this._displayNow = coerceToBoolean(val);
+    }
+
     /** Value to set on the ngModel when the DatePicker is cleared. */
     @Input() emptyValue: any = null;
 
@@ -89,7 +94,10 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
         this._displaySeconds = coerceToBoolean(val);
     }
 
-    /** Fires when the "okay" button is clicked to close the picker. */
+    /**
+     * Fires when the "okay" button is clicked to close the picker
+     * or when the "now"-button is clicked (when it is displayed).
+     */
     @Output() change = new EventEmitter<number|null>();
 
     /** Fires when the "clear" button is clicked on a clearable DateTimePicker. */
@@ -98,6 +106,7 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
     _clearable: boolean = false;
     _selectYear: boolean = false;
     _disabled: boolean = false;
+    _displayNow: boolean = false;
     displayValue: string = '';
     /** @internal */
     private value: momentjs.Moment;
@@ -224,4 +233,14 @@ export class DateTimePicker implements ControlValueAccessor, OnInit, OnDestroy {
         this.changeDetector.markForCheck();
     }
 
+    setTimeToNow(): void {
+        const timestamp = Math.trunc(momentjs.now() / 1000);
+        this.value = momentjs.unix(timestamp);
+        this.updateDisplayValue();
+
+        this.onChange(timestamp);
+        this.change.emit(timestamp);
+
+        this.changeDetector.markForCheck();
+    }
 }

src/components/date-time-picker/date-time-picker.scss

@@ -1,9 +1,10 @@
 gtx-date-time-picker > gtx-input > input:not(:disabled) {
-    &[type=text] {
+    &[type="text"] {
         color: inherit;
     }
 
-    &, & + label {
+    &,
+    & + label {
         cursor: pointer;
     }
 
@@ -21,30 +22,78 @@ gtx-date-time-picker > gtx-input > input:not(:disabled) {
 gtx-date-time-picker {
     display: flex;
     flex-direction: row;
+    flex-wrap: nowrap;
 
     gtx-input {
         flex: 1 1 auto;
 
-        &.clearable input[type=text] {
-            border-top-right-radius: 0px;
-            border-bottom-right-radius: 0px;
-            border-right-width: 1px;
+        &.has-after-button {
+            > input[type="text"] {
+                border-right-width: 1px;
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+            }
         }
     }
 
+    .after-button {
+        flex: 0 0 auto;
+        height: 40px;
+        padding: 0 6px;
+        display: block;
+        position: relative;
+        transition: 200ms;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        background: $gtx-color-very-light-gray;
+        color: $gtx-color-dark-gray;
+        border: 2px solid $gtx-color-light-gray;
+        border-right: none;
+        border-left-width: 1px;
+        margin: 20px 0;
+
+        &:last-child {
+            padding-left: 5px;
+            padding-right: 5px;
+            border-right: 2px solid $gtx-color-light-gray;
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+        }
+
+        &:disabled {
+            &,
+            &:hover,
+            &:focus {
+                background: $gtx-color-very-light-gray;
+                cursor: not-allowed;
+            }
+        }
+
+        icon {
+            display: block;
+        }
+    }
 
     .clear-button {
-        align-self: flex-start;
-        background: $gtx-color-very-light-gray;
-        border-top: 2px solid $gtx-color-light-gray;
-        border-right: 2px solid $gtx-color-light-gray;
-        border-bottom: 2px solid $gtx-color-light-gray;
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-        display: flex;
-        flex-direction: column;
-        height: 2.5rem;
-        justify-content: center;
-        margin-top: 20px;
+        &:not(:disabled) {
+            &:hover,
+            &:focus {
+                background: $gtx-color-alert;
+                border-color: $gtx-color-alert;
+                color: $gtx-color-off-white;
+            }
+        }
+    }
+
+    .now-button {
+        &:not(:disabled) {
+            &:hover,
+            &:focus {
+                background: $gtx-color-primary;
+                border-color: $gtx-color-primary;
+                color: $gtx-color-off-white;
+            }
+        }
     }
 }

src/components/date-time-picker/date-time-picker.tpl.html

@@ -1,17 +1,34 @@
-<gtx-input [value]="displayValue"
-           [label]="label"
-           (click)="!_disabled && showModal()"
-           (keydown)="handleEnterKey($event)"
-           (blur)="onTouched()"
-           [disabled]="_disabled"
-           readonly="true"
-           [class.clearable]="_clearable"></gtx-input>
-<gtx-button icon
-    class="clear-button"
-    *ngIf="_clearable"
-    type="secondary"
+<gtx-input
+    readonly="true"
+    [value]="displayValue"
+    [label]="label"
+    [disabled]="_disabled"
+    [class.has-after-button]="_clearable || _displayNow"
+    (click)="!_disabled && showModal()"
+    (keydown)="handleEnterKey($event)"
+    (blur)="onTouched()"
+></gtx-input>
+
+<button
+    *ngIf="_displayNow"
+    type="button"
+    role="button"
+    class="after-button now-button"
+    tabindex="0"
     [disabled]="_disabled"
-    (click)="!_disabled && clearDateTime()">
-    <icon>clear</icon>
-</gtx-button>
+    (click)="!_disabled && setTimeToNow()"
+>
+    <icon>today</icon>
+</button>
 
+<button
+    *ngIf="_clearable"
+    type="button"
+    role="button"
+    class="after-button clear-button"
+    tabindex="0"
+    [disabled]="_disabled"
+    (click)="!_disabled && clearDateTime()"
+>
+    <icon>close</icon>
+</button>

src/components/select/select.scss

@@ -1,8 +1,8 @@
 gtx-select {
-    display:  flex;
+    display: flex;
     position: relative;
     margin: 0 0 20px 0;
-
+    flex-wrap: nowrap;
 
     gtx-dropdown-list {
         display: block;
@@ -40,7 +40,6 @@ gtx-select {
 }
 
 gtx-dropdown-content {
-
     ul.select-options {
         margin: 0;
 
@@ -83,7 +82,9 @@ gtx-dropdown-content {
                 outline-width: 0;
             }
 
-            &:hover, &.active, &.selected {
+            &:hover,
+            &.active,
+            &.selected {
                 background-color: $dropdown-hover-bg-color;
             }
 
@@ -125,16 +126,47 @@ gtx-dropdown-list {
 }
 
 .clear-button {
-    align-self: flex-start;
+    flex: 0 0 auto;
+    height: 40px;
+    padding: 0 5px;
+    display: block;
+    position: relative;
+    transition: 200ms;
+    cursor: pointer;
+    user-select: none;
+    border: none;
     background: $gtx-color-very-light-gray;
-    border-top: 2px solid $gtx-color-light-gray;
-    border-right: 2px solid $gtx-color-light-gray;
-    border-bottom: 2px solid $gtx-color-light-gray;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    height: 2.5rem;
-    justify-content: center;
-    margin-top: 20px;
+    color: $gtx-color-dark-gray;
+    border: 2px solid $gtx-color-light-gray;
+    border-right: none;
+    border-left-width: 1px;
+    margin: 20px 0 0 0;
+
+    &:last-child {
+        border-right: 2px solid $gtx-color-light-gray;
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+    }
+
+    &:not([disabled]) {
+        &:hover,
+        &:focus {
+            background: $gtx-color-alert;
+            border-color: $gtx-color-alert;
+            color: $gtx-color-off-white;
+        }
+    }
+
+    &[disabled] {
+        &,
+        &:hover,
+        &:focus {
+            background: $gtx-color-very-light-gray;
+            cursor: not-allowed;
+        }
+    }
+
+    icon {
+        display: block;
+    }
 }

src/components/select/select.tpl.html

@@ -39,11 +39,14 @@
 
 </gtx-dropdown-list>
 
-<gtx-button icon
-        class="clear-button"
-        *ngIf="_clearable"
-        type="secondary"
-        [disabled]="_disabled"
-        (click)="!_disabled && clearSelection()">
-        <icon>clear</icon>
-</gtx-button>
+<button
+    *ngIf="_clearable"
+    type="button"
+    role="button"
+    class="clear-button"
+    tabindex="0"
+    [disabled]="_disabled"
+    (click)="!_disabled && clearSelection()"
+>
+    <icon>close</icon>
+</button>

src/docs/pages/date-time-picker-demo/date-time-picker-demo.tpl.html

@@ -38,6 +38,48 @@ <h4>Demos</h4>
     </div>
 </gtx-demo-block>
 
+<gtx-demo-block demoTitle="Date And Time with Now Option">
+    <div class="demo-result">
+        <gtx-date-time-picker [(ngModel)]="timestamp" data-no-label="Pick a time" displayNow></gtx-date-time-picker>
+        timestamp: <code>{{ timestamp | json }}</code>
+    </div>
+    <div class="demo-code">
+        <gtx-highlighted-code language="HTML" code='
+                <gtx-date-time-picker [(ngModel)]="timestamp" label="Pick a date" displayNow>
+                </gtx-date-time-picker>
+                timestamp: <code>(( timestamp | json ))</code>
+        '></gtx-highlighted-code>
+    </div>
+</gtx-demo-block>
+
+<gtx-demo-block demoTitle="Date And Time with Clear and Now Option">
+    <div class="demo-result">
+        <gtx-date-time-picker [(ngModel)]="timestamp" data-no-label="Pick a time" displayNow clearable></gtx-date-time-picker>
+        timestamp: <code>{{ timestamp | json }}</code>
+    </div>
+    <div class="demo-code">
+        <gtx-highlighted-code language="HTML" code='
+                <gtx-date-time-picker [(ngModel)]="timestamp" label="Pick a date" displayNow clearable>
+                </gtx-date-time-picker>
+                timestamp: <code>(( timestamp | json ))</code>
+        '></gtx-highlighted-code>
+    </div>
+</gtx-demo-block>
+
+<gtx-demo-block demoTitle="Disabled Date And Time with Clear and Now Option">
+    <div class="demo-result">
+        <gtx-date-time-picker [(ngModel)]="timestamp" data-no-label="Pick a time" disabled displayNow clearable></gtx-date-time-picker>
+        timestamp: <code>{{ timestamp | json }}</code>
+    </div>
+    <div class="demo-code">
+        <gtx-highlighted-code language="HTML" code='
+                <gtx-date-time-picker [(ngModel)]="timestamp" label="Pick a date" disabled displayNow clearable>
+                </gtx-date-time-picker>
+                timestamp: <code>(( timestamp | json ))</code>
+        '></gtx-highlighted-code>
+    </div>
+</gtx-demo-block>
+
 <gtx-demo-block demoTitle="Date Only">
     <div class="demo-result">
         <gtx-date-time-picker [(ngModel)]="timestamp" label="Pick a date" displayTime="false"></gtx-date-time-picker>