From 4bbebc06cf4aa27672e1b7b828ca3499dc7274db Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 13 Apr 2013 07:50:34 -0700 Subject: [PATCH] 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 | 2 +- ...habricatorChatLogChannelListController.php | 48 ++++---------- ...PhabricatorChatLogChannelLogController.php | 65 ++++++++++++++----- .../rsrc/css/application/chatlog/chatlog.css | 39 +++++++---- 4 files changed, 89 insertions(+), 65 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index cfaea7fab7..5520a1d9e6 100644 --- a/src/__celerity_resource_map__.php +++ b/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( diff --git a/src/applications/chatlog/controller/PhabricatorChatLogChannelListController.php b/src/applications/chatlog/controller/PhabricatorChatLogChannelListController.php index a33cdd6450..c67a6fe32f 100644 --- a/src/applications/chatlog/controller/PhabricatorChatLogChannelListController.php +++ b/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, )); } } diff --git a/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php b/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php index 5629f88029..c31642c3bb 100644 --- a/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php +++ b/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( - '
%s
%s%s
', - $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, )); } diff --git a/webroot/rsrc/css/application/chatlog/chatlog.css b/webroot/rsrc/css/application/chatlog/chatlog.css index c9a94e20d4..fd46b141cc 100644 --- a/webroot/rsrc/css/application/chatlog/chatlog.css +++ b/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; }