Touch up Chatlog Design / Mobile

Summary: Updated Chatlog to work on mobile, minor style updates.

Test Plan: Tested mobile, Chrome.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -2878,7 +2878,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-chatlog-css' =>
   array(
-    'uri' => '/res/f6631adc/rsrc/css/application/chatlog/chatlog.css',
+    'uri' => '/res/b5600765/rsrc/css/application/chatlog/chatlog.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/chatlog/controller/PhabricatorChatLogChannelListController.php

@@ -11,43 +11,16 @@ final class PhabricatorChatLogChannelListController
                 ->setViewer($user)
                 ->execute();
 
-    $rows = array();
+    $list = new PhabricatorObjectItemListView();
     foreach ($channels as $channel) {
-      $rows[] = array(
-        phutil_tag(
-          'a',
-          array(
-            'href' =>
-                 '/chatlog/channel/'.$channel->getID().'/',
-          ),
-          $channel->getChannelName()),
-          $channel->getServiceName(),
-          $channel->getServiceType());
+        $item = id(new PhabricatorObjectItemView())
+          ->setHeader($channel->getChannelName())
+          ->setHref('/chatlog/channel/'.$channel->getID().'/')
+          ->addAttribute($channel->getServiceName())
+          ->addAttribute($channel->getServiceType());
+        $list->addItem($item);
     }
 
-    $table = new AphrontTableView($rows);
-    $table->setHeaders(
-      array(
-        pht('Channel'),
-        pht('Service Name'),
-        pht('Service Type'),
-      ));
-    $table->setColumnClasses(
-      array(
-        '',
-        '',
-        '',
-      ));
-
-    $title = pht('Channel List');
-
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($title);
-
-    $panel = id(new AphrontPanelView())
-            ->appendChild($table)
-            ->setNoBackground(true);
-
     $crumbs = $this
       ->buildApplicationCrumbs()
       ->addCrumb(
@@ -55,14 +28,15 @@ final class PhabricatorChatLogChannelListController
           ->setName(pht('Channel List'))
           ->setHref($this->getApplicationURI()));
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
-        $panel,
+        $list,
       ),
       array(
         'title' => pht('Channel List'),
+        'device' => true,
+        'dust' => true,
       ));
   }
 }

src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php

@@ -107,27 +107,36 @@ final class PhabricatorChatLogChannelLogController
       $author = phutil_utf8_shorten($author, 18);
       $author = phutil_tag('td', array('class' => 'author'), $author);
 
-      $message = mpull($block['logs'], 'getMessage');
-      $message = implode("\n", $message);
-      $message = phutil_tag('td', array('class' => 'message'), $message);
-
       $href = $uri->alter('at', $block['id']);
       $timestamp = $block['epoch'];
       $timestamp = phabricator_datetime($timestamp, $user);
-      $timestamp = phutil_tag('a', array('href' => $href), $timestamp);
       $timestamp = phutil_tag(
-        'td',
-        array(
-          'class' => 'timestamp',
-        ),
+        'a',
+          array(
+            'href' => $href,
+            'class' => 'timestamp'
+          ),
         $timestamp);
 
+      $message = mpull($block['logs'], 'getMessage');
+      $message = implode("\n", $message);
+      $message = phutil_tag(
+        'td',
+          array(
+            'class' => 'message'
+          ),
+          array(
+            $timestamp,
+            $message));
+
       $out[] = phutil_tag(
         'tr',
         array(
           'class' => $block['class'],
         ),
-        array($author, $message, $timestamp));
+        array(
+          $author,
+          $message));
     }
 
     $crumbs = $this
@@ -141,6 +150,7 @@ final class PhabricatorChatLogChannelLogController
       ->setUser($user)
       ->setMethod('GET')
       ->setAction($uri)
+      ->setNoShading(true)
       ->appendChild(
         id(new AphrontFormTextControl())
           ->setLabel(pht('Date'))
@@ -150,18 +160,41 @@ final class PhabricatorChatLogChannelLogController
         id(new AphrontFormSubmitControl())
           ->setValue(pht('Jump')));
 
+    $filter = new AphrontListFilterView();
+    $filter->appendChild($form);
 
-    return $this->buildStandardPageResponse(
+    $table = phutil_tag(
+      'table',
+        array(
+          'class' => 'phabricator-chat-log'
+        ),
+      $out);
+
+    $log = phutil_tag(
+      'div',
+        array(
+          'class' => 'phabricator-chat-log-panel'
+        ),
+        $table);
+
+    $content = phutil_tag(
+      'div',
+        array(
+          'class' => 'phabricator-chat-log-wrap'
+        ),
+        $log);
+
+    return $this->buildApplicationPage(
       array(
         $crumbs,
-        hsprintf(
-          '<div class="phabricator-chat-log-panel">%s<br />%s%s</div>',
-          $form->render(),
-          phutil_tag('table', array('class' => 'phabricator-chat-log'), $out),
-          $pager->render()),
+        $filter,
+        $content,
+        $pager,
       ),
       array(
         'title' => pht('Channel Log'),
+        'device' => true,
+        'dust' => true,
       ));
   }
 

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

@@ -2,19 +2,30 @@
  * @provides phabricator-chatlog-css
  */
 
+.phabricator-chat-log-wrap {
+  padding: 0 20px;
+}
+
+.device-phone .phabricator-chat-log-wrap {
+  padding: 0;
+}
+
 .phabricator-chat-log-panel {
-  margin: 1em auto;
-  width: 80em;
+  margin: 20px auto;
+  border-left: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
+  border-bottom: 1px solid #c0c5d1;
 }
 
 .phabricator-chat-log {
-  font-size: 12px;
   width: 100%;
-  border: 1px solid #bbbbbb;
+  border: 1px solid #e7e7e7;
+  box-shadow: 0 1px 1px rgba(0,0,0,.2);
 }
 
 .phabricator-chat-log td {
-  padding: 4px 8px;
+  padding: 8px;
+  line-height: 18px;
 }
 
 .phabricator-chat-log tr {
@@ -22,15 +33,16 @@
 }
 
 .phabricator-chat-log tr td.author {
-  background: #dfdfdf;
+  background: #e7e7ee;
 }
 
 .phabricator-chat-log tr.alternate {
-  background: #e9e9e9;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #e7e7e7;
 }
 
 .phabricator-chat-log tr.alternate td.author {
-  background: #d9d9d9;
+  background: #dfdfe6;
 }
 
 .phabricator-chat-log tr.highlight td {
@@ -47,19 +59,24 @@
   width: 12em;
 }
 
-.phabricator-chat-log td.timestamp a {
-  color: #555555;
+.phabricator-chat-log td.message .timestamp {
+  color: #a1a5a9;
   font-size: 11px;
+  float: right;
 }
 
 .phabricator-chat-log td.author {
   white-space: nowrap;
   text-align: right;
   font-weight: bold;
-  width: 12em;
+  width: 140px;
   color: #555555;
 }
 
+.device-phone .phabricator-chat-log td.author {
+  width: 80px;
+}
+
 .phabricator-chat-log td.message {
   white-space: pre-wrap;
 }