@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
Allow DocumentView to render with a curtain, and make Phriction use a curtain
Summary:
Depends on D19616. Ref T13077. Fixes T8172. In the last round of design updates, a lot of actions got stuffed into "Actions" menus.
I never really got used to these and think they're a net usability loss, and broadly agree with the feedback in T8172. I'd generally like to move back toward a state where actions are available on the page, not hidden in a menu.
For now, just put a curtain view on these pages. This could be refined later (e.g., stick this menu to the right hand side of the screen) depending on where other Phriction changes go.
(Broadly, I'm also not satisfied with where we ended up on the fixed-width pages like Diffusion > Manage, Config, and Instances. In contrast, I //do// like where we ended up with Phortune in terms of overall design. I anticipate revisiting some of this stuff eventually.)
Test Plan:
- Looked at Phriction pages on desktop/tablet/mobile/printable -- actions are now available on the page.
- Looked at other DocumentView pages (like Phame blogs) -- no changes for now.
Reviewers: amckinley
Maniphest Tasks: T13077, T8172
Differential Revision: https://secure.phabricator.com/D19617
+116
-57
+7
-7
resources/celerity/map.php
+7
-7
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'e68cf1fa',
11
11
'conpherence.pkg.js' => '15191c65',
12
-
'core.pkg.css' => 'fc4839c8',
12
+
'core.pkg.css' => 'badf3f16',
13
13
'core.pkg.js' => 'b5a949ca',
14
14
'differential.pkg.css' => '06dc617c',
15
15
'differential.pkg.js' => 'c1cfa143',
···
146
146
'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad',
147
147
'rsrc/css/phui/phui-crumbs-view.css' => '10728aaa',
148
148
'rsrc/css/phui/phui-curtain-view.css' => '2bdaf026',
149
-
'rsrc/css/phui/phui-document-pro.css' => '8af7ea27',
149
+
'rsrc/css/phui/phui-document-pro.css' => '0e41dd91',
150
150
'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
151
-
'rsrc/css/phui/phui-document.css' => '878c2f52',
151
+
'rsrc/css/phui/phui-document.css' => '552493fa',
152
152
'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
153
153
'rsrc/css/phui/phui-fontkit.css' => '1320ed01',
154
154
'rsrc/css/phui/phui-form-view.css' => 'f808e5be',
155
155
'rsrc/css/phui/phui-form.css' => '7aaa04e3',
156
156
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
157
-
'rsrc/css/phui/phui-header-view.css' => 'edeb9252',
157
+
'rsrc/css/phui/phui-header-view.css' => '1ba8b707',
158
158
'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
159
159
'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
160
160
'rsrc/css/phui/phui-icon.css' => 'cf24ceec',
···
813
813
'phui-crumbs-view-css' => '10728aaa',
814
814
'phui-curtain-view-css' => '2bdaf026',
815
815
'phui-document-summary-view-css' => '9ca48bdf',
816
-
'phui-document-view-css' => '878c2f52',
817
-
'phui-document-view-pro-css' => '8af7ea27',
816
+
'phui-document-view-css' => '552493fa',
817
+
'phui-document-view-pro-css' => '0e41dd91',
818
818
'phui-feed-story-css' => '44a9c8e9',
819
819
'phui-font-icon-base-css' => '870a7360',
820
820
'phui-fontkit-css' => '1320ed01',
821
821
'phui-form-css' => '7aaa04e3',
822
822
'phui-form-view-css' => 'f808e5be',
823
823
'phui-head-thing-view-css' => 'fd311e5f',
824
-
'phui-header-view-css' => 'edeb9252',
824
+
'phui-header-view-css' => '1ba8b707',
825
825
'phui-hovercard' => '1bd28176',
826
826
'phui-hovercard-view-css' => 'f0592bcf',
827
827
'phui-icon-set-selector-css' => '87db8fee',
+20
-26
src/applications/phriction/controller/PhrictionDocumentController.php
+20
-26
src/applications/phriction/controller/PhrictionDocumentController.php
···
201
201
202
202
$children = $this->renderDocumentChildren($slug);
203
203
204
-
$actions = $this->buildActionView($viewer, $document);
204
+
$curtain = null;
205
+
if ($document->getID()) {
206
+
$curtain = $this->buildCurtain($document);
207
+
}
205
208
206
209
$crumbs = $this->buildApplicationCrumbs();
207
210
$crumbs->setBorder(true);
···
213
216
$header = id(new PHUIHeaderView())
214
217
->setUser($viewer)
215
218
->setPolicyObject($document)
216
-
->setHeader($page_title)
217
-
->setActionList($actions);
219
+
->setHeader($page_title);
218
220
219
221
if ($content) {
220
222
$header->setEpoch($content->getDateCreated());
···
236
238
$move_notice,
237
239
$core_content,
238
240
));
241
+
242
+
if ($curtain) {
243
+
$page_content->setCurtain($curtain);
244
+
}
239
245
240
246
return $this->newPage()
241
247
->setTitle($page_title)
···
258
264
$viewer = $this->getViewer();
259
265
260
266
$view = id(new PHUIPropertyListView())
261
-
->setUser($viewer)
262
-
->setObject($document);
267
+
->setUser($viewer);
263
268
264
269
$view->addProperty(
265
270
pht('Last Author'),
···
272
277
return $view;
273
278
}
274
279
275
-
private function buildActionView(
276
-
PhabricatorUser $viewer,
277
-
PhrictionDocument $document) {
280
+
private function buildCurtain(PhrictionDocument $document) {
281
+
$viewer = $this->getViewer();
282
+
278
283
$can_edit = PhabricatorPolicyFilter::hasCapability(
279
284
$viewer,
280
285
$document,
···
282
287
283
288
$slug = PhabricatorSlug::normalize($this->slug);
284
289
285
-
$action_view = id(new PhabricatorActionListView())
286
-
->setUser($viewer)
287
-
->setObject($document);
288
-
289
-
if (!$document->getID()) {
290
-
return $action_view->addAction(
291
-
id(new PhabricatorActionView())
292
-
->setName(pht('Create This Document'))
293
-
->setIcon('fa-plus-square')
294
-
->setHref('/phriction/edit/?slug='.$slug));
295
-
}
290
+
$curtain = $this->newCurtainView($document);
296
291
297
-
$action_view->addAction(
292
+
$curtain->addAction(
298
293
id(new PhabricatorActionView())
299
294
->setName(pht('Edit Document'))
300
295
->setDisabled(!$can_edit)
···
302
297
->setHref('/phriction/edit/'.$document->getID().'/'));
303
298
304
299
if ($document->getStatus() == PhrictionDocumentStatus::STATUS_EXISTS) {
305
-
$action_view->addAction(
300
+
$curtain->addAction(
306
301
id(new PhabricatorActionView())
307
302
->setName(pht('Move Document'))
308
303
->setDisabled(!$can_edit)
···
310
305
->setHref('/phriction/move/'.$document->getID().'/')
311
306
->setWorkflow(true));
312
307
313
-
$action_view->addAction(
308
+
$curtain->addAction(
314
309
id(new PhabricatorActionView())
315
310
->setName(pht('Delete Document'))
316
311
->setDisabled(!$can_edit)
···
319
314
->setWorkflow(true));
320
315
}
321
316
322
-
$action_view->addAction(
317
+
$curtain->addAction(
323
318
id(new PhabricatorActionView())
324
319
->setName(pht('View History'))
325
320
->setIcon('fa-list')
···
327
322
328
323
$print_uri = PhrictionDocument::getSlugURI($slug).'?__print__=1';
329
324
330
-
$action_view->addAction(
325
+
$curtain->addAction(
331
326
id(new PhabricatorActionView())
332
327
->setName(pht('Printable Page'))
333
328
->setIcon('fa-print')
334
329
->setOpenInNewWindow(true)
335
330
->setHref($print_uri));
336
331
337
-
return $action_view;
338
-
332
+
return $curtain;
339
333
}
340
334
341
335
private function renderDocumentChildren($slug) {
+58
-18
src/view/phui/PHUIDocumentView.php
+58
-18
src/view/phui/PHUIDocumentView.php
···
8
8
private $fluid;
9
9
private $toc;
10
10
private $foot;
11
+
private $curtain;
11
12
12
13
public function setHeader(PHUIHeaderView $header) {
13
14
$header->setTall(true);
···
34
35
public function setFoot($foot) {
35
36
$this->foot = $foot;
36
37
return $this;
38
+
}
39
+
40
+
public function setCurtain(PHUICurtainView $curtain) {
41
+
$this->curtain = $curtain;
42
+
return $this;
43
+
}
44
+
45
+
public function getCurtain() {
46
+
return $this->curtain;
37
47
}
38
48
39
49
protected function getTagAttributes() {
···
61
71
$classes[] = 'phui-document-view';
62
72
$classes[] = 'phui-document-view-pro';
63
73
74
+
if ($this->curtain) {
75
+
$classes[] = 'has-curtain';
76
+
} else {
77
+
$classes[] = 'has-no-curtain';
78
+
}
79
+
80
+
if ($this->curtain) {
81
+
$action_list = $this->curtain->getActionList();
82
+
$this->header->setActionListID($action_list->getID());
83
+
}
84
+
64
85
$book = null;
65
86
if ($this->bookname) {
66
87
$book = pht('%s (%s)', $this->bookname, $this->bookdescription);
···
114
135
$this->foot);
115
136
}
116
137
117
-
$content_inner = phutil_tag(
138
+
$curtain = null;
139
+
if ($this->curtain) {
140
+
$curtain = phutil_tag(
118
141
'div',
119
142
array(
120
-
'class' => 'phui-document-inner',
143
+
'class' => 'phui-document-curtain',
121
144
),
122
-
array(
123
-
$table_of_contents,
124
-
$this->header,
125
-
$main_content,
126
-
$foot_content,
127
-
));
145
+
$this->curtain);
146
+
}
128
147
129
-
$content = phutil_tag(
130
-
'div',
148
+
$main_content = phutil_tag(
149
+
'div',
150
+
array(
151
+
'class' => 'phui-document-content-view',
152
+
),
153
+
$main_content);
154
+
155
+
$content_inner = phutil_tag(
156
+
'div',
157
+
array(
158
+
'class' => 'phui-document-inner',
159
+
),
160
+
array(
161
+
$table_of_contents,
162
+
$this->header,
131
163
array(
132
-
'class' => 'phui-document-content',
164
+
$curtain,
165
+
$main_content,
133
166
),
134
-
$content_inner);
167
+
$foot_content,
168
+
));
135
169
136
-
return phutil_tag(
137
-
'div',
138
-
array(
139
-
'class' => implode(' ', $classes),
140
-
),
141
-
$content);
170
+
$content = phutil_tag(
171
+
'div',
172
+
array(
173
+
'class' => 'phui-document-content',
174
+
),
175
+
$content_inner);
142
176
177
+
return phutil_tag(
178
+
'div',
179
+
array(
180
+
'class' => implode(' ', $classes),
181
+
),
182
+
$content);
143
183
}
144
184
145
185
}
+29
webroot/rsrc/css/phui/phui-document-pro.css
+29
webroot/rsrc/css/phui/phui-document-pro.css
···
8
8
margin: 0 auto;
9
9
}
10
10
11
+
.phui-document-view.phui-document-view-pro.has-curtain {
12
+
max-width: 1132px;
13
+
}
14
+
15
+
.printable .phui-document-view.phui-document-view-pro.has-curtain {
16
+
max-width: none;
17
+
}
18
+
19
+
.device-desktop .phui-document-inner {
20
+
overflow: hidden;
21
+
}
22
+
23
+
.device-desktop .has-curtain .phui-document-content-view {
24
+
padding-right: 332px;
25
+
}
26
+
27
+
.printable .phui-document-content-view {
28
+
padding-right: 0;
29
+
}
30
+
31
+
.device-desktop .phui-document-curtain {
32
+
float: right;
33
+
width: 300px;
34
+
}
35
+
36
+
.printable .phui-document-curtain {
37
+
display: none;
38
+
}
39
+
11
40
.phui-document-container {
12
41
background-color: {$page.content};
13
42
position: relative;
+2
-5
webroot/rsrc/css/phui/phui-document.css
+2
-5
webroot/rsrc/css/phui/phui-document.css
···
63
63
font-size: 14px;
64
64
}
65
65
66
-
.phui-document-view .phui-header-action-links .phui-mobile-menu {
66
+
.phui-document-view.has-no-curtain
67
+
.phui-header-action-links .phui-mobile-menu {
67
68
display: block;
68
69
}
69
70
70
71
.device-phone .phui-document-content .phabricator-remarkup {
71
72
padding: 8px;
72
-
}
73
-
74
-
.device-desktop .phui-document-content .phabricator-action-list-view {
75
-
display: none;
76
73
}
77
74
78
75
.phui-document-content .phabricator-remarkup .remarkup-code-block {