@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
Update Settings/Config UI
Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall.
Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15659
authored by
Chad Little
and committed by
chad
57e606b3
60e91d39
+122
-49
+5
-5
resources/celerity/map.php
+5
-5
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '03a2a623',
10
+
'core.pkg.css' => '82cefddc',
11
11
'core.pkg.js' => 'e5484f37',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '7ba78475',
···
126
126
'rsrc/css/phui/phui-box.css' => 'd909ea3d',
127
127
'rsrc/css/phui/phui-button.css' => 'a64a8de6',
128
128
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
129
-
'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
129
+
'rsrc/css/phui/phui-crumbs-view.css' => '1a1265d4',
130
130
'rsrc/css/phui/phui-curtain-view.css' => '7148ae25',
131
131
'rsrc/css/phui/phui-document-pro.css' => '73e45fd2',
132
132
'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
···
156
156
'rsrc/css/phui/phui-status.css' => '37309046',
157
157
'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
158
158
'rsrc/css/phui/phui-timeline-view.css' => '6e342216',
159
-
'rsrc/css/phui/phui-two-column-view.css' => '691fec04',
159
+
'rsrc/css/phui/phui-two-column-view.css' => 'b9538af1',
160
160
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
161
161
'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
162
162
'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
···
812
812
'phui-calendar-list-css' => 'c1c7f338',
813
813
'phui-calendar-month-css' => '476be7e0',
814
814
'phui-chart-css' => '6bf6f78e',
815
-
'phui-crumbs-view-css' => '79d536e5',
815
+
'phui-crumbs-view-css' => '1a1265d4',
816
816
'phui-curtain-view-css' => '7148ae25',
817
817
'phui-document-summary-view-css' => '9ca48bdf',
818
818
'phui-document-view-css' => '9c71d2bf',
···
846
846
'phui-tag-view-css' => '6bbd83e2',
847
847
'phui-theme-css' => '027ba77e',
848
848
'phui-timeline-view-css' => '6e342216',
849
-
'phui-two-column-view-css' => '691fec04',
849
+
'phui-two-column-view-css' => 'b9538af1',
850
850
'phui-workboard-color-css' => 'ac6fe6a7',
851
851
'phui-workboard-view-css' => 'e6d89647',
852
852
'phui-workcard-view-css' => '3646fb96',
+8
-4
src/applications/config/controller/PhabricatorConfigAllController.php
+8
-4
src/applications/config/controller/PhabricatorConfigAllController.php
···
58
58
$panel->setHeaderText(pht('Current Settings'));
59
59
$panel->setTable($table);
60
60
61
-
62
61
$nav = $this->buildSideNavView();
63
62
$nav->selectFilter('all/');
64
-
$nav->setCrumbs($crumbs);
65
-
$nav->appendChild($panel);
63
+
64
+
$view = id(new PHUITwoColumnView())
65
+
->setNavigation($nav)
66
+
->setMainColumn(array(
67
+
$panel,
68
+
));
66
69
67
70
return $this->newPage()
68
71
->setTitle($title)
69
-
->appendChild($nav);
72
+
->setCrumbs($crumbs)
73
+
->appendChild($view);
70
74
71
75
}
72
76
+6
-5
src/applications/config/controller/PhabricatorConfigCacheController.php
+6
-5
src/applications/config/controller/PhabricatorConfigCacheController.php
···
18
18
$code_box = $this->renderCodeBox();
19
19
$data_box = $this->renderDataBox();
20
20
21
-
$nav->appendChild(
22
-
array(
23
-
$crumbs,
21
+
$view = id(new PHUITwoColumnView())
22
+
->setNavigation($nav)
23
+
->setMainColumn(array(
24
24
$code_box,
25
25
$data_box,
26
-
));
26
+
));
27
27
28
28
return $this->newPage()
29
29
->setTitle($title)
30
-
->appendChild($nav);
30
+
->setCrumbs($crumbs)
31
+
->appendChild($view);
31
32
}
32
33
33
34
private function renderCodeBox() {
+7
-5
src/applications/config/controller/PhabricatorConfigDatabaseIssueController.php
+7
-5
src/applications/config/controller/PhabricatorConfigDatabaseIssueController.php
···
153
153
154
154
$nav = $this->buildSideNavView();
155
155
$nav->selectFilter('dbissue/');
156
-
$nav->appendChild(
157
-
array(
158
-
$crumbs,
156
+
157
+
$view = id(new PHUITwoColumnView())
158
+
->setNavigation($nav)
159
+
->setMainColumn(array(
159
160
$table_box,
160
-
));
161
+
));
161
162
162
163
return $this->newPage()
163
164
->setTitle($title)
164
-
->appendChild($nav);
165
+
->setCrumbs($crumbs)
166
+
->appendChild($view);
165
167
}
166
168
167
169
}
+7
-3
src/applications/config/controller/PhabricatorConfigDatabaseStatusController.php
+7
-3
src/applications/config/controller/PhabricatorConfigDatabaseStatusController.php
···
91
91
$crumbs->addTextCrumb(pht('Database Status'));
92
92
}
93
93
94
-
$nav->setCrumbs($crumbs);
95
-
$nav->appendChild($body);
94
+
$view = id(new PHUITwoColumnView())
95
+
->setNavigation($nav)
96
+
->setMainColumn(array(
97
+
$body,
98
+
));
96
99
97
100
return $this->newPage()
98
101
->setTitle($title)
99
-
->appendChild($nav);
102
+
->setCrumbs($crumbs)
103
+
->appendChild($view);
100
104
}
101
105
102
106
+8
-4
src/applications/config/controller/PhabricatorConfigHistoryController.php
+8
-4
src/applications/config/controller/PhabricatorConfigHistoryController.php
···
31
31
$title = pht('Settings History');
32
32
33
33
$crumbs = $this->buildApplicationCrumbs();
34
-
$crumbs->setBorder(true);
35
34
$crumbs->addTextCrumb('Config', $this->getApplicationURI());
36
35
$crumbs->addTextCrumb($title, '/config/history/');
37
36
38
37
$nav = $this->buildSideNavView();
39
38
$nav->selectFilter('history/');
40
-
$nav->setCrumbs($crumbs);
41
-
$nav->appendChild($timeline);
39
+
40
+
$view = id(new PHUITwoColumnView())
41
+
->setNavigation($nav)
42
+
->setMainColumn(array(
43
+
$timeline,
44
+
));
42
45
43
46
return $this->newPage()
44
47
->setTitle($title)
45
-
->appendChild($nav);
48
+
->setCrumbs($crumbs)
49
+
->appendChild($view);
46
50
}
47
51
48
52
}
+7
-4
src/applications/config/controller/PhabricatorConfigIssueListController.php
+7
-4
src/applications/config/controller/PhabricatorConfigIssueListController.php
···
56
56
->setSeverity(PHUIInfoView::SEVERITY_NOTICE);
57
57
}
58
58
59
-
$nav->appendChild($setup_issues);
60
-
61
59
$title = pht('Setup Issues');
62
60
63
61
$crumbs = $this
64
62
->buildApplicationCrumbs($nav)
65
63
->addTextCrumb(pht('Setup'), $this->getApplicationURI('issue/'));
66
64
67
-
$nav->setCrumbs($crumbs);
65
+
$view = id(new PHUITwoColumnView())
66
+
->setNavigation($nav)
67
+
->setMainColumn(array(
68
+
$setup_issues,
69
+
));
68
70
69
71
return $this->newPage()
70
72
->setTitle($title)
71
-
->appendChild($nav);
73
+
->setCrumbs($crumbs)
74
+
->appendChild($view);
72
75
}
73
76
74
77
private function buildIssueList(array $issues, $group) {
+8
-8
src/applications/config/controller/PhabricatorConfigListController.php
+8
-8
src/applications/config/controller/PhabricatorConfigListController.php
···
23
23
->setHeaderText(pht('Applications Configuration'))
24
24
->setObjectList($apps_list);
25
25
26
-
$nav->appendChild(
27
-
array(
28
-
$core,
29
-
$apps,
30
-
));
31
-
32
26
$crumbs = $this
33
27
->buildApplicationCrumbs()
34
28
->addTextCrumb(pht('Config'), $this->getApplicationURI());
35
29
36
-
$nav->setCrumbs($crumbs);
30
+
$view = id(new PHUITwoColumnView())
31
+
->setNavigation($nav)
32
+
->setMainColumn(array(
33
+
$core,
34
+
$apps,
35
+
));
37
36
38
37
return $this->newPage()
39
38
->setTitle($title)
40
-
->appendChild($nav);
39
+
->setCrumbs($crumbs)
40
+
->appendChild($view);
41
41
}
42
42
43
43
private function buildConfigOptionsList(array $groups, $type) {
+6
-4
src/applications/config/controller/PhabricatorConfigModuleController.php
+6
-4
src/applications/config/controller/PhabricatorConfigModuleController.php
···
21
21
22
22
$nav = $this->buildSideNavView();
23
23
$nav->selectFilter('module/'.$key.'/');
24
-
$nav->appendChild(
25
-
array(
26
-
$crumbs,
24
+
25
+
$view = id(new PHUITwoColumnView())
26
+
->setNavigation($nav)
27
+
->setMainColumn(array(
27
28
$content,
28
29
));
29
30
30
31
return $this->newPage()
31
32
->setTitle($title)
32
-
->appendChild($nav);
33
+
->setCrumbs($crumbs)
34
+
->appendChild($view);
33
35
}
34
36
35
37
}
+7
-3
src/applications/config/controller/PhabricatorConfigWelcomeController.php
+7
-3
src/applications/config/controller/PhabricatorConfigWelcomeController.php
···
15
15
->buildApplicationCrumbs()
16
16
->addTextCrumb(pht('Welcome'));
17
17
18
-
$nav->setCrumbs($crumbs);
19
-
$nav->appendChild($this->buildWelcomeScreen($request));
18
+
$view = id(new PHUITwoColumnView())
19
+
->setNavigation($nav)
20
+
->setMainColumn(array(
21
+
$this->buildWelcomeScreen($request),
22
+
));
20
23
21
24
return $this->newPage()
22
25
->setTitle($title)
23
-
->appendChild($nav);
26
+
->setCrumbs($crumbs)
27
+
->appendChild($view);
24
28
}
25
29
26
30
public function buildWelcomeScreen(AphrontRequest $request) {
+5
-2
src/applications/settings/controller/PhabricatorSettingsMainController.php
+5
-2
src/applications/settings/controller/PhabricatorSettingsMainController.php
···
61
61
'/p/'.$this->getUser()->getUsername().'/');
62
62
}
63
63
$crumbs->addTextCrumb($panel->getPanelName());
64
-
$nav->appendChild($response);
65
64
66
65
$title = $panel->getPanelName();
67
66
67
+
$view = id(new PHUITwoColumnView())
68
+
->setNavigation($nav)
69
+
->setMainColumn($response);
70
+
68
71
return $this->newPage()
69
72
->setTitle($title)
70
73
->setCrumbs($crumbs)
71
-
->setNavigation($nav);
74
+
->appendChild($view);
72
75
73
76
}
74
77
+18
-1
src/view/phui/PHUITwoColumnView.php
+18
-1
src/view/phui/PHUITwoColumnView.php
···
4
4
5
5
private $mainColumn;
6
6
private $sideColumn = null;
7
+
private $navigation;
7
8
private $display;
8
9
private $fluid;
9
10
private $header;
···
22
23
23
24
public function setSideColumn($side) {
24
25
$this->sideColumn = $side;
26
+
return $this;
27
+
}
28
+
29
+
public function setNavigation($nav) {
30
+
$this->navigation = $nav;
31
+
$this->display = self::DISPLAY_LEFT;
25
32
return $this;
26
33
}
27
34
···
162
169
163
170
private function buildSideColumn() {
164
171
172
+
$classes = array();
173
+
$classes[] = 'phui-side-column';
174
+
$navigation = null;
175
+
if ($this->navigation) {
176
+
$classes[] = 'side-has-nav';
177
+
$navigation = id(new PHUIObjectBoxView())
178
+
->appendChild($this->navigation);
179
+
}
180
+
165
181
$curtain = $this->getCurtain();
166
182
167
183
return phutil_tag(
168
184
'div',
169
185
array(
170
-
'class' => 'phui-side-column',
186
+
'class' => implode($classes, ' '),
171
187
),
172
188
array(
189
+
$navigation,
173
190
$curtain,
174
191
$this->sideColumn,
175
192
));
+1
-1
webroot/rsrc/css/phui/phui-crumbs-view.css
+1
-1
webroot/rsrc/css/phui/phui-crumbs-view.css
+29
webroot/rsrc/css/phui/phui-two-column-view.css
+29
webroot/rsrc/css/phui/phui-two-column-view.css
···
70
70
width: 300px;
71
71
}
72
72
73
+
.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
74
+
float: right;
75
+
width: calc(100% - 280px);
76
+
}
77
+
78
+
.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
79
+
float: left;
80
+
width: 260px;
81
+
}
82
+
73
83
.device .phui-side-column {
74
84
margin-bottom: 20px;
75
85
}
···
202
212
.phui-header-shell + .phui-info-view {
203
213
margin: 16px;
204
214
}
215
+
216
+
/* Navigation */
217
+
218
+
.phui-two-column-view .side-has-nav .phabricator-nav-local {
219
+
width: auto;
220
+
position: static;
221
+
margin: 0;
222
+
}
223
+
224
+
.device .phui-two-column-view .side-has-nav {
225
+
display: none;
226
+
}
227
+
228
+
/* Document View */
229
+
230
+
.phui-two-column-view .phui-two-column-content .phui-document-fluid
231
+
.phui-document-view {
232
+
margin: 0 0 20px 0;
233
+
}