From af1d1db3da0063381ee8b4155ef2cb9c2ba34cf7 Mon Sep 17 00:00:00 2001
From: Maja Komel <maja.komel@gmail.com>
Date: Wed, 18 Jul 2018 23:27:12 +0200
Subject: [PATCH] UX: use future date input instead of date picker on feature
 topic modal (#6096)

---
 .../components/future-date-input.js.es6       |  5 +----
 .../components/edit-topic-timer-form.hbs      |  3 +++
 .../templates/modal/feature-topic.hbs         | 20 +++++++++++++++----
 .../common/base/topic-admin-menu.scss         |  5 +++++
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/future-date-input.js.es6 b/app/assets/javascripts/discourse/components/future-date-input.js.es6
index e34cda35992..6f3a4251eb2 100644
--- a/app/assets/javascripts/discourse/components/future-date-input.js.es6
+++ b/app/assets/javascripts/discourse/components/future-date-input.js.es6
@@ -70,10 +70,7 @@ export default Ember.Component.extend({
   },
 
   didReceiveAttrs() {
-    this.set(
-      "displayLabel",
-      I18n.t(this.get("label") || "topic.topic_status_update.when")
-    );
+    if (this.get("label")) this.set("displayLabel", I18n.t(this.get("label")));
   },
 
   @computed(
diff --git a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
index 52f618fec96..6fe586b226a 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
@@ -7,6 +7,7 @@
     {{#if showTimeOnly}}
       {{future-date-input
           input=topicTimer.updateTime
+          label="topic.topic_status_update.when"
           statusType=selection
           includeWeekend=true
           basedOnLastPost=topicTimer.based_on_last_post}}
@@ -20,6 +21,7 @@
 
       {{future-date-input
           input=topicTimer.updateTime
+          label="topic.topic_status_update.when"
           statusType=selection
           includeWeekend=true
           categoryId=topicTimer.category_id
@@ -27,6 +29,7 @@
     {{else if autoClose}}
       {{future-date-input
           input=topicTimer.updateTime
+          label="topic.topic_status_update.when"
           statusType=selection
           includeWeekend=true
           basedOnLastPost=topicTimer.based_on_last_post
diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
index 0b173d7deb5..ca3b8ea1ac2 100644
--- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
@@ -41,14 +41,20 @@
             {{{pinMessage}}}
           </p>
           <p class="with-validation">
-            {{date-picker-future value=model.pinnedInCategoryUntil}}
+            {{future-date-input
+              class="pin-until"
+              includeFarFuture=true
+              input=model.pinnedInCategoryUntil}}
             {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
           </p>
         {{else}}
           <p class="with-validation">
             {{{pinMessage}}}
             {{d-icon "clock-o"}}
-            {{date-picker-future value=model.pinnedInCategoryUntil}}
+            {{future-date-input
+              class="pin-until"
+              includeFarFuture=true
+              input=model.pinnedInCategoryUntil}}
             {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
           </p>
         {{/if}}
@@ -77,14 +83,20 @@
             {{i18n "topic.feature_topic.pin_globally"}}
           </p>
           <p class="with-validation">
-            {{date-picker-future value=model.pinnedGloballyUntil}}
+            {{future-date-input
+              class="pin-until"
+              includeFarFuture=true
+              input=model.pinnedGloballyUntil}}
             {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
           </p>
         {{else}}
           <p class="with-validation">
             {{i18n "topic.feature_topic.pin_globally"}}
             {{d-icon "clock-o"}}
-            {{date-picker-future value=model.pinnedGloballyUntil}}
+            {{future-date-input
+              class="pin-until"
+              includeFarFuture=true
+              input=model.pinnedGloballyUntil}}
             {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
           </p>
         {{/if}}
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 568a05884e2..3ddd5bbb599 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -73,6 +73,11 @@
   .modal-inner-container {
     min-width: 700px;
   }
+
+  .pin-until {
+    position: relative;
+    display: inline-block;
+  }
 }
 
 .mobile-view .feature-topic .feature-section {