From ff4fa1885b4e423f9733d34b0580b0578e3c0004 Mon Sep 17 00:00:00 2001 From: Asher Baker Date: Thu, 10 Oct 2013 04:49:04 -0700 Subject: [PATCH] Improve pagination in ChatLog application Summary: - Add an extra paginator at the top. - Add a link to jump to the bottom (where the latest messages are). - Align paginators with edge of content rather than the page. Test Plan: Looked at the chatlog. Reviewers: epriestley, chad, #blessed_reviewers CC: chad, Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7280 --- src/__celerity_resource_map__.php | 2 +- ...PhabricatorChatLogChannelLogController.php | 71 ++++++++++++++++++- src/view/control/AphrontCursorPagerView.php | 68 ++++++++++++++---- .../rsrc/css/application/chatlog/chatlog.css | 24 ++++++- 4 files changed, 148 insertions(+), 17 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index ded8d2387b..15e7f5c57c 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3066,7 +3066,7 @@ celerity_register_resource_map(array( ), 'phabricator-chatlog-css' => array( - 'uri' => '/res/5542e247/rsrc/css/application/chatlog/chatlog.css', + 'uri' => '/res/cf9b0aa7/rsrc/css/application/chatlog/chatlog.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php b/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php index f668726df5..07d414264a 100644 --- a/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php +++ b/src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php @@ -139,6 +139,48 @@ final class PhabricatorChatLogChannelLogController $message)); } + $links = array(); + + $first_uri = $pager->getFirstPageURI(); + if ($first_uri) { + $links[] = phutil_tag( + 'a', + array( + 'href' => $first_uri, + ), + "\xC2\xAB ". pht("Newest")); + } + + $prev_uri = $pager->getPrevPageURI(); + if ($prev_uri) { + $links[] = phutil_tag( + 'a', + array( + 'href' => $prev_uri, + ), + "\xE2\x80\xB9 " . pht("Newer")); + } + + $next_uri = $pager->getNextPageURI(); + if ($next_uri) { + $links[] = phutil_tag( + 'a', + array( + 'href' => $next_uri, + ), + 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'), + $links); + $crumbs = $this ->buildApplicationCrumbs() ->addCrumb( @@ -176,19 +218,44 @@ final class PhabricatorChatLogChannelLogController ), $table); + $jump_link = phutil_tag( + 'a', + array( + 'href' => '#latest' + ), + pht("Jump to Bottom") . " \xE2\x96\xBE"); + + $jump = phutil_tag( + 'div', + array( + 'class' => 'phabricator-chat-log-jump' + ), + $jump_link); + + $jump_target = phutil_tag( + 'div', + array( + 'id' => 'latest' + )); + $content = phutil_tag( 'div', array( 'class' => 'phabricator-chat-log-wrap' ), - $log); + array( + $jump, + $pager_top, + $log, + $jump_target, + $pager_bottom, + )); return $this->buildApplicationPage( array( $crumbs, $filter, $content, - $pager, ), array( 'title' => pht('Channel Log'), diff --git a/src/view/control/AphrontCursorPagerView.php b/src/view/control/AphrontCursorPagerView.php index e1c474190a..1cc2dc8472 100644 --- a/src/view/control/AphrontCursorPagerView.php +++ b/src/view/control/AphrontCursorPagerView.php @@ -86,6 +86,51 @@ final class AphrontCursorPagerView extends AphrontView { ($this->beforeID && $this->moreResults); } + public function getFirstPageURI() { + if (!$this->uri) { + throw new Exception( + pht("You must call setURI() before you can call getFirstPageURI().")); + } + + if (!$this->afterID && !($this->beforeID && $this->moreResults)) { + return null; + } + + return $this->uri + ->alter('before', null) + ->alter('after', null); + } + + public function getPrevPageURI() { + if (!$this->uri) { + throw new Exception( + pht("You must call setURI() before you can call getPrevPageURI().")); + } + + if (!$this->prevPageID) { + return null; + } + + return $this->uri + ->alter('after', null) + ->alter('before', $this->prevPageID); + } + + public function getNextPageURI() { + if (!$this->uri) { + throw new Exception( + pht("You must call setURI() before you can call getNextPageURI().")); + } + + if (!$this->nextPageID) { + return null; + } + + return $this->uri + ->alter('after', $this->nextPageID) + ->alter('before', null); + } + public function render() { if (!$this->uri) { throw new Exception( @@ -94,37 +139,34 @@ final class AphrontCursorPagerView extends AphrontView { $links = array(); - if ($this->afterID || ($this->beforeID && $this->moreResults)) { + $first_uri = $this->getFirstPageURI(); + if ($first_uri) { $links[] = phutil_tag( 'a', array( - 'href' => $this->uri - ->alter('before', null) - ->alter('after', null), + 'href' => $first_uri, ), "\xC2\xAB ". pht("First")); } - if ($this->prevPageID) { + $prev_uri = $this->getPrevPageURI(); + if ($prev_uri) { $links[] = phutil_tag( 'a', array( - 'href' => $this->uri - ->alter('after', null) - ->alter('before', $this->prevPageID), + 'href' => $prev_uri, ), "\xE2\x80\xB9 " . pht("Prev")); } - if ($this->nextPageID) { + $next_uri = $this->getNextPageURI(); + if ($next_uri) { $links[] = phutil_tag( 'a', array( - 'href' => $this->uri - ->alter('after', $this->nextPageID) - ->alter('before', null), + 'href' => $next_uri, ), - "Next \xE2\x80\xBA"); + pht("Next") . " \xE2\x80\xBA"); } return phutil_tag( diff --git a/webroot/rsrc/css/application/chatlog/chatlog.css b/webroot/rsrc/css/application/chatlog/chatlog.css index 1da7fce697..9b0b5bc2d8 100644 --- a/webroot/rsrc/css/application/chatlog/chatlog.css +++ b/webroot/rsrc/css/application/chatlog/chatlog.css @@ -10,8 +10,30 @@ 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 { + padding: 2px 3px; +} + +.phabricator-chat-log-jump { + padding: 16px 4px 8px; + font-weight: bold; + float: left; +} + .phabricator-chat-log-panel { - margin: 20px auto; + clear: both; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; border-bottom: 1px solid #c0c5d1;