@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
Use PHUIListItemView in ConpherenceThreadList
Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges.
Test Plan:
I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator.
- Create lots of rooms with various policies
- Test clicking on policy object
- Click on different rooms
- Post in rooms
- Load up second account, see room numbers
- Clear room message count by clicking on room
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Maniphest Tasks: T12556
Differential Revision: https://secure.phabricator.com/D17698
+164
-222
+26
-26
resources/celerity/map.php
+26
-26
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'conpherence.pkg.css' => '437d3b5a',
11
-
'conpherence.pkg.js' => '281b1a73',
10
+
'conpherence.pkg.css' => '1b8422e1',
11
+
'conpherence.pkg.js' => '5f86c17d',
12
12
'core.pkg.css' => 'b2ad82f4',
13
13
'core.pkg.js' => 'deabcef7',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
···
46
46
'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
47
47
'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
48
48
'rsrc/css/application/conpherence/durable-column.css' => '89ea6bef',
49
-
'rsrc/css/application/conpherence/header-pane.css' => '4082233d',
50
-
'rsrc/css/application/conpherence/menu.css' => '3d8e5c9c',
51
-
'rsrc/css/application/conpherence/message-pane.css' => 'd1fc13e1',
49
+
'rsrc/css/application/conpherence/header-pane.css' => '92d50767',
50
+
'rsrc/css/application/conpherence/menu.css' => '88100764',
51
+
'rsrc/css/application/conpherence/message-pane.css' => '14199428',
52
52
'rsrc/css/application/conpherence/notification.css' => 'cef0a3fc',
53
-
'rsrc/css/application/conpherence/participant-pane.css' => '604a8b02',
53
+
'rsrc/css/application/conpherence/participant-pane.css' => '26a3ce56',
54
54
'rsrc/css/application/conpherence/transaction.css' => '85129c68',
55
55
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
56
56
'rsrc/css/application/countdown/timer.css' => '16c52f5c',
···
373
373
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'c8b5ee6f',
374
374
'rsrc/js/application/conpherence/behavior-conpherence-search.js' => '9bbf3762',
375
375
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'aa3bd034',
376
-
'rsrc/js/application/conpherence/behavior-menu.js' => '7524fcfa',
376
+
'rsrc/js/application/conpherence/behavior-menu.js' => '80dda04a',
377
377
'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
378
378
'rsrc/js/application/conpherence/behavior-pontificate.js' => '55616e04',
379
379
'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
···
553
553
'config-options-css' => '0ede4c9b',
554
554
'config-page-css' => 'c1d5121b',
555
555
'conpherence-durable-column-view' => '89ea6bef',
556
-
'conpherence-header-pane-css' => '4082233d',
557
-
'conpherence-menu-css' => '3d8e5c9c',
558
-
'conpherence-message-pane-css' => 'd1fc13e1',
556
+
'conpherence-header-pane-css' => '92d50767',
557
+
'conpherence-menu-css' => '88100764',
558
+
'conpherence-message-pane-css' => '14199428',
559
559
'conpherence-notification-css' => 'cef0a3fc',
560
-
'conpherence-participant-pane-css' => '604a8b02',
560
+
'conpherence-participant-pane-css' => '26a3ce56',
561
561
'conpherence-thread-manager' => 'c8b5ee6f',
562
562
'conpherence-transaction-css' => '85129c68',
563
563
'd3' => 'a11a5ff2',
···
598
598
'javelin-behavior-choose-control' => '327a00d1',
599
599
'javelin-behavior-comment-actions' => '9a6dd75c',
600
600
'javelin-behavior-config-reorder-fields' => 'b6993408',
601
-
'javelin-behavior-conpherence-menu' => '7524fcfa',
601
+
'javelin-behavior-conpherence-menu' => '80dda04a',
602
602
'javelin-behavior-conpherence-participant-pane' => '8604caa8',
603
603
'javelin-behavior-conpherence-pontificate' => '55616e04',
604
604
'javelin-behavior-conpherence-search' => '9bbf3762',
···
1430
1430
'javelin-vector',
1431
1431
'javelin-dom',
1432
1432
),
1433
-
'7524fcfa' => array(
1434
-
'javelin-behavior',
1435
-
'javelin-dom',
1436
-
'javelin-util',
1437
-
'javelin-stratcom',
1438
-
'javelin-workflow',
1439
-
'javelin-behavior-device',
1440
-
'javelin-history',
1441
-
'javelin-vector',
1442
-
'javelin-scrollbar',
1443
-
'phabricator-title',
1444
-
'phabricator-shaped-request',
1445
-
'conpherence-thread-manager',
1446
-
),
1447
1433
'76b9fc3e' => array(
1448
1434
'javelin-behavior',
1449
1435
'javelin-stratcom',
···
1502
1488
'javelin-util',
1503
1489
'javelin-vector',
1504
1490
'javelin-stratcom',
1491
+
),
1492
+
'80dda04a' => array(
1493
+
'javelin-behavior',
1494
+
'javelin-dom',
1495
+
'javelin-util',
1496
+
'javelin-stratcom',
1497
+
'javelin-workflow',
1498
+
'javelin-behavior-device',
1499
+
'javelin-history',
1500
+
'javelin-vector',
1501
+
'javelin-scrollbar',
1502
+
'phabricator-title',
1503
+
'phabricator-shaped-request',
1504
+
'conpherence-thread-manager',
1505
1505
),
1506
1506
'834a1173' => array(
1507
1507
'javelin-behavior',
+10
-4
src/applications/conpherence/controller/ConpherenceController.php
+10
-4
src/applications/conpherence/controller/ConpherenceController.php
···
54
54
}
55
55
56
56
protected function buildHeaderPaneContent(
57
-
ConpherenceThread $conpherence,
58
-
array $policy_objects) {
59
-
assert_instances_of($policy_objects, 'PhabricatorPolicy');
57
+
ConpherenceThread $conpherence) {
60
58
$viewer = $this->getViewer();
61
59
$header = null;
62
60
63
61
if ($conpherence->getID()) {
64
62
$data = $conpherence->getDisplayData($this->getViewer());
63
+
$topic = id(new PHUITagView())
64
+
->setName($data['topic'])
65
+
->setShade(PHUITagView::COLOR_VIOLET)
66
+
->setType(PHUITagView::TYPE_SHADE)
67
+
->addClass('conpherence-header-topic');
68
+
65
69
$header = id(new PHUIHeaderView())
70
+
->setViewer($viewer)
66
71
->setHeader($data['title'])
67
-
->setSubheader($data['topic'])
72
+
->addTag($topic)
73
+
->setPolicyObject($conpherence)
68
74
->setImage($data['image']);
69
75
70
76
$can_edit = PhabricatorPolicyFilter::hasCapability(
+12
-5
src/applications/conpherence/controller/ConpherenceListController.php
+12
-5
src/applications/conpherence/controller/ConpherenceListController.php
···
34
34
$title = pht('Conpherence');
35
35
$conpherence = null;
36
36
37
-
$limit = (ConpherenceThreadListView::SEE_MORE_LIMIT * 2) + 1;
37
+
$limit = ConpherenceThreadListView::SEE_ALL_LIMIT + 1;
38
38
$all_participation = array();
39
39
40
40
$mode = $this->determineMode();
···
64
64
}
65
65
66
66
// check to see if the loaded conpherence is going to show up
67
-
// within the SEE_MORE_LIMIT amount of conpherences.
67
+
// within the SEE_ALL_LIMIT amount of conpherences.
68
68
// If its not there, then we just pre-pend it as the "first"
69
69
// conpherence so folks have a navigation item in the menu.
70
70
$count = 0;
···
75
75
break;
76
76
}
77
77
$count++;
78
-
if ($count > ConpherenceThreadListView::SEE_MORE_LIMIT) {
78
+
if ($count > ConpherenceThreadListView::SEE_ALL_LIMIT) {
79
79
break;
80
80
}
81
81
}
···
89
89
default:
90
90
$data = $this->loadDefaultParticipation($limit);
91
91
$all_participation = $data['all_participation'];
92
+
93
+
$conpherence_id = head($all_participation)->getConpherencePHID();
94
+
$conpherence = id(new ConpherenceThreadQuery())
95
+
->setViewer($user)
96
+
->withPHIDs(array($conpherence_id))
97
+
->needProfileImage(true)
98
+
->executeOne();
99
+
// If $conpherence is null, NUX state will render
92
100
break;
93
101
}
94
102
95
-
$threads = $this->loadConpherenceThreadData(
96
-
$all_participation);
103
+
$threads = $this->loadConpherenceThreadData($all_participation);
97
104
98
105
$thread_view = id(new ConpherenceThreadListView())
99
106
->setUser($user)
+2
-8
src/applications/conpherence/controller/ConpherenceUpdateController.php
+2
-8
src/applications/conpherence/controller/ConpherenceUpdateController.php
···
522
522
$people_widget = null;
523
523
switch ($action) {
524
524
case ConpherenceUpdateActions::METADATA:
525
-
$policy_objects = id(new PhabricatorPolicyQuery())
526
-
->setViewer($user)
527
-
->setObject($conpherence)
528
-
->execute();
529
-
$header = $this->buildHeaderPaneContent(
530
-
$conpherence,
531
-
$policy_objects);
525
+
$header = $this->buildHeaderPaneContent($conpherence);
532
526
$header = hsprintf('%s', $header);
533
527
$nav_item = id(new ConpherenceThreadListView())
534
528
->setUser($user)
535
529
->setBaseURI($this->getApplicationURI())
536
-
->renderSingleThread($conpherence, $policy_objects);
530
+
->renderThreadItem($conpherence);
537
531
$nav_item = hsprintf('%s', $nav_item);
538
532
break;
539
533
case ConpherenceUpdateActions::ADD_PERSON:
+1
-5
src/applications/conpherence/controller/ConpherenceViewController.php
+1
-5
src/applications/conpherence/controller/ConpherenceViewController.php
···
82
82
$form = null;
83
83
$content = array('transactions' => $messages);
84
84
} else {
85
-
$policy_objects = id(new PhabricatorPolicyQuery())
86
-
->setViewer($user)
87
-
->setObject($conpherence)
88
-
->execute();
89
-
$header = $this->buildHeaderPaneContent($conpherence, $policy_objects);
85
+
$header = $this->buildHeaderPaneContent($conpherence);
90
86
$search = $this->buildSearchForm();
91
87
$form = $this->renderFormContent();
92
88
$content = array(
+45
-128
src/applications/conpherence/view/ConpherenceThreadListView.php
+45
-128
src/applications/conpherence/view/ConpherenceThreadListView.php
···
2
2
3
3
final class ConpherenceThreadListView extends AphrontView {
4
4
5
-
const SEE_MORE_LIMIT = 15;
5
+
const SEE_ALL_LIMIT = 16;
6
6
7
7
private $baseURI;
8
8
private $threads;
···
25
25
->addClass('conpherence-menu')
26
26
->setID('conpherence-menu');
27
27
28
-
$policy_objects = ConpherenceThread::loadViewPolicyObjects(
29
-
$this->getUser(),
30
-
$this->threads);
28
+
$header = $this->buildHeaderItemView();
29
+
$menu->addMenuItem($header);
31
30
32
-
$this->addRoomsToMenu($menu, $this->threads, $policy_objects);
31
+
// Blank State NUX
32
+
if (empty($this->threads)) {
33
+
$join_item = id(new PHUIListItemView())
34
+
->setType(PHUIListItemView::TYPE_LINK)
35
+
->setHref('/conpherence/search/')
36
+
->setName(pht('Join a Room'));
37
+
$menu->addMenuItem($join_item);
38
+
39
+
$create_item = id(new PHUIListItemView())
40
+
->setType(PHUIListItemView::TYPE_LINK)
41
+
->setHref('/conpherence/new/')
42
+
->setWorkflow(true)
43
+
->setName(pht('Create a Room'));
44
+
$menu->addMenuItem($create_item);
45
+
}
46
+
47
+
$rooms = $this->buildRoomItems($this->threads);
48
+
foreach ($rooms as $room) {
49
+
$menu->addMenuItem($room);
50
+
}
33
51
34
52
$menu = phutil_tag_div('phabricator-side-menu', $menu);
35
53
$menu = phutil_tag_div('phui-basic-nav', $menu);
···
37
55
return $menu;
38
56
}
39
57
40
-
public function renderSingleThread(
41
-
ConpherenceThread $thread,
42
-
array $policy_objects) {
43
-
assert_instances_of($policy_objects, 'PhabricatorPolicy');
44
-
return $this->renderThread($thread, $policy_objects);
45
-
}
46
-
47
58
private function renderThreadItem(
48
-
ConpherenceThread $thread,
49
-
array $policy_objects) {
50
-
return id(new PHUIListItemView())
51
-
->setType(PHUIListItemView::TYPE_CUSTOM)
52
-
->setName($this->renderThread($thread, $policy_objects));
53
-
}
54
-
55
-
private function renderThread(
56
-
ConpherenceThread $thread,
57
-
array $policy_objects) {
59
+
ConpherenceThread $thread) {
58
60
59
61
$user = $this->getUser();
60
-
61
-
$uri = '/'.$thread->getMonogram();
62
62
$data = $thread->getDisplayData($user);
63
-
$icon = id(new PHUIIconView())
64
-
->addClass('msr')
65
-
->setIcon($thread->getPolicyIconName($policy_objects));
66
-
$title = phutil_tag(
67
-
'span',
68
-
array(),
69
-
array(
70
-
$icon,
71
-
$data['title'],
72
-
));
73
-
$subtitle = $data['subtitle'];
74
-
$unread_count = $data['unread_count'];
75
-
$epoch = $data['epoch'];
76
-
$image = $data['image'];
77
63
$dom_id = $thread->getPHID().'-nav-item';
78
64
79
-
return id(new ConpherenceMenuItemView())
80
-
->setUser($user)
81
-
->setTitle($title)
82
-
->setSubtitle($subtitle)
83
-
->setHref($uri)
84
-
->setEpoch($epoch)
85
-
->setImageURI($image)
86
-
->setUnreadCount($unread_count)
65
+
return id(new PHUIListItemView())
66
+
->setName($data['title'])
67
+
->setHref('/'.$thread->getMonogram())
68
+
->setProfileImage($data['image'])
69
+
->setCount($data['unread_count'])
70
+
->setType(PHUIListItemView::TYPE_CUSTOM)
87
71
->setID($thread->getPHID().'-nav-item')
88
72
->addSigil('conpherence-menu-click')
89
73
->setMetadata(
···
94
78
));
95
79
}
96
80
97
-
private function addRoomsToMenu(
98
-
PHUIListView $menu,
99
-
array $rooms,
100
-
array $policy_objects) {
81
+
private function buildRoomItems(array $threads) {
101
82
102
-
$header = $this->renderMenuItemHeader();
103
-
$menu->addMenuItem($header);
104
-
105
-
if (empty($rooms)) {
106
-
$join_item = id(new PHUIListItemView())
107
-
->setType(PHUIListItemView::TYPE_LINK)
108
-
->setHref('/conpherence/search/')
109
-
->setName(pht('Join a Room'));
110
-
$menu->addMenuItem($join_item);
111
-
112
-
$create_item = id(new PHUIListItemView())
113
-
->setType(PHUIListItemView::TYPE_LINK)
114
-
->setHref('/conpherence/new/')
115
-
->setWorkflow(true)
116
-
->setName(pht('Create a Room'));
117
-
$menu->addMenuItem($create_item);
118
-
119
-
return $menu;
120
-
}
121
-
122
-
$this->addThreadsToMenu($menu, $rooms, $policy_objects);
123
-
return $menu;
124
-
}
125
-
126
-
private function addThreadsToMenu(
127
-
PHUIListView $menu,
128
-
array $threads,
129
-
array $policy_objects) {
130
-
131
-
// If we have self::SEE_MORE_LIMIT or less, we can just render
132
-
// all the threads at once. Otherwise, we render a "See more"
133
-
// UI element, which toggles a show / hide on the remaining rooms
83
+
$items = array();
134
84
$show_threads = $threads;
135
-
$more_threads = array();
136
-
if (count($threads) > self::SEE_MORE_LIMIT) {
137
-
$show_threads = array_slice($threads, 0, self::SEE_MORE_LIMIT);
138
-
$more_threads = array_slice($threads, self::SEE_MORE_LIMIT);
85
+
$all_threads = false;
86
+
if (count($threads) > self::SEE_ALL_LIMIT) {
87
+
$show_threads = array_slice($threads, 0, self::SEE_ALL_LIMIT);
88
+
$all_threads = true;
139
89
}
140
90
141
91
foreach ($show_threads as $thread) {
142
-
$item = $this->renderThreadItem($thread, $policy_objects);
143
-
$menu->addMenuItem($item);
92
+
$items[] = $this->renderThreadItem($thread);
144
93
}
145
94
146
-
if ($more_threads) {
147
-
$search_uri = '/conpherence/search/query/participant/';
148
-
$sigil = 'more-room';
149
-
150
-
$more_item = id(new PHUIListItemView())
95
+
// Send them to application search here
96
+
if ($all_threads) {
97
+
$items[] = id(new PHUIListItemView())
151
98
->setType(PHUIListItemView::TYPE_LINK)
152
-
->setHref($search_uri)
153
-
->addSigil('conpherence-menu-see-more')
154
-
->setMetadata(array('moreSigil' => $sigil))
155
-
->setName(pht('See More'));
156
-
$menu->addMenuItem($more_item);
157
-
$show_more_threads = $more_threads;
158
-
$even_more_threads = array();
159
-
if (count($more_threads) > self::SEE_MORE_LIMIT) {
160
-
$show_more_threads = array_slice(
161
-
$more_threads,
162
-
0,
163
-
self::SEE_MORE_LIMIT);
164
-
$even_more_threads = array_slice(
165
-
$more_threads,
166
-
self::SEE_MORE_LIMIT);
167
-
}
168
-
foreach ($show_more_threads as $thread) {
169
-
$item = $this->renderThreadItem($thread, $policy_objects)
170
-
->addSigil($sigil)
171
-
->addClass('hidden');
172
-
$menu->addMenuItem($item);
173
-
}
174
-
175
-
if ($even_more_threads) {
176
-
// kick them to application search here
177
-
$even_more_item = id(new PHUIListItemView())
178
-
->setType(PHUIListItemView::TYPE_LINK)
179
-
->setHref($search_uri)
180
-
->addSigil($sigil)
181
-
->addClass('hidden')
182
-
->setName(pht('See More'));
183
-
$menu->addMenuItem($even_more_item);
184
-
}
99
+
->setHref('/conpherence/search/query/participant/')
100
+
->setIcon('fa-external-link')
101
+
->setName(pht('See All Joined'));
185
102
}
186
103
187
-
return $menu;
104
+
return $items;
188
105
}
189
106
190
-
private function renderMenuItemHeader() {
107
+
private function buildHeaderItemView() {
191
108
$rooms = phutil_tag(
192
109
'a',
193
110
array(
+17
src/view/phui/PHUIListItemView.php
+17
src/view/phui/PHUIListItemView.php
···
33
33
private $tooltip;
34
34
private $actionIcon;
35
35
private $actionIconHref;
36
+
private $count;
36
37
37
38
public function setOpenInNewWindow($open_in_new_window) {
38
39
$this->openInNewWindow = $open_in_new_window;
···
109
110
110
111
public function getIcon() {
111
112
return $this->icon;
113
+
}
114
+
115
+
public function setCount($count) {
116
+
$this->count = $count;
117
+
return $this;
112
118
}
113
119
114
120
public function setIndented($indented) {
···
337
343
$action_icon);
338
344
}
339
345
346
+
$count = null;
347
+
if ($this->count) {
348
+
$count = phutil_tag(
349
+
'span',
350
+
array(
351
+
'class' => 'phui-list-item-count',
352
+
),
353
+
$this->count);
354
+
}
355
+
340
356
$icons = $this->getIcons();
341
357
342
358
$list_item = javelin_tag(
···
354
370
$icons,
355
371
$this->renderChildren(),
356
372
$name,
373
+
$count,
357
374
));
358
375
359
376
return array($list_item, $action_link);
+36
-2
webroot/rsrc/css/application/conpherence/header-pane.css
+36
-2
webroot/rsrc/css/application/conpherence/header-pane.css
···
2
2
* @provides conpherence-header-pane-css
3
3
*/
4
4
5
+
.conpherence-header-pane {
6
+
background-color: #f9f9f9;
7
+
}
8
+
5
9
.conpherence-header-pane .phui-header-shell {
6
10
padding: 8px 16px 10px;
7
11
min-height: 38px;
···
10
14
.conpherence-header-pane .phui-header-header {
11
15
font-size: 16px;
12
16
color: #000;
17
+
display: block;
13
18
}
14
19
15
20
.conpherence-header-pane .phui-header-subheader {
16
-
color: {$lightgreytext};
21
+
padding: 0;
22
+
margin: 0;
23
+
}
24
+
25
+
.conpherence-header-pane .conpherence-header-topic .phui-tag-core {
26
+
color: {$sh-indigotext};
17
27
padding: 0;
18
28
font-size: 12px;
19
-
margin: 0;
29
+
margin: 0 8px 0 0;
20
30
text-overflow: ellipsis;
21
31
white-space: nowrap;
22
32
overflow: hidden;
33
+
font-style: italic;
23
34
}
24
35
25
36
.conpherence-header-pane .phui-header-col1 {
···
34
45
position: absolute;
35
46
top: 4px;
36
47
left: 0;
48
+
}
49
+
50
+
.conpherence-header-pane .policy-header-callout,
51
+
.conpherence-header-pane .phui-tag-core {
52
+
background: transparent;
53
+
font-size: 12px;
54
+
margin: 0 8px 0 0;
55
+
padding: 3px 0;
56
+
font-style: normal;
57
+
}
58
+
59
+
.conpherence-header-pane .phui-header-subheader .policy-link {
60
+
color: {$lightbluetext};
61
+
}
62
+
63
+
.conpherence-header-pane .phui-header-subheader .policy-header-callout
64
+
.phui-icon-view {
65
+
font-size: 12px;
66
+
color: {$lightbluetext};
67
+
}
68
+
69
+
.conpherence-header-pane .phui-header-subheader .policy-link:hover {
70
+
color: {$darkbluetext};
37
71
}
38
72
39
73
.conpherence-header-pane .phui-header-image-href {
+1
-1
webroot/rsrc/css/application/conpherence/message-pane.css
+1
-1
webroot/rsrc/css/application/conpherence/message-pane.css
+2
-2
webroot/rsrc/css/application/conpherence/participant-pane.css
+2
-2
webroot/rsrc/css/application/conpherence/participant-pane.css
···
5
5
.conpherence-participant-pane {
6
6
position: fixed;
7
7
right: 0px;
8
-
top: 103px;
8
+
top: 106px;
9
9
bottom: 0;
10
10
width: 240px;
11
11
border-width: 0 0 0 1px;
···
45
45
position: fixed;
46
46
overflow-y: auto;
47
47
bottom: 0;
48
-
top: 102px;
48
+
top: 105px;
49
49
width: 240px;
50
50
}
51
51