@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
Improve pagination in ChatLog application
Summary:
- Add an extra paginator at the top.
- Add a link to jump to the bottom (where the latest messages are).
- Align paginators with edge of content rather than the page.
Test Plan: Looked at the chatlog.
Reviewers: epriestley, chad, #blessed_reviewers
CC: chad, Korvin, epriestley, aran
Differential Revision: https://secure.phabricator.com/D7280
authored by
Asher Baker
and committed by
epriestley
ff4fa188
8cc64a96
+148
-17
+1
-1
src/__celerity_resource_map__.php
+1
-1
src/__celerity_resource_map__.php
+69
-2
src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php
+69
-2
src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php
···
139
139
$message));
140
140
}
141
141
142
+
$links = array();
143
+
144
+
$first_uri = $pager->getFirstPageURI();
145
+
if ($first_uri) {
146
+
$links[] = phutil_tag(
147
+
'a',
148
+
array(
149
+
'href' => $first_uri,
150
+
),
151
+
"\xC2\xAB ". pht("Newest"));
152
+
}
153
+
154
+
$prev_uri = $pager->getPrevPageURI();
155
+
if ($prev_uri) {
156
+
$links[] = phutil_tag(
157
+
'a',
158
+
array(
159
+
'href' => $prev_uri,
160
+
),
161
+
"\xE2\x80\xB9 " . pht("Newer"));
162
+
}
163
+
164
+
$next_uri = $pager->getNextPageURI();
165
+
if ($next_uri) {
166
+
$links[] = phutil_tag(
167
+
'a',
168
+
array(
169
+
'href' => $next_uri,
170
+
),
171
+
pht("Older") . " \xE2\x80\xBA");
172
+
}
173
+
174
+
$pager_top = phutil_tag(
175
+
'div',
176
+
array('class' => 'phabricator-chat-log-pager-top'),
177
+
$links);
178
+
179
+
$pager_bottom = phutil_tag(
180
+
'div',
181
+
array('class' => 'phabricator-chat-log-pager-bottom'),
182
+
$links);
183
+
142
184
$crumbs = $this
143
185
->buildApplicationCrumbs()
144
186
->addCrumb(
···
176
218
),
177
219
$table);
178
220
221
+
$jump_link = phutil_tag(
222
+
'a',
223
+
array(
224
+
'href' => '#latest'
225
+
),
226
+
pht("Jump to Bottom") . " \xE2\x96\xBE");
227
+
228
+
$jump = phutil_tag(
229
+
'div',
230
+
array(
231
+
'class' => 'phabricator-chat-log-jump'
232
+
),
233
+
$jump_link);
234
+
235
+
$jump_target = phutil_tag(
236
+
'div',
237
+
array(
238
+
'id' => 'latest'
239
+
));
240
+
179
241
$content = phutil_tag(
180
242
'div',
181
243
array(
182
244
'class' => 'phabricator-chat-log-wrap'
183
245
),
184
-
$log);
246
+
array(
247
+
$jump,
248
+
$pager_top,
249
+
$log,
250
+
$jump_target,
251
+
$pager_bottom,
252
+
));
185
253
186
254
return $this->buildApplicationPage(
187
255
array(
188
256
$crumbs,
189
257
$filter,
190
258
$content,
191
-
$pager,
192
259
),
193
260
array(
194
261
'title' => pht('Channel Log'),
+55
-13
src/view/control/AphrontCursorPagerView.php
+55
-13
src/view/control/AphrontCursorPagerView.php
···
86
86
($this->beforeID && $this->moreResults);
87
87
}
88
88
89
+
public function getFirstPageURI() {
90
+
if (!$this->uri) {
91
+
throw new Exception(
92
+
pht("You must call setURI() before you can call getFirstPageURI()."));
93
+
}
94
+
95
+
if (!$this->afterID && !($this->beforeID && $this->moreResults)) {
96
+
return null;
97
+
}
98
+
99
+
return $this->uri
100
+
->alter('before', null)
101
+
->alter('after', null);
102
+
}
103
+
104
+
public function getPrevPageURI() {
105
+
if (!$this->uri) {
106
+
throw new Exception(
107
+
pht("You must call setURI() before you can call getPrevPageURI()."));
108
+
}
109
+
110
+
if (!$this->prevPageID) {
111
+
return null;
112
+
}
113
+
114
+
return $this->uri
115
+
->alter('after', null)
116
+
->alter('before', $this->prevPageID);
117
+
}
118
+
119
+
public function getNextPageURI() {
120
+
if (!$this->uri) {
121
+
throw new Exception(
122
+
pht("You must call setURI() before you can call getNextPageURI()."));
123
+
}
124
+
125
+
if (!$this->nextPageID) {
126
+
return null;
127
+
}
128
+
129
+
return $this->uri
130
+
->alter('after', $this->nextPageID)
131
+
->alter('before', null);
132
+
}
133
+
89
134
public function render() {
90
135
if (!$this->uri) {
91
136
throw new Exception(
···
94
139
95
140
$links = array();
96
141
97
-
if ($this->afterID || ($this->beforeID && $this->moreResults)) {
142
+
$first_uri = $this->getFirstPageURI();
143
+
if ($first_uri) {
98
144
$links[] = phutil_tag(
99
145
'a',
100
146
array(
101
-
'href' => $this->uri
102
-
->alter('before', null)
103
-
->alter('after', null),
147
+
'href' => $first_uri,
104
148
),
105
149
"\xC2\xAB ". pht("First"));
106
150
}
107
151
108
-
if ($this->prevPageID) {
152
+
$prev_uri = $this->getPrevPageURI();
153
+
if ($prev_uri) {
109
154
$links[] = phutil_tag(
110
155
'a',
111
156
array(
112
-
'href' => $this->uri
113
-
->alter('after', null)
114
-
->alter('before', $this->prevPageID),
157
+
'href' => $prev_uri,
115
158
),
116
159
"\xE2\x80\xB9 " . pht("Prev"));
117
160
}
118
161
119
-
if ($this->nextPageID) {
162
+
$next_uri = $this->getNextPageURI();
163
+
if ($next_uri) {
120
164
$links[] = phutil_tag(
121
165
'a',
122
166
array(
123
-
'href' => $this->uri
124
-
->alter('after', $this->nextPageID)
125
-
->alter('before', null),
167
+
'href' => $next_uri,
126
168
),
127
-
"Next \xE2\x80\xBA");
169
+
pht("Next") . " \xE2\x80\xBA");
128
170
}
129
171
130
172
return phutil_tag(
+23
-1
webroot/rsrc/css/application/chatlog/chatlog.css
+23
-1
webroot/rsrc/css/application/chatlog/chatlog.css
···
10
10
padding: 0;
11
11
}
12
12
13
+
.phabricator-chat-log-pager-top {
14
+
padding: 16px 4px 8px;
15
+
font-weight: bold;
16
+
float: right;
17
+
}
18
+
19
+
.phabricator-chat-log-pager-bottom {
20
+
padding: 8px 4px 16px;
21
+
font-weight: bold;
22
+
float: right;
23
+
}
24
+
25
+
.phabricator-chat-log-pager-top a, .phabricator-chat-log-pager-bottom a {
26
+
padding: 2px 3px;
27
+
}
28
+
29
+
.phabricator-chat-log-jump {
30
+
padding: 16px 4px 8px;
31
+
font-weight: bold;
32
+
float: left;
33
+
}
34
+
13
35
.phabricator-chat-log-panel {
14
-
margin: 20px auto;
36
+
clear: both;
15
37
border-left: 1px solid #e7e7e7;
16
38
border-right: 1px solid #e7e7e7;
17
39
border-bottom: 1px solid #c0c5d1;