From ebc3811bed3fc45f2d762f0acf33521175750c91 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@phacility.com>
Date: Mon, 27 Jul 2015 20:47:23 -0700
Subject: [PATCH] Cleaner Countdown widget UI

Summary: Adds the launch date, normalize spacing a bit.

Test Plan:
Test a normal and embeded countdowns.

{F670199}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D13740
---
 resources/celerity/map.php                    |  4 +--
 .../view/PhabricatorCountdownView.php         | 11 ++++++++
 .../rsrc/css/application/countdown/timer.css  | 28 +++++++++++++++----
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 4511ce3cb9..a107f206e4 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -54,7 +54,7 @@ return array(
     'rsrc/css/application/conpherence/update.css' => 'faf6be09',
     'rsrc/css/application/conpherence/widget-pane.css' => '419fd50c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
-    'rsrc/css/application/countdown/timer.css' => '3791bb38',
+    'rsrc/css/application/countdown/timer.css' => '3d1355ec',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
     'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
@@ -722,7 +722,7 @@ return array(
     'phabricator-chatlog-css' => 'd295b020',
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'a76cefc9',
-    'phabricator-countdown-css' => '3791bb38',
+    'phabricator-countdown-css' => '3d1355ec',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '07de8873',
     'phabricator-draggable-list' => 'a16ec1c6',
diff --git a/src/applications/countdown/view/PhabricatorCountdownView.php b/src/applications/countdown/view/PhabricatorCountdownView.php
index 7ede4ef887..2e8f1dedb3 100644
--- a/src/applications/countdown/view/PhabricatorCountdownView.php
+++ b/src/applications/countdown/view/PhabricatorCountdownView.php
@@ -56,6 +56,16 @@ final class PhabricatorCountdownView extends AphrontTagView {
       javelin_tag('td', array('sigil' => 'phabricator-timer-seconds'), '-'),
     );
 
+    $epoch = $countdown->getEpoch();
+    $launch_date = phabricator_datetime($epoch, $this->getUser());
+    $foot = phutil_tag(
+      'td',
+      array(
+        'colspan' => '4',
+        'class' => 'phabricator-timer-foot',
+      ),
+      $launch_date);
+
     $container = celerity_generate_unique_node_id();
     $content = phutil_tag(
       'div',
@@ -65,6 +75,7 @@ final class PhabricatorCountdownView extends AphrontTagView {
         phutil_tag('table', array('class' => 'phabricator-timer-table'), array(
           phutil_tag('tr', array(), $ths),
           phutil_tag('tr', array(), $dashes),
+          phutil_tag('tr', array(), $foot),
         )),
       ));
 
diff --git a/webroot/rsrc/css/application/countdown/timer.css b/webroot/rsrc/css/application/countdown/timer.css
index acc5e61fc0..f9f6450892 100644
--- a/webroot/rsrc/css/application/countdown/timer.css
+++ b/webroot/rsrc/css/application/countdown/timer.css
@@ -24,23 +24,26 @@
 }
 
 .phabricator-timer-header {
-  font-size: {$biggerfontsize};
   font-weight: bold;
-  padding: 4px 8px;
+  padding: 8px;
   background: {$bluebackground};
   border-radius: 3px 3px 0 0;
-  border-bottom: 1px solid {$lightblueborder};
+}
+
+.phabricator-timer-header a {
+  color: {$darkbluetext};
+  font-weight: normal;
 }
 
 .phabricator-timer-table {
   width: 100%;
-  margin: 8px 0;
+  margin: 8px 0 0 0;
 }
 
 .phabricator-timer-table th {
   text-align: center;
   font-size: {$biggerfontsize};
-  color: {$greytext};
+  color: {$bluetext};
   width: 10%;
   padding: 4px;
 }
@@ -49,10 +52,23 @@
   padding: 4px;
   text-align: center;
   font-size: 36px;
+  font-weight: bold;
   overflow: hidden;
   line-height: auto;
   height: auto;
-  line-height: 36px;
+  line-height: 44px;
+}
+
+.phabricator-timer-table td.phabricator-timer-foot {
+  font-size: {$normalfontsize};
+  line-height: 16px;
+  border-top: 1px solid {$thinblueborder};
+  color: {$bluetext};
+  font-weight: normal;
+  padding: 8px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  text-align: center;
 }
 
 .phabricator-timer-table small {