@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 bigtext option to PHUIActionPanelView
Summary: Adds option for setting large text instead of icons. Adds success state.
Test Plan:
Built some more examples.
{F286388}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11710
+92
-8
+2
-2
resources/celerity/map.php
+2
-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
+
'rsrc/css/phui/phui-action-panel.css' => '4bcb288d',
126
126
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
127
127
'rsrc/css/phui/phui-button.css' => '008ba5e2',
128
128
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
···
766
766
'phrequent-css' => 'ffc185ad',
767
767
'phriction-document-css' => '7d7f0071',
768
768
'phui-action-header-view-css' => '89c497e7',
769
-
'phui-action-panel-css' => '43989d50',
769
+
'phui-action-panel-css' => '4bcb288d',
770
770
'phui-box-css' => '7b3a2eed',
771
771
'phui-button-css' => '008ba5e2',
772
772
'phui-calendar-css' => '8675968e',
+41
-1
src/applications/uiexample/examples/PHUIActionPanelExample.php
+41
-1
src/applications/uiexample/examples/PHUIActionPanelExample.php
···
53
53
->setState(PHUIActionPanelView::STATE_PROGRESS);
54
54
$view->addColumn($panel4);
55
55
56
+
$view2 = id(new AphrontMultiColumnView())
57
+
->setFluidLayout(true)
58
+
->setBorder(true);
56
59
57
-
return phutil_tag_div('ml', $view);
60
+
/* Action Panels */
61
+
$panel1 = id(new PHUIActionPanelView())
62
+
->setFontIcon('fa-credit-card')
63
+
->setHeader(pht('Account Balance'))
64
+
->setHref('#')
65
+
->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.'))
66
+
->setStatus(pht('Account in good standing.'))
67
+
->setState(PHUIActionPanelView::STATE_SUCCESS);
68
+
$view2->addColumn($panel1);
69
+
70
+
$panel2 = id(new PHUIActionPanelView())
71
+
->setBigText('148')
72
+
->setHeader(pht('Instance Users'))
73
+
->setHref('#')
74
+
->setSubHeader(
75
+
pht('You currently have 140 active and 8 inactive accounts'));
76
+
$view2->addColumn($panel2);
77
+
78
+
$panel3 = id(new PHUIActionPanelView())
79
+
->setBigText('March 12')
80
+
->setHeader(pht('Next Maintenance Window'))
81
+
->setHref('#')
82
+
->setSubHeader(
83
+
pht('At 6:00 am PST, Phacility will conduct weekly maintenence.'))
84
+
->setStatus(pht('Very Important!'))
85
+
->setState(PHUIActionPanelView::STATE_ERROR);
86
+
$view2->addColumn($panel3);
87
+
88
+
$panel4 = id(new PHUIActionPanelView())
89
+
->setBigText('1,113,377')
90
+
->setHeader(pht('Lines of Code'))
91
+
->setHref('#')
92
+
->setSubHeader(pht('Your team has reviewed lots of code!'));
93
+
$view2->addColumn($panel4);
94
+
95
+
$view = phutil_tag_div('mlb', $view);
96
+
97
+
return phutil_tag_div('ml', array($view, $view2));
58
98
}
59
99
}
+23
-4
src/view/phui/PHUIActionPanelView.php
+23
-4
src/view/phui/PHUIActionPanelView.php
···
6
6
private $fontIcon;
7
7
private $header;
8
8
private $subHeader;
9
+
private $bigText;
9
10
private $state;
10
11
private $status;
11
12
12
13
const STATE_WARN = 'phui-action-panel-warn';
13
14
const STATE_INFO = 'phui-action-panel-info';
14
15
const STATE_ERROR = 'phui-action-panel-error';
16
+
const STATE_SUCCESS = 'phui-action-panel-success';
15
17
const STATE_PROGRESS = 'phui-action-panel-progress';
16
18
const STATE_NONE = 'phui-action-panel-none';
17
19
···
22
24
23
25
public function setFontIcon($image) {
24
26
$this->fontIcon = $image;
27
+
return $this;
28
+
}
29
+
30
+
public function setBigText($text) {
31
+
$this->bigText = $text;
25
32
return $this;
26
33
}
27
34
···
60
67
case self::STATE_PROGRESS:
61
68
$icon->setIconFont('fa-refresh ph-spin msr');
62
69
break;
70
+
case self::STATE_SUCCESS:
71
+
$icon->setIconFont('fa-check msr');
72
+
break;
63
73
case self::STATE_NONE:
64
-
$icon->setIconFont('fa-info-circle msr');
74
+
return null;
65
75
break;
66
76
}
67
77
return $icon;
···
85
95
protected function getTagContent() {
86
96
87
97
$icon = null;
88
-
if ($this->fontIcon) {
89
-
$fonticon = id(new PHUIIconView())
90
-
->setIconFont($this->fontIcon);
98
+
if ($this->fontIcon || $this->bigText) {
99
+
if ($this->fontIcon) {
100
+
$fonticon = id(new PHUIIconView())
101
+
->setIconFont($this->fontIcon);
102
+
} else {
103
+
$fonticon = phutil_tag(
104
+
'span',
105
+
array(
106
+
'class' => 'phui-action-panel-bigtext',
107
+
),
108
+
$this->bigText);
109
+
}
91
110
if ($this->href) {
92
111
$fonticon = phutil_tag(
93
112
'a',
+26
-1
webroot/rsrc/css/phui/phui-action-panel.css
+26
-1
webroot/rsrc/css/phui/phui-action-panel.css
···
14
14
vertical-align: bottom;
15
15
}
16
16
17
-
.phui-action-panel-icon a:hover .phui-icon-view {
17
+
.phui-action-panel-bigtext {
18
+
font-size: 40px;
19
+
color: {$lightgreytext};
20
+
line-height: 96px;
21
+
}
22
+
23
+
.phui-action-panel-icon a {
24
+
display: block;
25
+
}
26
+
27
+
.phui-action-panel-icon a:hover .phui-icon-view,
28
+
.phui-action-panel-icon a:hover .phui-action-panel-bigtext {
18
29
color: {$blue};
30
+
}
31
+
32
+
.phui-action-panel-icon a:hover {
33
+
text-decoration: none;
19
34
}
20
35
21
36
.phui-action-panel-icon .phui-icon-view {
···
86
101
87
102
.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
88
103
color: {$blue};
104
+
}
105
+
106
+
.phui-action-panel-success .phui-action-panel-status {
107
+
background-color: {$lightgreen};
108
+
color: {$green};
109
+
border-left: 4px solid {$green};
110
+
}
111
+
112
+
.phui-action-panel-success .phui-action-panel-status .phui-icon-view {
113
+
color: {$green};
89
114
}
90
115
91
116
.phui-action-panel-progress .phui-action-panel-status {