@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
First pass at new Workboard UI
Summary: Cleans up Workboards to match the mocks. No new functionality, just more consistent colors/spacing/common components.
Test Plan:
Visit a few workboards, drag and drop items. Mobile, Tablet, Desktop
{F1070733}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15115
+104
-107
+6
-6
resources/celerity/map.php
+6
-6
resources/celerity/map.php
···
35
35
'rsrc/css/application/base/main-menu-view.css' => 'd00a795a',
36
36
'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
37
37
'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601',
38
-
'rsrc/css/application/base/phui-theme.css' => '981a58f8',
38
+
'rsrc/css/application/base/phui-theme.css' => 'd52033fb',
39
39
'rsrc/css/application/base/standard-page-view.css' => '7b0d68d8',
40
40
'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
41
41
'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
···
153
153
'rsrc/css/phui/phui-text.css' => 'cf019f54',
154
154
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
155
155
'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
156
-
'rsrc/css/phui/phui-workboard-view.css' => 'f488d036',
157
-
'rsrc/css/phui/phui-workpanel-view.css' => 'adec7699',
156
+
'rsrc/css/phui/phui-workboard-view.css' => '04b34072',
157
+
'rsrc/css/phui/phui-workpanel-view.css' => '31a835ba',
158
158
'rsrc/css/sprite-login.css' => '60e8560e',
159
159
'rsrc/css/sprite-menu.css' => '9dd65b92',
160
160
'rsrc/css/sprite-tokens.css' => '4f399012',
···
827
827
'phui-status-list-view-css' => '888cedb8',
828
828
'phui-tag-view-css' => 'e60e227b',
829
829
'phui-text-css' => 'cf019f54',
830
-
'phui-theme-css' => '981a58f8',
830
+
'phui-theme-css' => 'd52033fb',
831
831
'phui-timeline-view-css' => '2efceff8',
832
832
'phui-two-column-view-css' => 'c75bfc5b',
833
-
'phui-workboard-view-css' => 'f488d036',
834
-
'phui-workpanel-view-css' => 'adec7699',
833
+
'phui-workboard-view-css' => '04b34072',
834
+
'phui-workpanel-view-css' => '31a835ba',
835
835
'phuix-action-list-view' => 'b5c256b8',
836
836
'phuix-action-view' => '8cf6d262',
837
837
'phuix-autocomplete' => '9196fb06',
+18
-32
src/applications/project/controller/PhabricatorProjectBoardViewController.php
+18
-32
src/applications/project/controller/PhabricatorProjectBoardViewController.php
···
332
332
),
333
333
$project->getName());
334
334
335
-
$header = id(new PHUIHeaderView())
336
-
->setHeader($header_link)
337
-
->setUser($viewer)
338
-
->setNoBackground(true)
339
-
->addActionLink($sort_menu)
340
-
->addActionLink($filter_menu)
341
-
->addActionLink($manage_menu)
342
-
->setPolicyObject($project);
343
-
344
-
$header_box = id(new PHUIBoxView())
345
-
->appendChild($header)
346
-
->addClass('project-board-header');
347
-
348
335
$board_box = id(new PHUIBoxView())
349
336
->appendChild($board)
350
337
->addClass('project-board-wrapper');
351
338
352
339
$nav = $this->getProfileMenu();
353
340
341
+
$crumbs = $this->buildApplicationCrumbs();
342
+
$crumbs->addTextCrumb(pht('Workboard'));
343
+
$crumbs->setBorder(true);
344
+
345
+
$crumbs->addAction($sort_menu);
346
+
$crumbs->addAction($filter_menu);
347
+
$crumbs->addAction($manage_menu);
348
+
354
349
return $this->newPage()
355
350
->setTitle(pht('%s Board', $project->getName()))
356
351
->setPageObjectPHIDs(array($project->getPHID()))
357
352
->setShowFooter(false)
358
353
->setNavigation($nav)
354
+
->setCrumbs($crumbs)
359
355
->addQuicksandConfig(
360
356
array(
361
357
'boardConfig' => $behavior_config,
362
358
))
363
359
->appendChild(
364
360
array(
365
-
$header_box,
366
361
$board_box,
367
362
));
368
363
}
···
443
438
$sort_menu->addAction($item);
444
439
}
445
440
446
-
$sort_button = id(new PHUIButtonView())
447
-
->setText(pht('Sort: %s', $active_order))
448
-
->setIcon($sort_icon)
449
-
->setTag('a')
441
+
$sort_button = id(new PHUIListItemView())
442
+
->setName(pht('Sort: %s', $active_order))
443
+
->setIcon('fa-sort-amount-asc')
450
444
->setHref('#')
451
445
->addSigil('boards-dropdown-menu')
452
446
->setMetadata(
···
461
455
$custom_query,
462
456
PhabricatorApplicationSearchEngine $engine,
463
457
$query_key) {
464
-
465
-
$filter_icon = id(new PHUIIconView())
466
-
->setIconFont('fa-search-plus bluegrey');
467
458
468
459
$named = array(
469
460
'open' => pht('Open Tasks'),
···
521
512
$filter_menu->addAction($item);
522
513
}
523
514
524
-
$filter_button = id(new PHUIButtonView())
525
-
->setText(pht('Filter: %s', $active_filter))
526
-
->setIcon($filter_icon)
527
-
->setTag('a')
515
+
$filter_button = id(new PHUIListItemView())
516
+
->setName(pht('Filter: %s', $active_filter))
517
+
->setIcon('fa-search')
528
518
->setHref('#')
529
519
->addSigil('boards-dropdown-menu')
530
520
->setMetadata(
···
546
536
$viewer,
547
537
$project,
548
538
PhabricatorPolicyCapability::CAN_EDIT);
549
-
550
-
$manage_icon = id(new PHUIIconView())
551
-
->setIconFont('fa-cog bluegrey');
552
539
553
540
$manage_items = array();
554
541
···
602
589
$manage_menu->addAction($item);
603
590
}
604
591
605
-
$manage_button = id(new PHUIButtonView())
606
-
->setText(pht('Manage Board'))
607
-
->setIcon($manage_icon)
608
-
->setTag('a')
592
+
$manage_button = id(new PHUIListItemView())
593
+
->setName(pht('Manage Board'))
594
+
->setIcon('fa-cog')
609
595
->setHref('#')
610
596
->addSigil('boards-dropdown-menu')
611
597
->setMetadata(
+9
-12
src/view/phui/PHUIWorkpanelView.php
+9
-12
src/view/phui/PHUIWorkpanelView.php
···
58
58
protected function getTagContent() {
59
59
require_celerity_resource('phui-workpanel-view-css');
60
60
61
-
$classes = array();
62
-
$classes[] = 'phui-workpanel-view-inner';
63
61
$footer = '';
64
62
if ($this->footerAction) {
65
63
$footer_tag = $this->footerAction;
···
94
92
),
95
93
$this->cards);
96
94
97
-
$view = phutil_tag(
98
-
'div',
99
-
array(
100
-
'class' => implode(' ', $classes),
101
-
),
102
-
array(
103
-
$header,
104
-
$body,
105
-
$footer,
106
-
));
95
+
$view = id(new PHUIBoxView())
96
+
->setColor(PHUIBoxView::GREY)
97
+
->addClass('phui-workpanel-view-inner')
98
+
->appendChild(
99
+
array(
100
+
$header,
101
+
$body,
102
+
$footer,
103
+
));
107
104
108
105
return $view;
109
106
}
-8
webroot/rsrc/css/application/base/phui-theme.css
-8
webroot/rsrc/css/application/base/phui-theme.css
···
67
67
text-shadow: {$whitetextshadow};
68
68
}
69
69
70
-
.phui-theme-light .sprite-main-header {
71
-
background-image: none;
72
-
}
73
-
74
70
.device-desktop.phui-theme-light .phabricator-main-menu-brand:hover {
75
71
background-color: rgba(55,55,55,.08);
76
72
cursor: hand;
···
121
117
.phui-theme-blindigo {
122
118
background-color: #F1F1F4;
123
119
}
124
-
125
-
.phui-theme-blindigo .phui-workpanel-view .phui-header-shell {
126
-
background-color: #F1F1F4;
127
-
}
+7
-42
webroot/rsrc/css/phui/phui-workboard-view.css
+7
-42
webroot/rsrc/css/phui/phui-workboard-view.css
···
9
9
.device-desktop .phui-workboard-view-shadow {
10
10
overflow-x: auto;
11
11
position: absolute;
12
-
top: 96px;
12
+
top: 79px;
13
13
bottom: 0;
14
14
left: 0;
15
15
right: 0;
16
+
background: #fff;
17
+
padding: 16px;
16
18
}
17
19
18
20
.device-desktop .page-has-warning .phui-workboard-view-shadow {
···
38
40
}
39
41
40
42
.device-desktop .project-board-wrapper .phui-workboard-view-shadow {
41
-
left: 253px;
43
+
left: {$menu.profile.width};
42
44
}
43
45
44
46
.device-desktop .phui-profile-menu-collapsed .project-board-wrapper
45
47
.phui-workboard-view-shadow {
46
-
left: 101px;
48
+
left: {$menu.profile.width.collapsed};
47
49
}
48
50
49
51
.device-desktop .phui-workboard-view .aphront-multi-column-fixed
···
51
53
margin-left: 0;
52
54
}
53
55
54
-
.device-tablet .project-board-wrapper {
55
-
margin-left: 8px;
56
-
margin-right: 8px;
57
-
}
58
-
59
-
.project-board-header {
60
-
background-color: #fff;
61
-
border-bottom: 1px solid {$lightblueborder};
62
-
padding: 12px;
63
-
position: relative;
64
-
}
65
-
66
-
.device .project-board-header {
67
-
padding: 0;
68
-
}
69
-
70
-
.project-board-header .phui-header-shell {
71
-
padding: 0;
72
-
border-bottom: 1px solid {$blueborder};
73
-
}
74
-
75
-
.device .project-board-header .phui-header-shell {
76
-
padding: 8px;
77
-
}
78
-
79
-
.project-board-header .phui-header-header {
80
-
font-size: 18px;
81
-
}
82
-
83
-
.project-board-header .phui-header-subheader {
84
-
display: inline-block;
85
-
margin: 0;
86
-
padding: 0 8px;
87
-
}
88
-
89
-
.device-phone .project-board-header .phui-header-subheader {
90
-
display: block;
91
-
margin: 8px 0 2px 0;
92
-
padding: 0;
56
+
.device .project-board-wrapper {
57
+
margin: 16px;
93
58
}
+64
-7
webroot/rsrc/css/phui/phui-workpanel-view.css
+64
-7
webroot/rsrc/css/phui/phui-workpanel-view.css
···
3
3
*/
4
4
5
5
.phui-workpanel-view .phui-header-shell {
6
-
padding: 16px 0 8px;
7
-
border-color: {$lightgreyborder};
8
-
width: 300px;
9
-
background-color: transparent;
6
+
padding: 8px;
7
+
width: 284px;
10
8
}
11
9
12
10
.phui-workpanel-view .phui-header-shell .phui-header-header {
···
24
22
25
23
.device-phone .phui-workboard-view {
26
24
width: auto;
27
-
margin: 0 8px;
25
+
}
26
+
27
+
.device .phui-workpanel-view .phui-header-shell {
28
+
width: auto;
28
29
}
29
30
30
31
.phui-workboard-view {
···
36
37
user-select: none;
37
38
}
38
39
40
+
.phui-workboard-view .phui-object-item {
41
+
background-color: #fff;
42
+
border-top-left-radius: 3px;
43
+
border-bottom-left-radius: 3px;
44
+
margin-bottom: 6px;
45
+
}
46
+
47
+
.phui-workboard-view .phui-object-item-frame {
48
+
border-top-right-radius: 3px;
49
+
border-bottom-right-radius: 3px;
50
+
}
51
+
39
52
.phui-workboard-view .phui-object-item .phui-object-item-objname {
40
53
-webkit-touch-callout: text;
41
54
-webkit-user-select: text;
···
62
75
}
63
76
64
77
.phui-workpanel-view .phui-workpanel-body {
65
-
padding-top: 8px;
78
+
padding: 8px 8px 4px 8px;
66
79
}
67
80
68
81
.phui-workpanel-view .phui-workpanel-footer-action a {
···
86
99
display: inline-block;
87
100
}
88
101
89
-
.aphront-multi-column-fixed .phui-workpanel-view {
102
+
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
90
103
width: 300px;
91
104
}
92
105
···
148
161
.phui-workpanel-view .phui-object-item-attribute a {
149
162
color: {$bluetext};
150
163
}
164
+
165
+
166
+
/* - Draggable Colors --------------------------------------------------------*/
167
+
168
+
.phui-workboard-view .phui-object-item.drag-dragging {
169
+
box-shadow: {$dropshadow};
170
+
background-color: {$sh-greybackground};
171
+
}
172
+
173
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red {
174
+
background-color: {$sh-redbackground};
175
+
}
176
+
177
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange {
178
+
background-color: {$sh-orangebackground};
179
+
}
180
+
181
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow {
182
+
background-color: {$sh-yellowbackground};
183
+
}
184
+
185
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green {
186
+
background-color: {$sh-greenbackground};
187
+
}
188
+
189
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue {
190
+
background-color: {$sh-bluebackground};
191
+
}
192
+
193
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo {
194
+
background-color: {$sh-indigobackground};
195
+
}
196
+
197
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet {
198
+
background-color: {$sh-violetbackground};
199
+
}
200
+
201
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink {
202
+
background-color: {$sh-pinkbackground};
203
+
}
204
+
205
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky {
206
+
background-color: {$sh-bluebackground};
207
+
}