[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
2024-12-18 19:40:55 +01:00 · 2015-06-02 14:34:04 -07:00 · 2015-06-02 14:34:04 -07:00 · e4788df9a5
commit e4788df9a5
parent 132bff3ea5
24 changed files with 100 additions and 99 deletions
--- a/resources/celerity/map.php
+++ b/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',
--- a/resources/celerity/packages.php
+++ b/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',
--- a/src/__phutil_library_map__.php
+++ b/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',
--- a/src/applications/diffusion/controller/DiffusionBranchTableController.php
+++ b/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'));

--- a/src/applications/diffusion/controller/DiffusionBrowseSearchController.php
+++ b/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');
--- a/src/applications/diffusion/controller/DiffusionHistoryController.php
+++ b/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);
--- a/src/applications/diffusion/controller/DiffusionLintDetailsController.php
+++ b/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)
--- a/src/applications/diffusion/controller/DiffusionTagListController.php
+++ b/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'));

--- a/src/applications/drydock/controller/DrydockBlueprintViewController.php
+++ b/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'));

--- a/src/applications/drydock/controller/DrydockLeaseViewController.php
+++ b/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'));

--- a/src/applications/drydock/controller/DrydockResourceViewController.php
+++ b/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'));

--- a/src/applications/phame/controller/blog/PhameBlogListController.php
+++ b/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'));

--- a/src/applications/phriction/controller/PhrictionHistoryController.php
+++ b/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');

--- a/src/applications/search/engine/PhabricatorApplicationSearchEngine.php
+++ b/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();
    }
--- a/src/applications/tokens/controller/PhabricatorTokenLeaderController.php
+++ b/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'));

--- a/src/applications/uiexample/examples/PhabricatorPagerUIExample.php
+++ b/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));
--- a/src/applications/xhprof/controller/PhabricatorXHProfSampleListController.php
+++ b/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) {
--- a/src/infrastructure/query/PhabricatorOffsetPagedQuery.php
+++ b/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());

--- a/src/view/control/AphrontCursorPagerView.php
+++ b/src/view/control/AphrontCursorPagerView.php
@ -141,37 +141,48 @@ final class AphrontCursorPagerView extends AphrontView {

    $first_uri = $this->getFirstPageURI();
    if ($first_uri) {
-      $links[] = phutil_tag(
-        'a',
-        array(
-          'href' => $first_uri,
-        ),
-        "\xC2\xAB ".pht('First'));
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-fast-backward');
+      $links[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setHref($first_uri)
+        ->setIcon($icon)
+        ->addClass('mml')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setText(pht('First'));
    }

    $prev_uri = $this->getPrevPageURI();
    if ($prev_uri) {
-      $links[] = phutil_tag(
-        'a',
-        array(
-          'href' => $prev_uri,
-        ),
-        "\xE2\x80\xB9 ".pht('Prev'));
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-backward');
+      $links[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setHref($prev_uri)
+        ->setIcon($icon)
+        ->addClass('mml')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setText(pht('Prev'));
    }

    $next_uri = $this->getNextPageURI();
    if ($next_uri) {
-      $links[] = phutil_tag(
-        'a',
-        array(
-          'href' => $next_uri,
-        ),
-        pht('Next')." \xE2\x80\xBA");
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-forward');
+      $links[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setHref($next_uri)
+        ->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);
  }

--- a/src/view/phui/PHUIButtonView.php
+++ b/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);
+    }
  }
 }
--- a/src/view/control/AphrontPagerView.php
+++ b/src/view/control/AphrontPagerView.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(
-        'a',
-        array(
-          'href' => $link,
-          'class' => $class,
-        ),
-        $label);
+      $rendered_links[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setHref($link)
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->addClass('mml')
+        ->addClass($class)
+        ->setText($label);
    }

    return phutil_tag(
      'div',
-      array('class' => 'aphront-pager-view'),
+      array(
+        'class' => 'phui-pager-view',
+      ),
      $rendered_links);
  }

--- a/webroot/rsrc/css/aphront/pager-view.css
+++ b/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};
-}
--- a/webroot/rsrc/css/phui/phui-button.css
+++ b/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 {
--- a/webroot/rsrc/css/phui/phui-pager.css
+++ b/webroot/rsrc/css/phui/phui-pager.css
@ -0,0 +1,8 @@
+/**
+ * @provides phui-pager-css
+ */
+
+.phui-pager-view {
+  clear: both;
+  text-align: right;
+}