[Redesign] Rebuild Chatlog

Summary: Ref T8099. I use this app daily, so 30 minutes of love is good enough for me.

Test Plan:
Tested with a fake chat.

{F443522}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D13046

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '651054ed',
+    'core.pkg.css' => '0df8c6bf',
     'core.pkg.js' => 'e4f47dfd',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -39,7 +39,7 @@ return array(
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '214e2510',
     'rsrc/css/application/base/standard-page-view.css' => '43045fb4',
     'rsrc/css/application/calendar/calendar-icon.css' => '98ce946d',
-    'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
+    'rsrc/css/application/chatlog/chatlog.css' => 'f1971c1c',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
@@ -140,7 +140,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33e54618',
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
-    'rsrc/css/phui/phui-object-box.css' => '57b5b612',
+    'rsrc/css/phui/phui-object-box.css' => '8eacbeed',
     'rsrc/css/phui/phui-object-item-list-view.css' => '24ed8d94',
     'rsrc/css/phui/phui-pinboard-view.css' => '55b27bc3',
     'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb',
@@ -697,7 +697,7 @@ return array(
     'phabricator-action-list-view-css' => '32c388b3',
     'phabricator-application-launch-view-css' => '214e2510',
     'phabricator-busy' => '59a7976a',
-    'phabricator-chatlog-css' => '852140ff',
+    'phabricator-chatlog-css' => 'f1971c1c',
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'bbc7187b',
     'phabricator-countdown-css' => '86b7b0a0',
@@ -774,7 +774,7 @@ return array(
     'phui-info-view-css' => '33e54618',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => 'e448b6ba',
-    'phui-object-box-css' => '57b5b612',
+    'phui-object-box-css' => '8eacbeed',
     'phui-object-item-list-view-css' => '24ed8d94',
     'phui-pinboard-view-css' => '55b27bc3',
     'phui-property-list-view-css' => '1baf23eb',

src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php

@@ -179,11 +179,6 @@ final class PhabricatorChatLogChannelLogController
         pht('Older')." \xE2\x80\xBA");
     }
 
-    $pager_top = phutil_tag(
-      'div',
-      array('class' => 'phabricator-chat-log-pager-top'),
-      $links);
-
     $pager_bottom = phutil_tag(
       'div',
       array('class' => 'phabricator-chat-log-pager-bottom'),
@@ -206,9 +201,6 @@ final class PhabricatorChatLogChannelLogController
         id(new AphrontFormSubmitControl())
           ->setValue(pht('Jump')));
 
-    $filter = new AphrontListFilterView();
-    $filter->appendChild($form);
-
     $table = phutil_tag(
       'table',
         array(
@@ -223,19 +215,11 @@ final class PhabricatorChatLogChannelLogController
         ),
         $table);
 
-    $jump_link = phutil_tag(
+    $jump_link = id(new PHUIButtonView())
-      'a',
+      ->setTag('a')
-        array(
+      ->setHref('#latest')
-          'href' => '#latest',
+      ->setText(pht('Jump to Bottom'))
-        ),
+      ->setIconFont('fa-arrow-circle-down');
-        pht('Jump to Bottom')." \xE2\x96\xBE");
-
-    $jump = phutil_tag(
-      'div',
-        array(
-          'class' => 'phabricator-chat-log-jump',
-        ),
-        $jump_link);
 
     $jump_target = phutil_tag(
       'div',
@@ -249,18 +233,31 @@ final class PhabricatorChatLogChannelLogController
           'class' => 'phabricator-chat-log-wrap',
         ),
         array(
-          $jump,
-          $pager_top,
           $log,
           $jump_target,
           $pager_bottom,
         ));
 
+    $header = id(new PHUIHeaderView())
+      ->setHeader($channel->getChannelName())
+      ->setSubHeader($channel->getServiceName())
+      ->addActionLink($jump_link);
+
+    $box = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->setCollapsed(true)
+      ->appendChild($content);
+
+    $box->setShowHide(
+      pht('Search Dates'),
+      pht('Hide Dates'),
+      $form,
+      '#');
+
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $filter,
+        $box,
-        $content,
       ),
       array(
         'title' => pht('Channel Log'),

webroot/rsrc/css/application/chatlog/chatlog.css

@@ -2,40 +2,22 @@
  * @provides phabricator-chatlog-css
  */
 
-.phabricator-chat-log-wrap {
-  padding: 0 16px;
-}
-
 .device-phone .phabricator-chat-log-wrap {
   padding: 0;
 }
 
-.phabricator-chat-log-pager-top {
-  padding: 16px 4px 8px;
-  font-weight: bold;
-  float: right;
-}
-
 .phabricator-chat-log-pager-bottom {
   padding: 8px 4px 16px;
   font-weight: bold;
   float: right;
 }
 
-.phabricator-chat-log-pager-top a, .phabricator-chat-log-pager-bottom a {
+.phabricator-chat-log-pager-bottom a {
   padding: 2px 3px;
 }
 
-.phabricator-chat-log-jump {
-  padding: 16px 4px 8px;
-  font-weight: bold;
-  float: left;
-}
-
 .phabricator-chat-log-panel {
   clear: both;
-  border: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$blueborder};
 }
 
 .phabricator-chat-log {

webroot/rsrc/css/phui/phui-object-box.css

@@ -96,6 +96,10 @@ div.phui-object-box.phui-object-box-flush {
   margin-bottom: 4px;
 }
 
+.phui-object-box.phui-object-box-collapsed .phui-object-box-hidden-content {
+  margin: 0;
+}
+
 /* - Double Object Box Override --------------------------------------------- */
 
 .phui-object-box .phui-object-box {