UX: improves change-timestamp modal datepicker (#7771)

discourse · Jun 24, 2019 · 7cabc47 · 7cabc47
1 parent 2cc5561
commit 7cabc47
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 27 deletions.
diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6
@@ -5,6 +5,8 @@ import {
   on
 } from "ember-addons/ember-computed-decorators";
 
+const DATE_FORMAT = "YYYY-MM-DD";
+
 export default Ember.Component.extend({
   classNames: ["date-picker-wrapper"],
   _picker: null,
@@ -17,23 +19,22 @@ export default Ember.Component.extend({
 
   @on("didInsertElement")
   _loadDatePicker() {
-    const container = this.element.querySelector(`#${this.containerId}`);
-
     if (this.site.mobileView) {
-      this._loadNativePicker(container);
+      this._loadNativePicker();
     } else {
+      const container = document.getElementById(this.containerId);
       this._loadPikadayPicker(container);
     }
   },
 
   _loadPikadayPicker(container) {
     loadScript("/javascripts/pikaday.js").then(() => {
       Ember.run.next(() => {
-        const default_opts = {
+        const options = {
           field: this.element.querySelector(".date-picker"),
-          container: container || this.element,
+          container: container || null,
           bound: container === null,
-          format: "YYYY-MM-DD",
+          format: DATE_FORMAT,
           firstDay: 1,
           i18n: {
             previousMonth: I18n.t("dates.previous_month"),
@@ -45,14 +46,13 @@ export default Ember.Component.extend({
           onSelect: date => this._handleSelection(date)
         };
 
-        this._picker = new Pikaday(Object.assign(default_opts, this._opts()));
+        this._picker = new Pikaday(Object.assign(options, this._opts()));
       });
     });
   },
 
-  _loadNativePicker(container) {
-    const wrapper = container || this.element;
-    const picker = wrapper.querySelector("input.date-picker");
+  _loadNativePicker() {
+    const picker = this.element.querySelector("input.date-picker");
     picker.onchange = () => this._handleSelection(picker.value);
     picker.hide = () => {
       /* do nothing for native */
@@ -64,12 +64,10 @@ export default Ember.Component.extend({
   },
 
   _handleSelection(value) {
-    const formattedDate = moment(value).format("YYYY-MM-DD");
+    const formattedDate = moment(value).format(DATE_FORMAT);
 
     if (!this.element || this.isDestroying || this.isDestroyed) return;
 
-    this._picker && this._picker.hide();
-
     if (this.onSelect) {
       this.onSelect(formattedDate);
     }
@@ -79,8 +77,8 @@ export default Ember.Component.extend({
   _destroy() {
     if (this._picker) {
       this._picker.destroy();
+      this._picker = null;
     }
-    this._picker = null;
   },
 
   @computed()

diff --git a/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs b/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs
@@ -8,13 +8,21 @@
   </p>
 
   <form>
-    {{date-picker-past value=date containerId="date-container"}}
+    {{date-picker-past
+      value=(unbound date)
+      containerId="date-container"
+      onSelect=(action (mut date))}}
+
     {{input type="time" value=time}}
   </form>
 
-  <div id="date-container" />
+  <div id="date-container"></div>
 {{/d-modal-body}}
 
 <div class="modal-footer change-timestamp-footer">
-  <button class="btn btn-primary" disabled={{buttonDisabled}} {{action "changeTimestamp"}}>{{buttonTitle}}</button>
+  {{d-button
+    class="btn-primary"
+    disabled=buttonDisabled
+    action=(action "changeTimestamp")
+    translatedLabel=buttonTitle}}
 </div>
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
@@ -426,13 +426,35 @@
 }
 
 .modal .modal-body.change-timestamp {
-  overflow-y: scroll;
+  #date-container {
+    .pika-single {
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+    }
+  }
 
   form {
     display: flex;
 
+    .date-picker-wrapper,
+    input[type="time"] {
+      width: 50%;
+    }
+
+    .date-picker-wrapper {
+      display: flex;
+      flex: 1;
+
+      .date-picker {
+        flex: 1;
+      }
+    }
+
     input.date-picker,
     input[type="time"] {
+      text-align: left;
       margin: 0;
     }
   }
@@ -453,10 +475,6 @@
   .date-picker-wrapper {
     min-width: 130px;
     margin-right: 0.5em;
-
-    .date-picker {
-      height: 100%;
-    }
   }
 
   input[type="time"] {

diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
@@ -99,8 +99,3 @@
 .modal-inner-container {
   margin-bottom: 20px;
 }
-
-.change-timestamp-footer .btn-primary {
-  float: right;
-  margin-right: 5px;
-}