@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
Moderize Herald UI
Summary: Removes many tables and uses PropertyLists and ObjectItemList when possible. Adds cleaner CSS, makes mobile editing more possible.
Test Plan: Test new UI on desktop and mobile. Verify all functionality still exists.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T4272
Differential Revision: https://secure.phabricator.com/D8860
+129
-111
+4
-4
resources/celerity/map.php
+4
-4
resources/celerity/map.php
···
69
69
'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
70
70
'rsrc/css/application/flag/flag.css' => '5337623f',
71
71
'rsrc/css/application/harbormaster/harbormaster.css' => 'cec833b7',
72
-
'rsrc/css/application/herald/herald-test.css' => '2b7d0f54',
73
-
'rsrc/css/application/herald/herald.css' => '59d48f01',
72
+
'rsrc/css/application/herald/herald-test.css' => '778b008e',
73
+
'rsrc/css/application/herald/herald.css' => 'c544dd1c',
74
74
'rsrc/css/application/maniphest/batch-editor.css' => '8f380ebc',
75
75
'rsrc/css/application/maniphest/report.css' => '6fc16517',
76
76
'rsrc/css/application/maniphest/task-edit.css' => '8e23031b',
···
522
522
'font-source-sans-pro' => '91d53463',
523
523
'global-drag-and-drop-css' => '697324ad',
524
524
'harbormaster-css' => 'cec833b7',
525
-
'herald-css' => '59d48f01',
525
+
'herald-css' => 'c544dd1c',
526
526
'herald-rule-editor' => '22d2966a',
527
-
'herald-test-css' => '2b7d0f54',
527
+
'herald-test-css' => '778b008e',
528
528
'inline-comment-summary-css' => '14a91639',
529
529
'javelin-aphlict' => '493665ee',
530
530
'javelin-behavior' => '8a3ed18b',
+48
-12
src/applications/herald/adapter/HeraldAdapter.php
+48
-12
src/applications/herald/adapter/HeraldAdapter.php
···
957
957
public function renderRuleAsText(HeraldRule $rule, array $handles) {
958
958
assert_instances_of($handles, 'PhabricatorObjectHandle');
959
959
960
-
$out = array();
960
+
require_celerity_resource('herald-css');
961
+
962
+
$icon = id(new PHUIIconView())
963
+
->setIconFont('fa-chevron-circle-right lightgreytext')
964
+
->addClass('herald-list-icon');
961
965
962
966
if ($rule->getMustMatchAll()) {
963
-
$out[] = pht('When all of these conditions are met:');
967
+
$match_text = pht('When all of these conditions are met:');
964
968
} else {
965
-
$out[] = pht('When any of these conditions are met:');
969
+
$match_text = pht('When any of these conditions are met:');
966
970
}
967
971
968
-
$out[] = null;
972
+
$match_title = phutil_tag(
973
+
'p',
974
+
array(
975
+
'class' => 'herald-list-description'
976
+
),
977
+
$match_text);
978
+
979
+
$match_list = array();
969
980
foreach ($rule->getConditions() as $condition) {
970
-
$out[] = $this->renderConditionAsText($condition, $handles);
981
+
$match_list[] = phutil_tag(
982
+
'div',
983
+
array(
984
+
'class' => 'herald-list-item'
985
+
),
986
+
array(
987
+
$icon,
988
+
$this->renderConditionAsText($condition, $handles)));
971
989
}
972
-
$out[] = null;
973
990
974
991
$integer_code_for_every = HeraldRepetitionPolicyConfig::toInt(
975
992
HeraldRepetitionPolicyConfig::EVERY);
976
993
977
994
if ($rule->getRepetitionPolicy() == $integer_code_for_every) {
978
-
$out[] = pht('Take these actions every time this rule matches:');
995
+
$action_text =
996
+
pht('Take these actions every time this rule matches:');
979
997
} else {
980
-
$out[] = pht('Take these actions the first time this rule matches:');
998
+
$action_text =
999
+
pht('Take these actions the first time this rule matches:');
981
1000
}
982
1001
983
-
$out[] = null;
1002
+
$action_title = phutil_tag(
1003
+
'p',
1004
+
array(
1005
+
'class' => 'herald-list-description'
1006
+
),
1007
+
$action_text);
1008
+
1009
+
$action_list = array();
984
1010
foreach ($rule->getActions() as $action) {
985
-
$out[] = $this->renderActionAsText($action, $handles);
986
-
}
1011
+
$action_list[] = phutil_tag(
1012
+
'div',
1013
+
array(
1014
+
'class' => 'herald-list-item'
1015
+
),
1016
+
array(
1017
+
$icon,
1018
+
$this->renderActionAsText($action, $handles))); }
987
1019
988
-
return phutil_implode_html("\n", $out);
1020
+
return array(
1021
+
$match_title,
1022
+
$match_list,
1023
+
$action_title,
1024
+
$action_list);
989
1025
}
990
1026
991
1027
private function renderConditionAsText(
+2
-1
src/applications/herald/controller/HeraldRuleListController.php
+2
-1
src/applications/herald/controller/HeraldRuleListController.php
+5
-7
src/applications/herald/controller/HeraldRuleViewController.php
+5
-7
src/applications/herald/controller/HeraldRuleViewController.php
···
45
45
46
46
$crumbs = $this->buildApplicationCrumbs();
47
47
$crumbs->addTextCrumb("H{$id}");
48
+
$crumbs->setActionList($actions);
48
49
49
50
$object_box = id(new PHUIObjectBoxView())
50
51
->setHeader($header)
···
148
149
149
150
$view->invokeWillRenderEvent();
150
151
151
-
$view->addSectionHeader(pht('Rule Description'));
152
+
$view->addSectionHeader(
153
+
pht('Rule Description'),
154
+
PHUIPropertyListView::ICON_SUMMARY);
152
155
$view->addTextContent(
153
-
phutil_tag(
154
-
'div',
155
-
array(
156
-
'style' => 'white-space: pre-wrap;',
157
-
),
158
-
$adapter->renderRuleAsText($rule, $this->getLoadedHandles())));
156
+
$adapter->renderRuleAsText($rule, $this->getLoadedHandles()));
159
157
}
160
158
161
159
return $view;
+17
-22
src/applications/herald/controller/HeraldTranscriptController.php
+17
-22
src/applications/herald/controller/HeraldTranscriptController.php
···
362
362
'wide',
363
363
));
364
364
365
-
$panel = new AphrontPanelView();
366
-
$panel->setHeader(pht('Actions Taken'));
367
-
$panel->appendChild($table);
368
-
$panel->setNoBackground();
365
+
$box = new PHUIObjectBoxView();
366
+
$box->setHeaderText(pht('Actions Taken'));
367
+
$box->appendChild($table);
369
368
370
-
return $panel;
369
+
return $box;
371
370
}
372
371
373
372
private function buildActionTranscriptPanel($xscript) {
···
450
449
)));
451
450
}
452
451
453
-
$panel = '';
452
+
$box = null;
454
453
if ($rule_markup) {
455
-
$panel = new AphrontPanelView();
456
-
$panel->setHeader(pht('Rule Details'));
457
-
$panel->setNoBackground();
458
-
$panel->appendChild(phutil_tag(
454
+
$box = new PHUIObjectBoxView();
455
+
$box->setHeaderText(pht('Rule Details'));
456
+
$box->appendChild(phutil_tag(
459
457
'ul',
460
458
array('class' => 'herald-explain-list'),
461
459
$rule_markup));
462
460
}
463
-
return $panel;
461
+
return $box;
464
462
}
465
463
466
464
private function buildObjectTranscriptPanel($xscript) {
···
512
510
$rows[] = array($name, $value);
513
511
}
514
512
515
-
$table = new AphrontTableView($rows);
516
-
$table->setColumnClasses(
517
-
array(
518
-
'header',
519
-
'wide',
520
-
));
513
+
$property_list = new PHUIPropertyListView();
514
+
foreach ($rows as $row) {
515
+
$property_list->addProperty($row[0], $row[1]);
516
+
}
521
517
522
-
$panel = new AphrontPanelView();
523
-
$panel->setHeader(pht('Object Transcript'));
524
-
$panel->setNoBackground();
525
-
$panel->appendChild($table);
518
+
$box = new PHUIObjectBoxView();
519
+
$box->setHeaderText(pht('Object Transcript'));
520
+
$box->appendChild($property_list);
526
521
527
-
return $panel;
522
+
return $box;
528
523
}
529
524
530
525
+28
-40
src/applications/herald/controller/HeraldTranscriptListController.php
+28
-40
src/applications/herald/controller/HeraldTranscriptListController.php
···
62
62
$handles = $this->loadViewerHandles($phids);
63
63
}
64
64
65
-
$rows = array();
65
+
$list = new PHUIObjectItemListView();
66
+
$list->setCards(true);
67
+
$list->setFlush(true);
66
68
foreach ($transcripts as $xscript) {
67
-
$rows[] = array(
68
-
phabricator_date($xscript->getTime(), $viewer),
69
-
phabricator_time($xscript->getTime(), $viewer),
70
-
$handles[$xscript->getObjectPHID()]->renderLink(),
71
-
$xscript->getDryRun() ? pht('Yes') : '',
72
-
number_format((int)(1000 * $xscript->getDuration())).' ms',
73
-
phutil_tag(
74
-
'a',
75
-
array(
76
-
'href' => '/herald/transcript/'.$xscript->getID().'/',
77
-
'class' => 'button small grey',
78
-
),
79
-
pht('View Transcript')),
80
-
);
81
-
}
69
+
$view_href = phutil_tag(
70
+
'a',
71
+
array(
72
+
'href' => '/herald/transcript/'.$xscript->getID().'/',
73
+
),
74
+
pht('View Full Transcript'));
82
75
83
-
$table = new AphrontTableView($rows);
84
-
$table->setHeaders(
85
-
array(
86
-
pht('Date'),
87
-
pht('Time'),
88
-
pht('Object'),
89
-
pht('Dry Run'),
90
-
pht('Duration'),
91
-
pht('View'),
92
-
));
93
-
$table->setColumnClasses(
94
-
array(
95
-
'',
96
-
'right',
97
-
'wide wrap',
98
-
'',
99
-
'',
100
-
'action',
101
-
));
76
+
$item = new PHUIObjectItemView();
77
+
$item->setObjectName($xscript->getID());
78
+
$item->setHeader($view_href);
79
+
if ($xscript->getDryRun()) {
80
+
$item->addAttribute(pht('Dry Run'));
81
+
}
82
+
$item->addAttribute($handles[$xscript->getObjectPHID()]->renderLink());
83
+
$item->addAttribute(
84
+
number_format((int)(1000 * $xscript->getDuration())).' ms');
85
+
$item->addIcon(
86
+
'none',
87
+
phabricator_datetime($xscript->getTime(), $viewer));
88
+
89
+
$list->addItem($item);
90
+
}
102
91
103
92
// Render the whole page.
104
-
$panel = new AphrontPanelView();
105
-
$panel->setHeader(pht('Herald Transcripts'));
106
-
$panel->appendChild($table);
107
-
$panel->setNoBackground();
93
+
$box = new PHUIObjectBoxView();
94
+
$box->setHeaderText(pht('Herald Transcripts'));
95
+
$box->appendChild($list);
108
96
109
-
return $panel;
97
+
return $box;
110
98
111
99
}
112
100
+10
-25
webroot/rsrc/css/application/herald/herald-test.css
+10
-25
webroot/rsrc/css/application/herald/herald-test.css
···
3
3
*/
4
4
5
5
ul.herald-explain-list {
6
-
font-size: 11px;
7
-
font-family: "Verdana";
6
+
margin: 12px;
8
7
}
9
8
10
9
div.herald-condition-note {
···
27
26
28
27
ul.herald-explain-list .condition-fail,
29
28
ul.herald-explain-list .rule-fail {
30
-
color: #aa0000;
29
+
color: {$red};
31
30
}
32
31
33
32
ul.herald-explain-list .condition-pass,
34
33
ul.herald-explain-list .rule-pass {
35
-
color: #00aa00;
34
+
color: {$green};
36
35
}
37
-
38
-
39
36
40
37
ul.herald-explain-list li.herald-rule-pass,
41
38
ul.herald-explain-list li.herald-rule-fail {
42
-
margin: 0 0 0.75em;
43
-
}
44
-
45
-
ul.herald-explain-list li.herald-rule-fail {
46
-
border: 1px solid #aa0000;
47
-
}
48
-
49
-
ul.herald-explain-list li.herald-rule-pass {
50
-
border: 1px solid #00aa00;
39
+
margin: 0 0 8px;
51
40
}
52
41
53
42
ul.herald-explain-list div.rule-name {
54
-
border-bottom: 1px solid #cccccc;
55
-
font-size: 12px;
56
-
padding: .5em .75em;
43
+
padding: 4px 0 8px 0;
57
44
}
58
45
59
46
ul.herald-explain-list li.herald-rule-fail,
···
62
49
}
63
50
64
51
ul.herald-explain-list ul {
65
-
margin: .5em;
52
+
margin: 4px;
66
53
}
67
54
68
55
ul.herald-explain-list ul li {
···
75
62
}
76
63
77
64
.outcome-failure {
78
-
color: #990000;
65
+
color: {$red};
79
66
}
80
67
81
68
.outcome-success {
82
-
color: #009900;
69
+
color: {$green};
83
70
}
84
71
85
-
86
72
.action-header {
87
73
font-weight: bold;
88
-
padding-top: 1em;
89
-
border-bottom: 1px solid #dddddd;
74
+
padding-top: 12px;
75
+
border-bottom: 1px solid {$thinblueborder};
90
76
}
91
77
92
78
textarea.herald-field-value-transcript {
93
79
width: 100%;
94
80
height: 10em;
95
81
}
96
-
97
82
98
83
.condition-test-value {
99
84
color: {$greytext};
+15
webroot/rsrc/css/application/herald/herald.css
+15
webroot/rsrc/css/application/herald/herald.css
···
35
35
.herald-action-table td.target {
36
36
width: 100%;
37
37
}
38
+
39
+
.herald-list-description {
40
+
color: {$darkgreytext};
41
+
padding: 8px 0;
42
+
}
43
+
44
+
.herald-list-icon {
45
+
margin-left: 12px;
46
+
margin-right: 2px;
47
+
}
48
+
49
+
.herald-list-item {
50
+
padding-bottom: 4px;
51
+
color: {$greytext};
52
+
}