1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-03-05 17:09:23 +01:00

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
This commit is contained in:
Chad Little 2015-12-31 13:08:33 -08:00
parent 84a570a61b
commit fe6224f505
7 changed files with 256 additions and 20 deletions

View file

@ -82,7 +82,7 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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',

View file

@ -3427,6 +3427,7 @@ phutil_register_library_map(array(
'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 @@ phutil_register_library_map(array(
'PhameDraftListView' => 'AphrontTagView',
'PhameHomeController' => 'PhamePostController',
'PhameLiveController' => 'PhameController',
'PhameNextPostView' => 'AphrontTagView',
'PhamePost' => array(
'PhameDAO',
'PhabricatorPolicyInterface',

View file

@ -126,20 +126,15 @@ final class PhamePostViewController
->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 @@ final class PhamePostViewController
->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 @@ final class PhamePostViewController
->setBeforeID($post->getID())
->execute();
return array($prev, $next);
return array(head($prev), head($next));
}
}

View file

@ -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);
}
}

View file

@ -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,6 +31,11 @@ final class PHUIDocumentViewPro extends AphrontTagView {
return $this;
}
public function setFoot($foot) {
$this->foot = $foot;
return $this;
}
protected function getTagAttributes() {
$classes = array();
@ -37,6 +43,9 @@ final class PHUIDocumentViewPro extends AphrontTagView {
if ($this->fluid) {
$classes[] = 'phui-document-fluid';
}
if ($this->foot) {
$classes[] = 'document-has-foot';
}
return array(
'class' => implode(' ', $classes),
@ -95,6 +104,16 @@ final class PHUIDocumentViewPro extends AphrontTagView {
$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 @@ final class PHUIDocumentViewPro extends AphrontTagView {
$table_of_contents,
$this->header,
$main_content,
$foot_content,
));
$content = phutil_tag(

View file

@ -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;
}

View file

@ -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;
}