From 00db0aac2df5e793a42abfca0e2955b340d46880 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Thu, 23 May 2019 22:23:58 +0200
Subject: [PATCH] Improved datetime editor.

---
 .../types/date-time-validation.component.html |  2 +-
 .../forms/date-time-editor.component.html     | 21 ++++++++-------
 .../forms/date-time-editor.component.scss     | 26 ++++++++++---------
 src/Squidex/package-lock.json                 | 12 ++++-----
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html b/src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html
index 0651ae035..7731d7f9a 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html
@@ -28,7 +28,7 @@
 
     <ng-container *ngIf="showDefaultValues | async">
         <div class="form-group row">
-            <label class="col-3 col-form-label">Default Mode:</label>
+            <label class="col-3 col-form-label">Default Mode</label>
 
             <div class="col-3">
                 <select class="form-control" formControlName="calculatedDefaultValue">
diff --git a/src/Squidex/app/framework/angular/forms/date-time-editor.component.html b/src/Squidex/app/framework/angular/forms/date-time-editor.component.html
index f22e455e0..e43d2f08d 100644
--- a/src/Squidex/app/framework/angular/forms/date-time-editor.component.html
+++ b/src/Squidex/app/framework/angular/forms/date-time-editor.component.html
@@ -1,19 +1,20 @@
 <div>
     <div class="form-inline">
-        <div class="form-group date-group">
-            <input type="text" class="form-control" [formControl]="dateControl" (blur)="callTouched()" #dateInput />
-        </div>
-        <div class="form-group time-group" *ngIf="showTime">
-            <input type="text" class="form-control" [formControl]="timeControl" (blur)="callTouched()" />
+        <div class="form-group mr-1">
+            <div class="input-group">
+                <input type="text" class="form-control" [formControl]="dateControl" placeholder="Date" (blur)="callTouched()" #dateInput />
+                <input type="text" class="form-control" [formControl]="timeControl" placeholder="Time" (blur)="callTouched()" *ngIf="showTime" />
+            </div>
+
+            <button type="button" class="btn btn-text-secondary btn-sm btn-clear" [class.hidden]="!hasValue" [disabled]="snapshot.isDisabled" (click)="reset()" *ngIf="!hideClear">
+                <i class="icon-close"></i>
+            </button>
         </div>
         <div class="form-group" *ngIf="showTime">
-            <button type="button" class="btn btn-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()">Now (UTC)</button>
+            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Now (UTC)">Now</button>
         </div>
         <div class="form-group" *ngIf="!showTime">
-            <button type="button" class="btn btn-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()">Today (UTC)</button>
-        </div>
-        <div class="form-group" [class.hidden]="!hasValue" *ngIf="!hideClear">
-            <button type="button" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="reset()">Clear</button>
+            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Today (UTC)">Today</button>
         </div>
     </div>
 </div>
diff --git a/src/Squidex/app/framework/angular/forms/date-time-editor.component.scss b/src/Squidex/app/framework/angular/forms/date-time-editor.component.scss
index 8b1f4bd02..ea14cb1a8 100644
--- a/src/Squidex/app/framework/angular/forms/date-time-editor.component.scss
+++ b/src/Squidex/app/framework/angular/forms/date-time-editor.component.scss
@@ -16,26 +16,28 @@
     }
 }
 
-.date-group {
-    & {
-        padding-right: .25rem;
-    }
+.form-group {
+    position: relative;
+}
 
+.input-group {
     .form-control {
         width: 7.5rem;
+
+        &:last-child {
+            width: 9rem;
+            position: relative;
+            padding-right: 2rem;
+        }
     }
 }
 
-.time-group {
+.btn-clear {
     & {
-        padding-right: .25rem;
+        @include absolute(auto, 4px, 3px, auto);
     }
 
-    .form-control {
-        width: 7.5rem;
+    &:focus {
+        @include box-shadow-none;
     }
-}
-
-.clear {
-    margin-left: .5rem;
 }
\ No newline at end of file
diff --git a/src/Squidex/package-lock.json b/src/Squidex/package-lock.json
index 5a68cd957..3051cf82b 100644
--- a/src/Squidex/package-lock.json
+++ b/src/Squidex/package-lock.json
@@ -2741,7 +2741,7 @@
       "dependencies": {
         "jsesc": {
           "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
           "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
           "dev": true
         },
@@ -4184,7 +4184,7 @@
         },
         "json5": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
           "dev": true,
           "requires": {
@@ -10669,7 +10669,7 @@
     },
     "node-fetch": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
+      "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
       "integrity": "sha1-q4hOjn5X44qUR1POxwb3iNF2i7U="
     },
     "node-forge": {
@@ -11086,7 +11086,7 @@
     },
     "onetime": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
       "dev": true
     },
@@ -15326,7 +15326,7 @@
       "dependencies": {
         "json5": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
           "dev": true,
           "requires": {
@@ -18609,7 +18609,7 @@
     },
     "whatwg-fetch": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+      "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
       "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
     },
     "which": {