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:
parent
84a570a61b
commit
fe6224f505
7 changed files with 256 additions and 20 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
113
src/applications/phame/view/PhameNextPostView.php
Normal file
113
src/applications/phame/view/PhameNextPostView.php
Normal 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);
|
||||
}
|
||||
|
||||
}
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue