Add Next and Previous UI to PhamePostView

Summary: Creates a new next/previous UI for PhamePosts, and adds a setFoot to PHUIDocumentViewPro for future use in other apps.

Test Plan:
Test first, next, last posts on Phame in mobile, desktop, and tablet breakpoints.

{F1050152}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

Author: Chad Little

resources/celerity/map.php

@@ -82,7 +82,7 @@
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'a5157c48',
     'rsrc/css/application/people/people-profile.css' => '25970776',
-    'rsrc/css/application/phame/phame.css' => '09a39e8d',
+    'rsrc/css/application/phame/phame.css' => 'dac8fdf2',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => '95174bdd',
@@ -127,7 +127,7 @@
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
     'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
-    'rsrc/css/phui/phui-document-pro.css' => 'e0fad431',
+    'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
     'rsrc/css/phui/phui-document.css' => 'a4a1c3b9',
     'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
@@ -781,7 +781,7 @@
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => '57ddcaa2',
-    'phame-css' => '09a39e8d',
+    'phame-css' => 'dac8fdf2',
     'pholio-css' => '95174bdd',
     'pholio-edit-css' => '3ad9d1ee',
     'pholio-inline-comments-css' => '8e545e49',
@@ -802,7 +802,7 @@
     'phui-crumbs-view-css' => '414406b5',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => 'a4a1c3b9',
-    'phui-document-view-pro-css' => 'e0fad431',
+    'phui-document-view-pro-css' => '8799acf7',
     'phui-feed-story-css' => 'b7b26d23',
     'phui-font-icon-base-css' => 'ecbbb4c2',
     'phui-fontkit-css' => '9cda225e',

src/__phutil_library_map__.php

@@ -3427,6 +3427,7 @@
     'PhameDraftListView' => 'applications/phame/view/PhameDraftListView.php',
     'PhameHomeController' => 'applications/phame/controller/PhameHomeController.php',
     'PhameLiveController' => 'applications/phame/controller/PhameLiveController.php',
+    'PhameNextPostView' => 'applications/phame/view/PhameNextPostView.php',
     'PhamePost' => 'applications/phame/storage/PhamePost.php',
     'PhamePostCommentController' => 'applications/phame/controller/post/PhamePostCommentController.php',
     'PhamePostController' => 'applications/phame/controller/post/PhamePostController.php',
@@ -7880,6 +7881,7 @@
     'PhameDraftListView' => 'AphrontTagView',
     'PhameHomeController' => 'PhamePostController',
     'PhameLiveController' => 'PhameController',
+    'PhameNextPostView' => 'AphrontTagView',
     'PhamePost' => array(
       'PhameDAO',
       'PhabricatorPolicyInterface',

src/applications/phame/controller/post/PhamePostViewController.php

@@ -126,20 +126,15 @@ public function handleRequest(AphrontRequest $request) {
       ->setUser($viewer)
       ->setObject($post);
 
+    $next_view = new PhameNextPostView();
     if ($next) {
-      $properties->addProperty(
-        pht('Later Posts'),
-        $viewer->renderHandleList(mpull($next, 'getPHID')));
+      $next_view->setNext($next->getTitle(), $next->getViewURI());
     }
-
     if ($prev) {
-      $properties->addProperty(
-        pht('Earlier Posts'),
-        $viewer->renderHandleList(mpull($prev, 'getPHID')));
+      $next_view->setPrevious($prev->getTitle(), $prev->getViewURI());
     }
 
-    $properties->invokeWillRenderEvent();
-
+    $document->setFoot($next_view);
     $crumbs = $this->buildApplicationCrumbs();
 
     $page = $this->newPage()
@@ -257,7 +252,7 @@ private function loadAdjacentPosts(PhamePost $post) {
       ->setViewer($viewer)
       ->withVisibility(PhameConstants::VISIBILITY_PUBLISHED)
       ->withBlogPHIDs(array($post->getBlog()->getPHID()))
-      ->setLimit(2);
+      ->setLimit(1);
 
     $prev = id(clone $query)
       ->setAfterID($post->getID())
@@ -267,7 +262,7 @@ private function loadAdjacentPosts(PhamePost $post) {
       ->setBeforeID($post->getID())
       ->execute();
 
-    return array($prev, $next);
+    return array(head($prev), head($next));
   }
 
 }

src/applications/phame/view/PhameNextPostView.php

@@ -0,0 +1,113 @@
+<?php
+
+final class PhameNextPostView extends AphrontTagView {
+
+  private $nextTitle;
+  private $nextHref;
+  private $previousTitle;
+  private $previousHref;
+
+  public function setNext($title, $href) {
+    $this->nextTitle = $title;
+    $this->nextHref = $href;
+    return $this;
+  }
+
+  public function setPrevious($title, $href) {
+    $this->previousTitle = $title;
+    $this->previousHref = $href;
+    return $this;
+  }
+
+  protected function getTagAttributes() {
+    $classes = array();
+    $classes[] = 'phame-next-post-view';
+    $classes[] = 'grouped';
+    return array('class' => implode(' ', $classes));
+  }
+
+  protected function getTagContent() {
+    require_celerity_resource('phame-css');
+
+    $p_icon = id(new PHUIIconView())
+      ->setIconFont('fa-angle-left');
+
+    $previous_icon = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-previous-arrow',
+      ),
+      $p_icon);
+
+    $previous_text = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-previous-header',
+      ),
+      pht('Previous Post'));
+
+    $previous_title = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-previous-title',
+      ),
+      $this->previousTitle);
+
+    $previous = null;
+    if ($this->previousHref) {
+      $previous = phutil_tag(
+        'a',
+        array(
+          'class' => 'phame-previous',
+          'href' => $this->previousHref,
+        ),
+        array(
+          $previous_icon,
+          $previous_text,
+          $previous_title,
+        ));
+    }
+
+    $n_icon = id(new PHUIIconView())
+      ->setIconFont('fa-angle-right');
+
+    $next_icon = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-next-arrow',
+      ),
+      $n_icon);
+
+    $next_text = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-next-header',
+      ),
+      pht('Next Post'));
+
+    $next_title = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-next-title',
+      ),
+      $this->nextTitle);
+
+    $next = null;
+    if ($this->nextHref) {
+      $next = phutil_tag(
+        'a',
+        array(
+          'class' => 'phame-next',
+          'href' => $this->nextHref,
+        ),
+        array(
+          $next_icon,
+          $next_text,
+          $next_title,
+        ));
+    }
+
+    return array($previous, $next);
+  }
+
+}

