@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+256
-20
+4
-4
resources/celerity/map.php
+4
-4
resources/celerity/map.php
···
82
82
'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
83
83
'rsrc/css/application/paste/paste.css' => 'a5157c48',
84
84
'rsrc/css/application/people/people-profile.css' => '25970776',
85
-
'rsrc/css/application/phame/phame.css' => '09a39e8d',
85
+
'rsrc/css/application/phame/phame.css' => 'dac8fdf2',
86
86
'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
87
87
'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
88
88
'rsrc/css/application/pholio/pholio.css' => '95174bdd',
···
127
127
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
128
128
'rsrc/css/phui/phui-button.css' => '16020a60',
129
129
'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
130
-
'rsrc/css/phui/phui-document-pro.css' => 'e0fad431',
130
+
'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
131
131
'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
132
132
'rsrc/css/phui/phui-document.css' => 'a4a1c3b9',
133
133
'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
···
781
781
'phabricator-uiexample-reactor-sendclass' => '1def2711',
782
782
'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
783
783
'phabricator-zindex-css' => '57ddcaa2',
784
-
'phame-css' => '09a39e8d',
784
+
'phame-css' => 'dac8fdf2',
785
785
'pholio-css' => '95174bdd',
786
786
'pholio-edit-css' => '3ad9d1ee',
787
787
'pholio-inline-comments-css' => '8e545e49',
···
802
802
'phui-crumbs-view-css' => '414406b5',
803
803
'phui-document-summary-view-css' => '9ca48bdf',
804
804
'phui-document-view-css' => 'a4a1c3b9',
805
-
'phui-document-view-pro-css' => 'e0fad431',
805
+
'phui-document-view-pro-css' => '8799acf7',
806
806
'phui-feed-story-css' => 'b7b26d23',
807
807
'phui-font-icon-base-css' => 'ecbbb4c2',
808
808
'phui-fontkit-css' => '9cda225e',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
3427
3427
'PhameDraftListView' => 'applications/phame/view/PhameDraftListView.php',
3428
3428
'PhameHomeController' => 'applications/phame/controller/PhameHomeController.php',
3429
3429
'PhameLiveController' => 'applications/phame/controller/PhameLiveController.php',
3430
+
'PhameNextPostView' => 'applications/phame/view/PhameNextPostView.php',
3430
3431
'PhamePost' => 'applications/phame/storage/PhamePost.php',
3431
3432
'PhamePostCommentController' => 'applications/phame/controller/post/PhamePostCommentController.php',
3432
3433
'PhamePostController' => 'applications/phame/controller/post/PhamePostController.php',
···
7880
7881
'PhameDraftListView' => 'AphrontTagView',
7881
7882
'PhameHomeController' => 'PhamePostController',
7882
7883
'PhameLiveController' => 'PhameController',
7884
+
'PhameNextPostView' => 'AphrontTagView',
7883
7885
'PhamePost' => array(
7884
7886
'PhameDAO',
7885
7887
'PhabricatorPolicyInterface',
+6
-11
src/applications/phame/controller/post/PhamePostViewController.php
+6
-11
src/applications/phame/controller/post/PhamePostViewController.php
···
126
126
->setUser($viewer)
127
127
->setObject($post);
128
128
129
+
$next_view = new PhameNextPostView();
129
130
if ($next) {
130
-
$properties->addProperty(
131
-
pht('Later Posts'),
132
-
$viewer->renderHandleList(mpull($next, 'getPHID')));
131
+
$next_view->setNext($next->getTitle(), $next->getViewURI());
133
132
}
134
-
135
133
if ($prev) {
136
-
$properties->addProperty(
137
-
pht('Earlier Posts'),
138
-
$viewer->renderHandleList(mpull($prev, 'getPHID')));
134
+
$next_view->setPrevious($prev->getTitle(), $prev->getViewURI());
139
135
}
140
136
141
-
$properties->invokeWillRenderEvent();
142
-
137
+
$document->setFoot($next_view);
143
138
$crumbs = $this->buildApplicationCrumbs();
144
139
145
140
$page = $this->newPage()
···
257
252
->setViewer($viewer)
258
253
->withVisibility(PhameConstants::VISIBILITY_PUBLISHED)
259
254
->withBlogPHIDs(array($post->getBlog()->getPHID()))
260
-
->setLimit(2);
255
+
->setLimit(1);
261
256
262
257
$prev = id(clone $query)
263
258
->setAfterID($post->getID())
···
267
262
->setBeforeID($post->getID())
268
263
->execute();
269
264
270
-
return array($prev, $next);
265
+
return array(head($prev), head($next));
271
266
}
272
267
273
268
}
+113
src/applications/phame/view/PhameNextPostView.php
+113
src/applications/phame/view/PhameNextPostView.php
···
1
+
<?php
2
+
3
+
final class PhameNextPostView extends AphrontTagView {
4
+
5
+
private $nextTitle;
6
+
private $nextHref;
7
+
private $previousTitle;
8
+
private $previousHref;
9
+
10
+
public function setNext($title, $href) {
11
+
$this->nextTitle = $title;
12
+
$this->nextHref = $href;
13
+
return $this;
14
+
}
15
+
16
+
public function setPrevious($title, $href) {
17
+
$this->previousTitle = $title;
18
+
$this->previousHref = $href;
19
+
return $this;
20
+
}
21
+
22
+
protected function getTagAttributes() {
23
+
$classes = array();
24
+
$classes[] = 'phame-next-post-view';
25
+
$classes[] = 'grouped';
26
+
return array('class' => implode(' ', $classes));
27
+
}
28
+
29
+
protected function getTagContent() {
30
+
require_celerity_resource('phame-css');
31
+
32
+
$p_icon = id(new PHUIIconView())
33
+
->setIconFont('fa-angle-left');
34
+
35
+
$previous_icon = phutil_tag(
36
+
'div',
37
+
array(
38
+
'class' => 'phame-previous-arrow',
39
+
),
40
+
$p_icon);
41
+
42
+
$previous_text = phutil_tag(
43
+
'div',
44
+
array(
45
+
'class' => 'phame-previous-header',
46
+
),
47
+
pht('Previous Post'));
48
+
49
+
$previous_title = phutil_tag(
50
+
'div',
51
+
array(
52
+
'class' => 'phame-previous-title',
53
+
),
54
+
$this->previousTitle);
55
+
56
+
$previous = null;
57
+
if ($this->previousHref) {
58
+
$previous = phutil_tag(
59
+
'a',
60
+
array(
61
+
'class' => 'phame-previous',
62
+
'href' => $this->previousHref,
63
+
),
64
+
array(
65
+
$previous_icon,
66
+
$previous_text,
67
+
$previous_title,
68
+
));
69
+
}
70
+
71
+
$n_icon = id(new PHUIIconView())
72
+
->setIconFont('fa-angle-right');
73
+
74
+
$next_icon = phutil_tag(
75
+
'div',
76
+
array(
77
+
'class' => 'phame-next-arrow',
78
+
),
79
+
$n_icon);
80
+
81
+
$next_text = phutil_tag(
82
+
'div',
83
+
array(
84
+
'class' => 'phame-next-header',
85
+
),
86
+
pht('Next Post'));
87
+
88
+
$next_title = phutil_tag(
89
+
'div',
90
+
array(
91
+
'class' => 'phame-next-title',
92
+
),
93
+
$this->nextTitle);
94
+
95
+
$next = null;
96
+
if ($this->nextHref) {
97
+
$next = phutil_tag(
98
+
'a',
99
+
array(
100
+
'class' => 'phame-next',
101
+
'href' => $this->nextHref,
102
+
),
103
+
array(
104
+
$next_icon,
105
+
$next_text,
106
+
$next_title,
107
+
));
108
+
}
109
+
110
+
return array($previous, $next);
111
+
}
112
+
113
+
}
+20
src/view/phui/PHUIDocumentViewPro.php
+20
src/view/phui/PHUIDocumentViewPro.php
···
7
7
private $bookdescription;
8
8
private $fluid;
9
9
private $toc;
10
+
private $foot;
10
11
11
12
public function setHeader(PHUIHeaderView $header) {
12
13
$header->setTall(true);
···
30
31
return $this;
31
32
}
32
33
34
+
public function setFoot($foot) {
35
+
$this->foot = $foot;
36
+
return $this;
37
+
}
38
+
33
39
protected function getTagAttributes() {
34
40
$classes = array();
35
41
36
42
$classes[] = 'phui-document-container';
37
43
if ($this->fluid) {
38
44
$classes[] = 'phui-document-fluid';
45
+
}
46
+
if ($this->foot) {
47
+
$classes[] = 'document-has-foot';
39
48
}
40
49
41
50
return array(
···
95
104
$toc);
96
105
}
97
106
107
+
$foot_content = null;
108
+
if ($this->foot) {
109
+
$foot_content = phutil_tag(
110
+
'div',
111
+
array(
112
+
'class' => 'phui-document-foot-content',
113
+
),
114
+
$this->foot);
115
+
}
116
+
98
117
$content_inner = phutil_tag(
99
118
'div',
100
119
array(
···
104
123
$table_of_contents,
105
124
$this->header,
106
125
$main_content,
126
+
$foot_content,
107
127
));
108
128
109
129
$content = phutil_tag(
+103
webroot/rsrc/css/application/phame/phame.css
+103
webroot/rsrc/css/application/phame/phame.css
···
134
134
width: 14px;
135
135
color: {$lightbluetext};
136
136
}
137
+
138
+
.phame-next-post-view {
139
+
margin: 0 auto;
140
+
padding: 12px 0;
141
+
font-family: 'Aleo', {$fontfamily};
142
+
}
143
+
144
+
.phame-next {
145
+
width: 360px;
146
+
float: right;
147
+
text-align: right;
148
+
color: #000;
149
+
position: relative;
150
+
}
151
+
152
+
.phame-next-arrow,
153
+
.phame-previous-arrow {
154
+
border: 1px solid {$lightblueborder};
155
+
border-radius: 36px;
156
+
height: 36px;
157
+
width: 36px;
158
+
text-align: center;
159
+
}
160
+
161
+
.phame-next-arrow .phui-icon-view,
162
+
.phame-previous-arrow .phui-icon-view {
163
+
height: 36px;
164
+
width: 34px;
165
+
font-size: 24px;
166
+
line-height: 35px;
167
+
color: {$lightblueborder};
168
+
}
169
+
170
+
.phame-previous-arrow {
171
+
float: left;
172
+
}
173
+
174
+
.phame-next-arrow {
175
+
float: right;
176
+
}
177
+
178
+
.phame-previous {
179
+
width: 360px;
180
+
float: left;
181
+
text-align: left;
182
+
color: #000;
183
+
position: relative;
184
+
}
185
+
186
+
.device .phame-previous,
187
+
.device .phame-next {
188
+
width: 100px;
189
+
}
190
+
191
+
.device .phame-previous .phame-previous-title,
192
+
.device .phame-next .phame-next-title {
193
+
display: none;
194
+
}
195
+
196
+
.phame-next:hover,
197
+
.phame-previous:hover {
198
+
text-decoration: none;
199
+
}
200
+
201
+
.phame-next:hover .phame-next-arrow,
202
+
.phame-previous:hover .phame-previous-arrow {
203
+
border-color: {$indigo};
204
+
}
205
+
206
+
.phame-next:hover .phui-icon-view,
207
+
.phame-previous:hover .phui-icon-view {
208
+
color: {$indigo};
209
+
}
210
+
211
+
.phame-next-header,
212
+
.phame-previous-header {
213
+
font-weight: bold;
214
+
font-size: {$biggerfontsize};
215
+
}
216
+
217
+
.phame-next-header {
218
+
top: 2px;
219
+
right: 50px;
220
+
position: absolute;
221
+
}
222
+
223
+
.phame-next-title {
224
+
top: 22px;
225
+
right: 50px;
226
+
position: absolute;
227
+
}
228
+
229
+
.phame-previous-header {
230
+
top: 2px;
231
+
left: 50px;
232
+
position: absolute;
233
+
}
234
+
235
+
.phame-previous-title {
236
+
top: 22px;
237
+
left: 50px;
238
+
position: absolute;
239
+
}
+8
-5
webroot/rsrc/css/phui/phui-document-pro.css
+8
-5
webroot/rsrc/css/phui/phui-document-pro.css
···
179
179
display: none;
180
180
}
181
181
182
-
.phui-document-view-pro-box .phui-timeline-major-event .phui-timeline-content
183
-
.phui-timeline-core-content {
184
-
185
-
}
186
-
187
182
.phui-document-view-pro-box .phui-object-box {
188
183
margin: 0;
189
184
}
···
195
190
.phui-document-view-pro-box .phui-object-box .remarkup-assist-textarea {
196
191
height: 9em;
197
192
}
193
+
194
+
.document-has-foot .phui-document-view-pro {
195
+
padding-bottom: 0;
196
+
}
197
+
198
+
.phui-document-foot-content {
199
+
margin: 64px 0 32px;
200
+
}