@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
Add SUCCESS state and buttons to PHUIErrorView
Summary: I'm looking at beefing up PHUIErrorView for additional use cases as I remove some older AphrontViews. This will likely morph into PHUIInfoView and be a more lightweight version of PHUIObjectBox.
Test Plan:
UIExamples, mobile and desktop layouts. Have actual use cases coming in next diffs (may tweak design more then)
{F311943}
Reviewers: epriestley, btrahan
Reviewed By: btrahan
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11849
+80
-8
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '4efed816',
10
+
'core.pkg.css' => 'ef45fe3b',
11
11
'core.pkg.js' => '23d653bb',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
13
'differential.pkg.css' => '380f07e5',
···
127
127
'rsrc/css/phui/phui-button.css' => 'ffe12633',
128
128
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
129
129
'rsrc/css/phui/phui-document.css' => '8240b0b1',
130
-
'rsrc/css/phui/phui-error-view.css' => 'ad042fdd',
130
+
'rsrc/css/phui/phui-error-view.css' => '41518665',
131
131
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
132
132
'rsrc/css/phui/phui-fontkit.css' => '9b345998',
133
133
'rsrc/css/phui/phui-form-view.css' => '8b78a986',
···
780
780
'phui-calendar-month-css' => 'a92e47d2',
781
781
'phui-crumbs-view-css' => '594d719e',
782
782
'phui-document-view-css' => '8240b0b1',
783
-
'phui-error-view-css' => 'ad042fdd',
783
+
'phui-error-view-css' => '41518665',
784
784
'phui-feed-story-css' => 'c9f3a0b5',
785
785
'phui-font-icon-base-css' => '3dad2ae3',
786
786
'phui-fontkit-css' => '9b345998',
+7
src/applications/uiexample/examples/PHUIErrorExample.php
+7
src/applications/uiexample/examples/PHUIErrorExample.php
···
20
20
PHUIErrorView::SEVERITY_WARNING => 'Warning',
21
21
PHUIErrorView::SEVERITY_NOTICE => 'Notice',
22
22
PHUIErrorView::SEVERITY_NODATA => 'No Data',
23
+
PHUIErrorView::SEVERITY_SUCCESS => 'Success',
23
24
);
25
+
26
+
$button = id(new PHUIButtonView())
27
+
->setTag('a')
28
+
->setText('Resolve Issue')
29
+
->addClass('grey');
24
30
25
31
$views = array();
26
32
// Only Title
···
35
41
$view = new PHUIErrorView();
36
42
$view->setSeverity($sev);
37
43
$view->appendChild('Several issues were encountered.');
44
+
$view->addButton($button);
38
45
$views[] = $view;
39
46
}
40
47
// Only Errors
+19
src/view/form/PHUIErrorView.php
+19
src/view/form/PHUIErrorView.php
···
6
6
const SEVERITY_WARNING = 'warning';
7
7
const SEVERITY_NOTICE = 'notice';
8
8
const SEVERITY_NODATA = 'nodata';
9
+
const SEVERITY_SUCCESS = 'success';
9
10
10
11
private $title;
11
12
private $errors;
12
13
private $severity;
13
14
private $id;
15
+
private $buttons = array();
14
16
15
17
public function setTitle($title) {
16
18
$this->title = $title;
···
32
34
return $this;
33
35
}
34
36
37
+
public function addButton($button) {
38
+
$this->buttons[] = $button;
39
+
return $this;
40
+
}
41
+
35
42
final public function render() {
36
43
37
44
require_celerity_resource('phui-error-view-css');
···
72
79
$classes = array();
73
80
$classes[] = 'phui-error-view';
74
81
$classes[] = 'phui-error-severity-'.$this->severity;
82
+
$classes[] = 'grouped';
75
83
$classes = implode(' ', $classes);
76
84
77
85
$children = $this->renderChildren();
···
89
97
$children);
90
98
}
91
99
100
+
$buttons = null;
101
+
if (!empty($this->buttons)) {
102
+
$buttons = phutil_tag(
103
+
'div',
104
+
array(
105
+
'class' => 'phui-error-view-actions',
106
+
),
107
+
$this->buttons);
108
+
}
109
+
92
110
return phutil_tag(
93
111
'div',
94
112
array(
···
96
114
'class' => $classes,
97
115
),
98
116
array(
117
+
$buttons,
99
118
$title,
100
119
$body,
101
120
));
+51
-5
webroot/rsrc/css/phui/phui-error-view.css
+51
-5
webroot/rsrc/css/phui/phui-error-view.css
···
24
24
line-height: 1.45em;
25
25
}
26
26
27
+
.phui-error-view-actions {
28
+
margin-top: -3px;
29
+
margin-bottom: -4px;
30
+
float: right;
31
+
}
32
+
27
33
.phui-error-view-head + .phui-error-view-body {
28
34
padding-top: 4px;
29
35
}
···
44
50
line-height: 1.5em;
45
51
}
46
52
47
-
.phui-error-severity-error {
53
+
.phui-error-view .phui-error-view-actions .button:hover {
54
+
background: #fff;
55
+
box-shadow: none;
56
+
}
57
+
58
+
.phui-error-severity-error,
59
+
.phui-error-severity-error .button {
48
60
border-color: {$red};
49
61
background: {$lightred};
50
62
}
51
63
52
-
.phui-error-severity-warning {
64
+
.phui-error-severity-error .button {
65
+
color: {$red};
66
+
}
67
+
68
+
.phui-error-severity-warning,
69
+
.phui-error-severity-warning .button {
53
70
border-color: {$yellow};
54
71
background: {$lightyellow};
55
72
}
56
73
57
-
.phui-error-severity-notice {
74
+
.phui-error-severity-warning .button {
75
+
color: #bc7837;
76
+
}
77
+
78
+
.phui-error-severity-notice,
79
+
.phui-error-severity-notice .button {
58
80
border-color: {$blue};
59
81
background: {$lightblue};
60
82
}
61
83
62
-
.phui-error-severity-nodata {
84
+
.phui-error-severity-notice .button {
85
+
color: {$blue};
86
+
}
87
+
88
+
.phui-error-severity-nodata,
89
+
.phui-error-severity-nodata .button {
63
90
border-color: {$lightgreyborder};
64
-
background-color: #fff;
91
+
background: #fff;
92
+
}
93
+
94
+
.phui-error-severity-nodata .button {
95
+
color: {$greytext};
96
+
}
97
+
98
+
.phui-error-severity-success,
99
+
.phui-error-severity-success .button {
100
+
border-color: {$green};
101
+
background: {$lightgreen};
102
+
}
103
+
104
+
.phui-error-severity-success .button {
105
+
color: {$green};
65
106
}
66
107
67
108
.legalpad .phui-error-view {
···
94
135
.phui-object-box .phui-error-severity-notice,
95
136
.aphront-dialog-body .phui-error-severity-notice {
96
137
color: {$blue};
138
+
}
139
+
140
+
.phui-object-box .phui-error-severity-success,
141
+
.aphront-dialog-body .phui-error-severity-success {
142
+
color: {$green};
97
143
}
98
144
99
145
.phui-crumbs-view + .phui-error-view {