@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
PHUIActionPanelView
Summary: Super duper sized panels for singluar actions.
Test Plan:
UIExamples, will need more testing in Phacility.
{F286098}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11709
+315
+2
resources/celerity/map.php
+2
resources/celerity/map.php
···
122
122
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
123
123
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
124
124
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
125
+
'rsrc/css/phui/phui-action-panel.css' => '43989d50',
125
126
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
126
127
'rsrc/css/phui/phui-button.css' => '008ba5e2',
127
128
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
···
765
766
'phrequent-css' => 'ffc185ad',
766
767
'phriction-document-css' => '7d7f0071',
767
768
'phui-action-header-view-css' => '89c497e7',
769
+
'phui-action-panel-css' => '43989d50',
768
770
'phui-box-css' => '7b3a2eed',
769
771
'phui-button-css' => '008ba5e2',
770
772
'phui-calendar-css' => '8675968e',
+4
src/__phutil_library_map__.php
+4
src/__phutil_library_map__.php
···
1122
1122
'PHUI' => 'view/phui/PHUI.php',
1123
1123
'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php',
1124
1124
'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php',
1125
+
'PHUIActionPanelExample' => 'applications/uiexample/examples/PHUIActionPanelExample.php',
1126
+
'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php',
1125
1127
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
1126
1128
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
1127
1129
'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
···
4318
4320
'PHIDQueryConduitAPIMethod' => 'PHIDConduitAPIMethod',
4319
4321
'PHUIActionHeaderExample' => 'PhabricatorUIExample',
4320
4322
'PHUIActionHeaderView' => 'AphrontView',
4323
+
'PHUIActionPanelExample' => 'PhabricatorUIExample',
4324
+
'PHUIActionPanelView' => 'AphrontTagView',
4321
4325
'PHUIBoxExample' => 'PhabricatorUIExample',
4322
4326
'PHUIBoxView' => 'AphrontTagView',
4323
4327
'PHUIButtonBarExample' => 'PhabricatorUIExample',
+59
src/applications/uiexample/examples/PHUIActionPanelExample.php
+59
src/applications/uiexample/examples/PHUIActionPanelExample.php
···
1
+
<?php
2
+
3
+
final class PHUIActionPanelExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return 'Action Panel';
7
+
}
8
+
9
+
public function getDescription() {
10
+
return 'A panel with strong tendencies for inciting ACTION!';
11
+
}
12
+
13
+
public function renderExample() {
14
+
15
+
$view = id(new AphrontMultiColumnView())
16
+
->setFluidLayout(true)
17
+
->setBorder(true);
18
+
19
+
/* Action Panels */
20
+
$panel1 = id(new PHUIActionPanelView())
21
+
->setFontIcon('fa-book')
22
+
->setHeader(pht('Read Documentation'))
23
+
->setHref('#')
24
+
->setSubHeader(pht('Reading is a common way to learn about things.'))
25
+
->setStatus(pht('Carrots help you see better.'))
26
+
->setState(PHUIActionPanelView::STATE_NONE);
27
+
$view->addColumn($panel1);
28
+
29
+
$panel2 = id(new PHUIActionPanelView())
30
+
->setFontIcon('fa-server')
31
+
->setHeader(pht('Launch Instance'))
32
+
->setHref('#')
33
+
->setSubHeader(pht('Maybe this is what you\'re likely here for.'))
34
+
->setStatus(pht('You have no instances.'))
35
+
->setState(PHUIActionPanelView::STATE_ERROR);
36
+
$view->addColumn($panel2);
37
+
38
+
$panel3 = id(new PHUIActionPanelView())
39
+
->setFontIcon('fa-group')
40
+
->setHeader(pht('Code with Friends'))
41
+
->setHref('#')
42
+
->setSubHeader(pht('Writing code is much more fun with friends!'))
43
+
->setStatus(pht('You need more friends.'))
44
+
->setState(PHUIActionPanelView::STATE_WARN);
45
+
$view->addColumn($panel3);
46
+
47
+
$panel4 = id(new PHUIActionPanelView())
48
+
->setFontIcon('fa-cloud-download')
49
+
->setHeader(pht('Download Data'))
50
+
->setHref('#')
51
+
->setSubHeader(pht('Need a backup of all your kitten memes?'))
52
+
->setStatus(pht('Building Download'))
53
+
->setState(PHUIActionPanelView::STATE_PROGRESS);
54
+
$view->addColumn($panel4);
55
+
56
+
57
+
return phutil_tag_div('ml', $view);
58
+
}
59
+
}
+151
src/view/phui/PHUIActionPanelView.php
+151
src/view/phui/PHUIActionPanelView.php
···
1
+
<?php
2
+
3
+
final class PHUIActionPanelView extends AphrontTagView {
4
+
5
+
private $href;
6
+
private $fontIcon;
7
+
private $header;
8
+
private $subHeader;
9
+
private $state;
10
+
private $status;
11
+
12
+
const STATE_WARN = 'phui-action-panel-warn';
13
+
const STATE_INFO = 'phui-action-panel-info';
14
+
const STATE_ERROR = 'phui-action-panel-error';
15
+
const STATE_PROGRESS = 'phui-action-panel-progress';
16
+
const STATE_NONE = 'phui-action-panel-none';
17
+
18
+
public function setHref($href) {
19
+
$this->href = $href;
20
+
return $this;
21
+
}
22
+
23
+
public function setFontIcon($image) {
24
+
$this->fontIcon = $image;
25
+
return $this;
26
+
}
27
+
28
+
public function setHeader($header) {
29
+
$this->header = $header;
30
+
return $this;
31
+
}
32
+
33
+
public function setSubHeader($sub) {
34
+
$this->subHeader = $sub;
35
+
return $this;
36
+
}
37
+
38
+
public function setState($state) {
39
+
$this->state = $state;
40
+
return $this;
41
+
}
42
+
43
+
public function setStatus($text) {
44
+
$this->status = $text;
45
+
return $this;
46
+
}
47
+
48
+
protected function getStateIcon() {
49
+
$icon = new PHUIIconView();
50
+
switch ($this->state) {
51
+
case self::STATE_WARN:
52
+
$icon->setIconFont('fa-exclamation-circle msr');
53
+
break;
54
+
case self::STATE_INFO:
55
+
$icon->setIconFont('fa-info-circle msr');
56
+
break;
57
+
case self::STATE_ERROR:
58
+
$icon->setIconFont('fa-exclamation-triangle msr');
59
+
break;
60
+
case self::STATE_PROGRESS:
61
+
$icon->setIconFont('fa-refresh ph-spin msr');
62
+
break;
63
+
case self::STATE_NONE:
64
+
$icon->setIconFont('fa-info-circle msr');
65
+
break;
66
+
}
67
+
return $icon;
68
+
}
69
+
70
+
protected function getTagAttributes() {
71
+
require_celerity_resource('phui-action-panel-css');
72
+
73
+
$classes = array();
74
+
$classes[] = 'phui-action-panel';
75
+
if ($this->state) {
76
+
$classes[] = $this->state;
77
+
}
78
+
79
+
return array(
80
+
'class' => implode(' ', $classes),
81
+
);
82
+
83
+
}
84
+
85
+
protected function getTagContent() {
86
+
87
+
$icon = null;
88
+
if ($this->fontIcon) {
89
+
$fonticon = id(new PHUIIconView())
90
+
->setIconFont($this->fontIcon);
91
+
if ($this->href) {
92
+
$fonticon = phutil_tag(
93
+
'a',
94
+
array(
95
+
'href' => $this->href,
96
+
),
97
+
$fonticon);
98
+
}
99
+
$icon = phutil_tag(
100
+
'div',
101
+
array(
102
+
'class' => 'phui-action-panel-icon',
103
+
),
104
+
$fonticon);
105
+
}
106
+
107
+
$header = null;
108
+
if ($this->header) {
109
+
$header = $this->header;
110
+
if ($this->href) {
111
+
$header = phutil_tag(
112
+
'a',
113
+
array(
114
+
'href' => $this->href,
115
+
),
116
+
$this->header);
117
+
}
118
+
$header = phutil_tag(
119
+
'div',
120
+
array(
121
+
'class' => 'phui-action-panel-header',
122
+
),
123
+
$header);
124
+
}
125
+
126
+
$subheader = null;
127
+
if ($this->subHeader) {
128
+
$subheader = phutil_tag(
129
+
'div',
130
+
array(
131
+
'class' => 'phui-action-panel-subheader',
132
+
),
133
+
$this->subHeader);
134
+
}
135
+
136
+
$status = null;
137
+
if ($this->status && $this->state) {
138
+
$state_icon = $this->getStateIcon();
139
+
$status = phutil_tag(
140
+
'div',
141
+
array(
142
+
'class' => 'phui-action-panel-status',
143
+
),
144
+
array($state_icon, $this->status));
145
+
}
146
+
147
+
return array($icon, $header, $subheader, $status);
148
+
149
+
}
150
+
151
+
}
+99
webroot/rsrc/css/phui/phui-action-panel.css
+99
webroot/rsrc/css/phui/phui-action-panel.css
···
1
+
/**
2
+
* @provides phui-action-panel-css
3
+
*/
4
+
5
+
.phui-action-panel {
6
+
position: relative;
7
+
padding-bottom: 44px;
8
+
}
9
+
10
+
.phui-action-panel-icon {
11
+
height: 128px;
12
+
line-height: 160px;
13
+
text-align: center;
14
+
vertical-align: bottom;
15
+
}
16
+
17
+
.phui-action-panel-icon a:hover .phui-icon-view {
18
+
color: {$blue};
19
+
}
20
+
21
+
.phui-action-panel-icon .phui-icon-view {
22
+
font-size: 64px;
23
+
color: {$lightgreytext};
24
+
}
25
+
26
+
.phui-action-panel-header {
27
+
padding: 0 8px 4px 8px;
28
+
font-weight: bold;
29
+
font-size: 14px;
30
+
color: {$darkbluetext};
31
+
}
32
+
33
+
.phui-action-panel-header a {
34
+
color: {$blue};
35
+
}
36
+
37
+
.phui-action-panel-subheader {
38
+
padding: 0 8px 4px 8px;
39
+
font-size: 13px;
40
+
color: {$bluetext};
41
+
}
42
+
43
+
.phui-action-panel-status {
44
+
padding: 8px 12px;
45
+
position: absolute;
46
+
bottom: 0;
47
+
left: 0;
48
+
right: 0;
49
+
}
50
+
51
+
.phui-action-panel-none .phui-action-panel-status {
52
+
background-color: {$lightgreybackground};
53
+
border-left: 4px solid {$greyborder};
54
+
color: {$greytext};
55
+
}
56
+
57
+
.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
58
+
color: {$greytext};
59
+
}
60
+
61
+
.phui-action-panel-warn .phui-action-panel-status {
62
+
background-color: {$lightyellow};
63
+
border-left: 4px solid #bc7837;
64
+
color: #bc7837;
65
+
}
66
+
67
+
.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
68
+
color: #bc7837;
69
+
}
70
+
71
+
.phui-action-panel-error .phui-action-panel-status {
72
+
background-color: {$lightred};
73
+
border-left: 4px solid {$red};
74
+
color: {$red};
75
+
}
76
+
77
+
.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
78
+
color: {$red};
79
+
}
80
+
81
+
.phui-action-panel-info .phui-action-panel-status {
82
+
background-color: {$lightblue};
83
+
border-left: 4px solid {$blue};
84
+
color: {$blue};
85
+
}
86
+
87
+
.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
88
+
color: {$blue};
89
+
}
90
+
91
+
.phui-action-panel-progress .phui-action-panel-status {
92
+
background-color: {$lightblue};
93
+
color: {$blue};
94
+
border-left: 4px solid {$blue};
95
+
}
96
+
97
+
.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
98
+
color: {$blue};
99
+
}