src/view/phui/PHUIDocumentViewPro.php

@@ -7,6 +7,7 @@ final class PHUIDocumentViewPro extends AphrontTagView {
   private $bookdescription;
   private $fluid;
   private $toc;
+  private $foot;
 
   public function setHeader(PHUIHeaderView $header) {
     $header->setTall(true);
@@ -30,13 +31,21 @@ public function setToc($toc) {
     return $this;
   }
 
+  public function setFoot($foot) {
+    $this->foot = $foot;
+    return $this;
+  }
+
   protected function getTagAttributes() {
     $classes = array();
 
     $classes[] = 'phui-document-container';
     if ($this->fluid) {
       $classes[] = 'phui-document-fluid';
     }
+    if ($this->foot) {
+      $classes[] = 'document-has-foot';
+    }
 
     return array(
       'class' => implode(' ', $classes),
@@ -95,6 +104,16 @@ protected function getTagContent() {
         $toc);
     }
 
+    $foot_content = null;
+    if ($this->foot) {
+      $foot_content = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-foot-content',
+        ),
+        $this->foot);
+    }
+
     $content_inner = phutil_tag(
         'div',
         array(
@@ -104,6 +123,7 @@ protected function getTagContent() {
           $table_of_contents,
           $this->header,
           $main_content,
+          $foot_content,
         ));
 
     $content = phutil_tag(

webroot/rsrc/css/application/phame/phame.css

@@ -134,3 +134,106 @@
   width: 14px;
   color: {$lightbluetext};
 }
+
+.phame-next-post-view {
+  margin: 0 auto;
+  padding: 12px 0;
+  font-family: 'Aleo', {$fontfamily};
+}
+
+.phame-next {
+  width: 360px;
+  float: right;
+  text-align: right;
+  color: #000;
+  position: relative;
+}
+
+.phame-next-arrow,
+.phame-previous-arrow {
+  border: 1px solid {$lightblueborder};
+  border-radius: 36px;
+  height: 36px;
+  width: 36px;
+  text-align: center;
+}
+
+.phame-next-arrow .phui-icon-view,
+.phame-previous-arrow .phui-icon-view {
+  height: 36px;
+  width: 34px;
+  font-size: 24px;
+  line-height: 35px;
+  color: {$lightblueborder};
+}
+
+.phame-previous-arrow {
+  float: left;
+}
+
+.phame-next-arrow {
+  float: right;
+}
+
+.phame-previous {
+  width: 360px;
+  float: left;
+  text-align: left;
+  color: #000;
+  position: relative;
+}
+
+.device .phame-previous,
+.device .phame-next {
+  width: 100px;
+}
+
+.device .phame-previous .phame-previous-title,
+.device .phame-next .phame-next-title {
+  display: none;
+}
+
+.phame-next:hover,
+.phame-previous:hover {
+  text-decoration: none;
+}
+
+.phame-next:hover .phame-next-arrow,
+.phame-previous:hover .phame-previous-arrow {
+  border-color: {$indigo};
+}
+
+.phame-next:hover .phui-icon-view,
+.phame-previous:hover .phui-icon-view {
+  color: {$indigo};
+}
+
+.phame-next-header,
+.phame-previous-header {
+  font-weight: bold;
+  font-size: {$biggerfontsize};
+}
+
+.phame-next-header {
+  top: 2px;
+  right: 50px;
+  position: absolute;
+}
+
+.phame-next-title {
+  top: 22px;
+  right: 50px;
+  position: absolute;
+}
+
+.phame-previous-header {
+  top: 2px;
+  left: 50px;
+  position: absolute;
+}
+
+.phame-previous-title {
+  top: 22px;
+  left: 50px;
+  position: absolute;
+}

webroot/rsrc/css/phui/phui-document-pro.css

@@ -179,11 +179,6 @@ a.button.phui-document-toc {
   display: none;
 }
 
-.phui-document-view-pro-box .phui-timeline-major-event .phui-timeline-content
-  .phui-timeline-core-content {
-
-}
-
 .phui-document-view-pro-box .phui-object-box {
   margin: 0;
 }
@@ -195,3 +190,11 @@ a.button.phui-document-toc {
 .phui-document-view-pro-box .phui-object-box .remarkup-assist-textarea {
   height: 9em;
 }
+
+.document-has-foot .phui-document-view-pro {
+  padding-bottom: 0;
+}
+
+.phui-document-foot-content {
+  margin: 64px 0 32px;
+}