From ef87944a34869fc7efaac9fa26100bcbe3466928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Sat, 12 May 2018 02:14:58 +0200
Subject: [PATCH] UX: show close date on automatically closed polls

---
 .../javascripts/widgets/discourse-poll.js.es6   | 17 ++++++++++++++++-
 .../poll/assets/stylesheets/common/poll.scss    |  4 ++++
 plugins/poll/config/locales/client.en.yml       |  1 +
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6 b/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
index 7b9ce4c774..f51c12e3ad 100644
--- a/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
+++ b/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
@@ -7,6 +7,7 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 import evenRound from "discourse/plugins/poll/lib/even-round";
 import { avatarFor } from 'discourse/widgets/post';
 import round from "discourse/lib/round";
+import { relativeAge } from 'discourse/lib/formatter';
 
 function optionHtml(option) {
   return new RawHtml({ html: `<span>${option.html}</span>` });
@@ -353,8 +354,12 @@ createWidget('discourse-poll-info', {
 
       if (poll.close) {
         const closeDate = moment.utc(poll.close);
+        const title = closeDate.format("LLL");
         const timeLeft = moment().to(closeDate.local(), true);
-        result.push(new RawHtml({ html: `<span class="info-text" title="${closeDate.format("LLL")}">${I18n.t("poll.automatic_close.closes_in", { timeLeft })}</span>` }));
+
+        result.push(new RawHtml({
+          html: `<span class="info-text" title="${title}">${I18n.t("poll.automatic_close.closes_in", { timeLeft })}</span>`
+        }));
       }
     }
 
@@ -404,6 +409,16 @@ createWidget('discourse-poll-buttons', {
       }));
     }
 
+    if (attrs.isAutomaticallyClosed) {
+      const closeDate = moment.utc(poll.get("close"));
+      const title = closeDate.format("LLL");
+      const age = relativeAge(closeDate.toDate(), { addAgo: true });
+
+      results.push(new RawHtml({
+        html: `<span class="info-text" title="${title}">${I18n.t("poll.automatic_close.age", { age })}</span>`
+      }));
+    }
+
     if (this.currentUser &&
         (this.currentUser.get("id") === post.get('user_id') ||
          this.currentUser.get("staff")) &&
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index ee7239fa9c..09460788e0 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -75,6 +75,10 @@ div.poll {
     button {
       float: none;
     }
+    .info-text {
+      margin: 0 5px;
+      color: $text-color;
+    }
   }
 
   .poll-voters-list {
diff --git a/plugins/poll/config/locales/client.en.yml b/plugins/poll/config/locales/client.en.yml
index 45479d33f7..7e03127b05 100644
--- a/plugins/poll/config/locales/client.en.yml
+++ b/plugins/poll/config/locales/client.en.yml
@@ -67,6 +67,7 @@ en:
 
       automatic_close:
         closes_in: "closes in <strong>%{timeLeft}</strong>"
+        age: "closed <strong>%{age}</strong>"
 
       error_while_toggling_status: "Sorry, there was an error toggling the status of this poll."
       error_while_casting_votes: "Sorry, there was an error casting your votes."