(core) Formatting date time editor

Summary: Formatting date and datetime editor. Changing styles for Timezone, DateFormat and TimeFormat section.

Test Plan: Existing tests

Reviewers: georgegevoian, dsagal

Reviewed By: georgegevoian, dsagal

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D2899

app/client/widgets/DateTextBox.js

@@ -8,7 +8,10 @@ var AbstractWidget = require('./AbstractWidget');
 
 const {fromKoSave} = require('app/client/lib/fromKoSave');
 const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
-const {cssRow} = require('app/client/ui/RightPanel');
+const {cssRow, cssLabel} = require('app/client/ui/RightPanel');
+const {cssTextInput} = require("app/client/ui2018/editableLabel");
+const {styled, fromKo} = require('grainjs');
+const {select} = require('app/client/ui2018/menus');
 
 /**
  * DateTextBox - The most basic widget for displaying simple date information.
@@ -54,13 +57,10 @@ _.extend(DateTextBox.prototype, AbstractWidget.prototype);
 DateTextBox.prototype.buildDateConfigDom = function() {
   var self = this;
   return dom('div',
-    kf.row(
+    cssLabel("Date Format"),
-      1, dom('div.glyphicon.glyphicon-calendar.config_icon'),
+    cssRow(dom(select(fromKo(self.standardDateFormat), self.dateFormatOptions), dom.testId("Widget_dateFormat"))),
-      8, kf.label('Date Format'),
-      9, dom(kf.select(self.standardDateFormat, self.dateFormatOptions), dom.testId("Widget_dateFormat"))
-    ),
     kd.maybe(self.isCustomDateFormat, function() {
-      return dom(kf.text(self.dateFormat), dom.testId("Widget_dateCustomFormat"));
+      return cssRow(dom(textbox(self.dateFormat), dom.testId("Widget_dateCustomFormat")));
     })
   );
 };
@@ -86,4 +86,33 @@ DateTextBox.prototype.buildDom = function(row) {
   );
 };
 
+// clean up old koform styles
+const cssClean = styled('div', `
+  flex: 1;
+  margin: 0px;
+`)
+
+// override focus - to look like modern ui
+const cssFocus = styled('div', `
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 3px 2px var(--grist-color-cursor);
+    border: 1px solid transparent;
+  }
+`)
+
+// helper method to create old style textbox that looks like a new one
+function textbox(value) {
+  const textDom = kf.text(value);
+  const tzInput = textDom.querySelector('input');
+  dom(tzInput,
+    kd.cssClass(cssTextInput.className),
+    kd.cssClass(cssFocus.className)
+  );
+  dom(textDom,
+    kd.cssClass(cssClean.className)
+  );
+  return textDom;
+}
+
 module.exports = DateTextBox;

app/client/widgets/DateTimeTextBox.js

@@ -12,7 +12,11 @@ var gutil = require('app/common/gutil');
 const {fromKoSave} = require('app/client/lib/fromKoSave');
 const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
 const {testId} = require('app/client/ui2018/cssVars');
-const {cssRow} = require('app/client/ui/RightPanel');
+const {cssRow, cssLabel} = require('app/client/ui/RightPanel');
+const {cssTextInput} = require("app/client/ui2018/editableLabel");
+const {styled, fromKo} = require('grainjs');
+const {select} = require('app/client/ui2018/menus');
+
 
 /**
  * DateTimeTextBox - The most basic widget for displaying date and time information.
@@ -77,12 +81,16 @@ DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
   var self = this;
 
   // Set up autocomplete for the timezone entry.
-  var textDom = kf.text(self.timezone);
+  var textDom = textbox(self.timezone);
   var tzInput = textDom.querySelector('input');
   $(tzInput).autocomplete({
     source: self.timezoneOptions,
+    classes : {
+      "ui-autocomplete": cssAutocomplete.className
+    },
     minLength: 1,
     delay: 10,
+    position : { my: "left top", at: "left bottom+4" },
     select: function(event, ui) {
       self.timezone(ui.item.value);
       return false;
@@ -90,22 +98,24 @@ DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
   });
 
   return dom('div',
-    kf.row(
+    cssLabel("Timezone"),
-      1, dom('div.glyphicon.glyphicon-globe.config_icon'),
+    cssRow(
-      8, kf.label('Timezone'),
+      dom(textDom,
-      9, dom(textDom,
         kd.toggleClass('invalid-text', this.isInvalidTimezone),
         dom.testId("Widget_tz"),
-        testId('widget-tz'))
+        dom.on('keydown', (e) => {
+          switch (e.keyCode) {
+            case 13: $(tzInput).autocomplete('close'); break;
+          }
+        }),
+        testId('widget-tz')
+      )
     ),
     self.buildDateConfigDom(),
-    kf.row(
+    cssLabel("Time Format"),
-      1, dom('div.glyphicon.glyphicon-dashboard.config_icon'),
+    cssRow(dom(select(fromKo(self.standardTimeFormat), self.timeFormatOptions), dom.testId("Widget_timeFormat"))),
-      8, kf.label('Time Format'),
-      9, dom(kf.select(self.standardTimeFormat, self.timeFormatOptions), dom.testId("Widget_timeFormat"))
-    ),
     kd.maybe(self.isCustomTimeFormat, function() {
-      return dom(kf.text(self.timeFormat), dom.testId("Widget_timeCustomFormat"));
+      return cssRow(dom(textbox(self.timeFormat), dom.testId("Widget_timeCustomFormat")));
     }),
     isTransformConfig ? null : cssRow(
       alignmentSelect(fromKoSave(this.alignment))
@@ -117,4 +127,63 @@ DateTimeTextBox.prototype.buildTransformConfigDom = function() {
   return this.buildConfigDom(true);
 };
 
+// clean up old koform styles
+const cssClean = styled('div', `
+  flex: 1;
+  margin: 0px;
+`)
+
+// override focus - to look like modern ui
+const cssFocus = styled('div', `
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 3px 2px #5e9ed6;
+    border: 1px solid transparent;
+  }
+`)
+
+// override styles for jquery auto-complete - to make it look like weasel select menu
+const cssAutocomplete = styled('ui', `
+  min-width: 208px;
+  font-family: var(--grist-font-family);
+  font-size: var(--grist-medium-font-size);
+  line-height: initial;
+  max-width: 400px;
+  border: 0px !important;
+  max-height: 500px;
+  overflow-y: auto;
+  margin-top: 3px;
+  padding: 8px 0px 16px 0px;
+  box-shadow: 0 2px 20px 0 rgb(38 38 51 / 60%);
+  & li {
+    padding: 8px 16px;
+  }
+  & li:hover {
+    background: #5AC09C;
+  }
+  & li div {
+    border: 0px !important;
+    margin: 0px !important;
+  }
+  & li:hover div {
+    background: transparent !important;
+    color: white !important;
+  }
+`)
+
+
+// helper method to create old style textbox that looks like a new one
+function textbox(value) {
+  const textDom = kf.text(value);
+  const tzInput = textDom.querySelector('input');
+  dom(tzInput,
+    kd.cssClass(cssTextInput.className),
+    kd.cssClass(cssFocus.className)
+  );
+  dom(textDom,
+    kd.cssClass(cssClean.className)
+  );
+  return textDom;
+}
+
 module.exports = DateTimeTextBox;