[Redesign] PHUIPagerView

Summary: Ref T8099, Moves AphrontPagerView to PHUIPagerView, converts to standard PHUIButtons and adds some additional features for icon placement on buttons.

Test Plan: Tested Advanced Search and Searching files in Diffusion. Works as expected.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8342, T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '63bd9495',
+    'core.pkg.css' => 'd9223b5d',
     'core.pkg.js' => 'fbf1d615',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'f89b49b6',
@@ -23,7 +23,6 @@ return array(
     'rsrc/css/aphront/list-filter-view.css' => 'aa5ffcb9',
     'rsrc/css/aphront/multi-column.css' => 'fd18389d',
     'rsrc/css/aphront/notification.css' => '9c279160',
-    'rsrc/css/aphront/pager-view.css' => '2e3539af',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => '0ecd30a1',
     'rsrc/css/aphront/table-view.css' => '4f2ed0bf',
@@ -126,7 +125,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '32c388b3',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
-    'rsrc/css/phui/phui-button.css' => 'b995182d',
+    'rsrc/css/phui/phui-button.css' => '0d395b42',
     'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2',
     'rsrc/css/phui/phui-document.css' => '08f33f08',
     'rsrc/css/phui/phui-feed-story.css' => '153a2ebf',
@@ -141,6 +140,7 @@ return array(
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
     'rsrc/css/phui/phui-object-box.css' => '6f449f57',
     'rsrc/css/phui/phui-object-item-list-view.css' => '29ded459',
+    'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -480,7 +480,6 @@ return array(
     'aphront-dialog-view-css' => '8ea1b9cc',
     'aphront-list-filter-view-css' => 'aa5ffcb9',
     'aphront-multi-column-view-css' => 'fd18389d',
-    'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '4f2ed0bf',
     'aphront-tokenizer-control-css' => '04875312',
@@ -755,7 +754,7 @@ return array(
     'phriction-document-css' => 'd1861e06',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => 'a5bb366d',
-    'phui-button-css' => 'b995182d',
+    'phui-button-css' => '0d395b42',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
@@ -776,6 +775,7 @@ return array(
     'phui-list-view-css' => 'e448b6ba',
     'phui-object-box-css' => '6f449f57',
     'phui-object-item-list-view-css' => '29ded459',
+    'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-property-list-view-css' => '1baf23eb',
     'phui-remarkup-preview-css' => '19ad512b',
@@ -2041,7 +2041,7 @@ return array(
       'aphront-list-filter-view-css',
       'phabricator-remarkup-css',
       'syntax-highlighting-css',
-      'aphront-pager-view-css',
+      'phui-pager-css',
       'aphront-tooltip-css',
       'phabricator-flag-css',
       'phui-info-view-css',

resources/celerity/packages.php

@@ -96,7 +96,7 @@ return array(
 
     'phabricator-remarkup-css',
     'syntax-highlighting-css',
-    'aphront-pager-view-css',
+    'phui-pager-css',
     'aphront-tooltip-css',
     'phabricator-flag-css',
     'phui-info-view-css',

src/__phutil_library_map__.php

@@ -148,7 +148,6 @@ phutil_register_library_map(array(
     'AphrontNullView' => 'view/AphrontNullView.php',
     'AphrontPHPHTTPSink' => 'aphront/sink/AphrontPHPHTTPSink.php',
     'AphrontPageView' => 'view/page/AphrontPageView.php',
-    'AphrontPagerView' => 'view/control/AphrontPagerView.php',
     'AphrontPlainTextResponse' => 'aphront/response/AphrontPlainTextResponse.php',
     'AphrontProgressBarView' => 'view/widget/bars/AphrontProgressBarView.php',
     'AphrontProxyResponse' => 'aphront/response/AphrontProxyResponse.php',
@@ -1210,6 +1209,7 @@ phutil_register_library_map(array(
     'PHUIObjectItemListView' => 'view/phui/PHUIObjectItemListView.php',
     'PHUIObjectItemView' => 'view/phui/PHUIObjectItemView.php',
     'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php',
+    'PHUIPagerView' => 'view/phui/PHUIPagerView.php',
     'PHUIPinboardItemView' => 'view/phui/PHUIPinboardItemView.php',
     'PHUIPinboardView' => 'view/phui/PHUIPinboardView.php',
     'PHUIPropertyGroupView' => 'view/phui/PHUIPropertyGroupView.php',
@@ -3395,7 +3395,6 @@ phutil_register_library_map(array(
     'AphrontNullView' => 'AphrontView',
     'AphrontPHPHTTPSink' => 'AphrontHTTPSink',
     'AphrontPageView' => 'AphrontView',
-    'AphrontPagerView' => 'AphrontView',
     'AphrontPlainTextResponse' => 'AphrontResponse',
     'AphrontProgressBarView' => 'AphrontBarView',
     'AphrontProxyResponse' => 'AphrontResponse',
@@ -4535,6 +4534,7 @@ phutil_register_library_map(array(
     'PHUIObjectItemListView' => 'AphrontTagView',
     'PHUIObjectItemView' => 'AphrontTagView',
     'PHUIPagedFormView' => 'AphrontView',
+    'PHUIPagerView' => 'AphrontView',
     'PHUIPinboardItemView' => 'AphrontView',
     'PHUIPinboardView' => 'AphrontView',
     'PHUIPropertyGroupView' => 'AphrontTagView',

src/applications/diffusion/controller/DiffusionBranchTableController.php

@@ -12,7 +12,7 @@ final class DiffusionBranchTableController extends DiffusionController {
 
     $repository = $drequest->getRepository();
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI($request->getRequestURI(), 'offset');
     $pager->setOffset($request->getInt('offset'));
 

src/applications/diffusion/controller/DiffusionBrowseSearchController.php

@@ -47,7 +47,7 @@ final class DiffusionBrowseSearchController extends DiffusionBrowseController {
 
     $limit = 100;
     $page = $this->getRequest()->getInt('page', 0);
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setPageSize($limit);
     $pager->setOffset($page);
     $pager->setURI($this->getRequest()->getRequestURI(), 'page');

src/applications/diffusion/controller/DiffusionHistoryController.php

@@ -32,7 +32,7 @@ final class DiffusionHistoryController extends DiffusionController {
     $history = DiffusionPathChange::newFromConduit(
       $history_results['pathChanges']);
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setPageSize($page_size);
     $pager->setOffset($offset);
     $history = $pager->sliceResults($history);

src/applications/diffusion/controller/DiffusionLintDetailsController.php

@@ -66,7 +66,7 @@ final class DiffusionLintDetailsController extends DiffusionController {
 
     $content = array();
 
-    $pager = id(new AphrontPagerView())
+    $pager = id(new PHUIPagerView())
       ->setPageSize($limit)
       ->setOffset($offset)
       ->setHasMorePages(count($messages) >= $limit)

src/applications/diffusion/controller/DiffusionTagListController.php

@@ -12,7 +12,7 @@ final class DiffusionTagListController extends DiffusionController {
 
     $repository = $drequest->getRepository();
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI($request->getRequestURI(), 'offset');
     $pager->setOffset($request->getInt('offset'));
 

src/applications/drydock/controller/DrydockBlueprintViewController.php

@@ -44,7 +44,7 @@ final class DrydockBlueprintViewController extends DrydockBlueprintController {
       ->render();
     $resource_list->setNoDataString(pht('This blueprint has no resources.'));
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI(new PhutilURI($blueprint_uri), 'offset');
     $pager->setOffset($request->getInt('offset'));
 

src/applications/drydock/controller/DrydockLeaseViewController.php

@@ -30,7 +30,7 @@ final class DrydockLeaseViewController extends DrydockLeaseController {
     $actions = $this->buildActionListView($lease);
     $properties = $this->buildPropertyListView($lease, $actions);
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI(new PhutilURI($lease_uri), 'offset');
     $pager->setOffset($request->getInt('offset'));
 

src/applications/drydock/controller/DrydockResourceViewController.php

@@ -42,7 +42,7 @@ final class DrydockResourceViewController extends DrydockResourceController {
       ->render();
     $lease_list->setNoDataString(pht('This resource has no leases.'));
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI(new PhutilURI($resource_uri), 'offset');
     $pager->setOffset($request->getInt('offset'));
 

src/applications/phame/controller/blog/PhameBlogListController.php

@@ -29,7 +29,7 @@ final class PhameBlogListController extends PhameController {
         throw new Exception(pht("Unknown filter '%s'!", $filter));
     }
 
-    $pager = id(new AphrontPagerView())
+    $pager = id(new PHUIPagerView())
       ->setURI($request->getRequestURI(), 'offset')
       ->setOffset($request->getInt('offset'));
 

src/applications/phriction/controller/PhrictionHistoryController.php

@@ -29,7 +29,7 @@ final class PhrictionHistoryController
 
     $current = $document->getContent();
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setOffset($request->getInt('page'));
     $pager->setURI($request->getRequestURI(), 'page');
 

src/applications/search/engine/PhabricatorApplicationSearchEngine.php

@@ -739,7 +739,7 @@ abstract class PhabricatorApplicationSearchEngine {
 
   public function newPagerForSavedQuery(PhabricatorSavedQuery $saved) {
     if ($this->shouldUseOffsetPaging()) {
-      $pager = new AphrontPagerView();
+      $pager = new PHUIPagerView();
     } else {
       $pager = new AphrontCursorPagerView();
     }

src/applications/tokens/controller/PhabricatorTokenLeaderController.php

@@ -11,7 +11,7 @@ final class PhabricatorTokenLeaderController
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setURI($request->getRequestURI(), 'page');
     $pager->setOffset($request->getInt('page'));
 

src/applications/uiexample/examples/PhabricatorPagerUIExample.php

@@ -10,7 +10,7 @@ final class PhabricatorPagerUIExample extends PhabricatorUIExample {
     return pht(
       'Use %s to create a control which allows '.
       'users to paginate through large amounts of content.',
-      phutil_tag('tt', array(), 'AphrontPagerView'));
+      phutil_tag('tt', array(), 'PHUIPagerView'));
   }
 
   public function renderExample() {
@@ -40,9 +40,9 @@ final class PhabricatorPagerUIExample extends PhabricatorUIExample {
       '<p class="phabricator-ui-example-note">%s</p>',
       pht(
         'Use %s to render a pager element.',
-        phutil_tag('tt', array(), 'AphrontPagerView'))));
+        phutil_tag('tt', array(), 'PHUIPagerView'))));
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setPageSize($page_size);
     $pager->setOffset($offset);
     $pager->setCount($item_count);
@@ -53,7 +53,7 @@ final class PhabricatorPagerUIExample extends PhabricatorUIExample {
       '<p class="phabricator-ui-example-note">%s</p>',
       pht('You can show more or fewer pages of surrounding context.')));
 
-    $many_pages_pager = new AphrontPagerView();
+    $many_pages_pager = new PHUIPagerView();
     $many_pages_pager->setPageSize($page_size);
     $many_pages_pager->setOffset($offset);
     $many_pages_pager->setCount($item_count);
@@ -69,7 +69,7 @@ final class PhabricatorPagerUIExample extends PhabricatorUIExample {
         '%s if it exists, creating an inexact pager.',
         phutil_tag('tt', array(), 'hasMorePages(true)'))));
 
-    $inexact_pager = new AphrontPagerView();
+    $inexact_pager = new PHUIPagerView();
     $inexact_pager->setPageSize($page_size);
     $inexact_pager->setOffset($offset);
     $inexact_pager->setHasMorePages($offset < ($item_count - $page_size));

src/applications/xhprof/controller/PhabricatorXHProfSampleListController.php

@@ -13,7 +13,7 @@ final class PhabricatorXHProfSampleListController
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    $pager = new AphrontPagerView();
+    $pager = new PHUIPagerView();
     $pager->setOffset($request->getInt('page'));
 
     switch ($this->view) {

src/infrastructure/query/PhabricatorOffsetPagedQuery.php

@@ -39,7 +39,7 @@ abstract class PhabricatorOffsetPagedQuery extends PhabricatorQuery {
     }
   }
 
-  final public function executeWithOffsetPager(AphrontPagerView $pager) {
+  final public function executeWithOffsetPager(PHUIPagerView $pager) {
     $this->setLimit($pager->getPageSize() + 1);
     $this->setOffset($pager->getOffset());
 

src/view/control/AphrontCursorPagerView.php

@@ -141,37 +141,48 @@ final class AphrontCursorPagerView extends AphrontView {
 
     $first_uri = $this->getFirstPageURI();
     if ($first_uri) {
-      $links[] = phutil_tag(
+      $icon = id(new PHUIIconView())
-        'a',
+        ->setIconFont('fa-fast-backward');
-        array(
+      $links[] = id(new PHUIButtonView())
-          'href' => $first_uri,
+        ->setTag('a')
-        ),
+        ->setHref($first_uri)
-        "\xC2\xAB ".pht('First'));
+        ->setIcon($icon)
+        ->addClass('mml')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setText(pht('First'));
     }
 
     $prev_uri = $this->getPrevPageURI();
     if ($prev_uri) {
-      $links[] = phutil_tag(
+      $icon = id(new PHUIIconView())
-        'a',
+        ->setIconFont('fa-backward');
-        array(
+      $links[] = id(new PHUIButtonView())
-          'href' => $prev_uri,
+        ->setTag('a')
-        ),
+        ->setHref($prev_uri)
-        "\xE2\x80\xB9 ".pht('Prev'));
+        ->setIcon($icon)
+        ->addClass('mml')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setText(pht('Prev'));
     }
 
     $next_uri = $this->getNextPageURI();
     if ($next_uri) {
-      $links[] = phutil_tag(
+      $icon = id(new PHUIIconView())
-        'a',
+        ->setIconFont('fa-forward');
-        array(
+      $links[] = id(new PHUIButtonView())
-          'href' => $next_uri,
+        ->setTag('a')
-        ),
+        ->setHref($next_uri)
-        pht('Next')." \xE2\x80\xBA");
+        ->setIcon($icon, false)
+        ->addClass('mml')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setText(pht('Next'));
     }
 
     return phutil_tag(
       'div',
-      array('class' => 'aphront-pager-view'),
+      array(
+        'class' => 'phui-pager-view',
+      ),
       $links);
   }
 

src/view/phui/PHUIButtonView.php

@@ -22,6 +22,7 @@ final class PHUIButtonView extends AphrontTagView {
   private $dropdown;
   private $icon;
   private $iconFont;
+  private $iconFirst;
   private $href = null;
   private $title = null;
   private $disabled;
@@ -87,8 +88,9 @@ final class PHUIButtonView extends AphrontTagView {
     return $this;
   }
 
-  public function setIcon(PHUIIconView $icon) {
+  public function setIcon(PHUIIconView $icon, $first = true) {
     $this->icon = $icon;
+    $this->iconFirst = $first;
     return $this;
   }
 
@@ -138,6 +140,10 @@ final class PHUIButtonView extends AphrontTagView {
       $classes[] = 'has-icon';
     }
 
+    if ($this->iconFirst == false) {
+      $classes[] = 'icon-last';
+    }
+
     if ($this->disabled) {
       $classes[] = 'disabled';
     }
@@ -184,6 +190,10 @@ final class PHUIButtonView extends AphrontTagView {
       $caret = phutil_tag('span', array('class' => 'caret'), '');
     }
 
-    return array($icon, $text, $caret);
+    if ($this->iconFirst == true) {
+      return array($icon, $text, $caret);
+    } else {
+      return array($text, $icon);
+    }
   }
 }

src/view/phui/PHUIPagerView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class AphrontPagerView extends AphrontView {
+final class PHUIPagerView extends AphrontView {
 
   private $offset;
   private $pageSize = 100;
@@ -112,7 +112,7 @@ final class AphrontPagerView extends AphrontView {
       throw new PhutilInvalidStateException('setURI');
     }
 
-    require_celerity_resource('aphront-pager-view-css');
+    require_celerity_resource('phui-pager-css');
 
     $page = (int)floor($this->getOffset() / $this->getPageSize());
     $last = ((int)ceil($this->computeCount() / $this->getPageSize())) - 1;
@@ -125,7 +125,7 @@ final class AphrontPagerView extends AphrontView {
     if ($max - $min > $last) {
       $max = $min + $last;
       if ($max == $min) {
-        return phutil_tag('div', array('class' => 'aphront-pager-view'), '');
+        return phutil_tag('div', array('class' => 'phui-pager-view'), '');
       }
     }
 
@@ -197,18 +197,20 @@ final class AphrontPagerView extends AphrontView {
       list($index, $label, $class) = $link;
       $display_index = $this->getDisplayIndex($index);
       $link = $base_uri->alter($parameter, $display_index);
-      $rendered_links[] = phutil_tag(
+      $rendered_links[] = id(new PHUIButtonView())
-        'a',
+        ->setTag('a')
-        array(
+        ->setHref($link)
-          'href' => $link,
+        ->setColor(PHUIButtonView::SIMPLE)
-          'class' => $class,
+        ->addClass('mml')
-        ),
+        ->addClass($class)
-        $label);
+        ->setText($label);
     }
 
     return phutil_tag(
       'div',
-      array('class' => 'aphront-pager-view'),
+      array(
+        'class' => 'phui-pager-view',
+      ),
       $rendered_links);
   }
 

webroot/rsrc/css/aphront/pager-view.css

@@ -1,39 +0,0 @@
-/**
- * @provides aphront-pager-view-css
- */
-
-.aphront-pager-view {
-  clear: both;
-  text-align: right;
-  padding: 8px 4px 16px;
-  font-weight: bold;
-}
-
-.phui-box .aphront-pager-view {
-  padding: 0;
-}
-
-.aphront-pager-view a {
-  padding: 3px 7px;
-  border: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$blueborder};
-  margin: 0 2px;
-  background: #fff;
-  color: {$lightbluetext};
-  display: inline-block;
-  border-radius: 2px;
-}
-
-.aphront-pager-view a:hover {
-  text-decoration: none;
-  border: 1px solid {$greyborder};
-  border-bottom: 1px solid {$darkgreyborder};
-  color: {$darkgreytext};
-}
-
-.aphront-pager-view a.current {
-  background: {$greybackground};
-  border: 1px solid {$greyborder};
-  border-bottom: 1px solid {$darkgreyborder};
-  color: {$darkgreytext};
-}

webroot/rsrc/css/phui/phui-button.css

@@ -258,6 +258,11 @@ a.policy-control .caret {
   left: 12px;
 }
 
+.button.icon-last .phui-icon-view {
+  left: auto;
+  right: 12px;
+}
+
 .phui-button-bar .button .phui-icon-view {
   left: 11px;
 }
@@ -266,6 +271,10 @@ a.policy-control .caret {
   margin-left: 16px;
 }
 
+.button.has-icon.icon-last .phui-button-text {
+  margin: 0 16px 0 0;
+}
+
 /* Login Buttons */
 
 .button.big.has-icon {

webroot/rsrc/css/phui/phui-pager.css

@@ -0,0 +1,8 @@
+/**
+ * @provides phui-pager-css
+ */
+
+.phui-pager-view {
+  clear: both;
+  text-align: right;
+}