@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
PHUIInfoPanel
Summary: First cut of an 'info panel' for phabricator. Basic concept is for display a list of items with a bit more info and depth and an object item list. Projects could be a good first example.
Test Plan: UIExamples
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, epriestley, aran
Differential Revision: https://secure.phabricator.com/D7398
+320
+9
src/__celerity_resource_map__.php
+9
src/__celerity_resource_map__.php
···
3883
3883
),
3884
3884
'disk' => '/rsrc/css/phui/phui-icon.css',
3885
3885
),
3886
+
'phui-info-panel-css' =>
3887
+
array(
3888
+
'uri' => '/res/0a9c55c3/rsrc/css/phui/phui-info-panel.css',
3889
+
'type' => 'css',
3890
+
'requires' =>
3891
+
array(
3892
+
),
3893
+
'disk' => '/rsrc/css/phui/phui-info-panel.css',
3894
+
),
3886
3895
'phui-list-view-css' =>
3887
3896
array(
3888
3897
'uri' => '/res/fbf42225/rsrc/css/phui/phui-list.css',
+4
src/__phutil_library_map__.php
+4
src/__phutil_library_map__.php
···
819
819
'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php',
820
820
'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
821
821
'PHUIIconView' => 'view/phui/PHUIIconView.php',
822
+
'PHUIInfoPanelExample' => 'applications/uiexample/examples/PHUIInfoPanelExample.php',
823
+
'PHUIInfoPanelView' => 'view/phui/PHUIInfoPanelView.php',
822
824
'PHUIListExample' => 'applications/uiexample/examples/PHUIListExample.php',
823
825
'PHUIListItemView' => 'view/phui/PHUIListItemView.php',
824
826
'PHUIListView' => 'view/phui/PHUIListView.php',
···
3044
3046
'PHUIHeaderView' => 'AphrontView',
3045
3047
'PHUIIconExample' => 'PhabricatorUIExample',
3046
3048
'PHUIIconView' => 'AphrontTagView',
3049
+
'PHUIInfoPanelExample' => 'PhabricatorUIExample',
3050
+
'PHUIInfoPanelView' => 'AphrontView',
3047
3051
'PHUIListExample' => 'PhabricatorUIExample',
3048
3052
'PHUIListItemView' => 'AphrontTagView',
3049
3053
'PHUIListView' => 'AphrontTagView',
+139
src/applications/uiexample/examples/PHUIInfoPanelExample.php
+139
src/applications/uiexample/examples/PHUIInfoPanelExample.php
···
1
+
<?php
2
+
3
+
final class PHUIInfoPanelExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return 'Info Panel';
7
+
}
8
+
9
+
public function getDescription() {
10
+
return 'A medium sized box with bits of gooey information.';
11
+
}
12
+
13
+
public function renderExample() {
14
+
15
+
$header1 = id(new PHUIHeaderView())
16
+
->setHeader(pht('Conpherence'));
17
+
18
+
$header2 = id(new PHUIHeaderView())
19
+
->setHeader(pht('Diffusion'));
20
+
21
+
$header3 = id(new PHUIHeaderView())
22
+
->setHeader(pht('Backend Ops Projects'));
23
+
24
+
$header4 = id(new PHUIHeaderView())
25
+
->setHeader(pht('Revamp Liberty'))
26
+
->setSubHeader(pht('For great justice'))
27
+
->setImage(
28
+
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
29
+
30
+
$header5 = id(new PHUIHeaderView())
31
+
->setHeader(pht('Phacility Redesign'))
32
+
->setSubHeader(pht('Move them pixels'))
33
+
->setImage(
34
+
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
35
+
36
+
$header6 = id(new PHUIHeaderView())
37
+
->setHeader(pht('Python Phlux'))
38
+
->setSubHeader(pht('No. Sleep. Till Brooklyn.'))
39
+
->setImage(
40
+
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
41
+
42
+
$column1 = id(new PHUIInfoPanelView())
43
+
->setHeader($header1)
44
+
->setColumns(3)
45
+
->addInfoBlock(3, 'Needs Triage')
46
+
->addInfoBlock(5, 'Unbreak Now')
47
+
->addInfoBlock(0, 'High')
48
+
->addInfoBlock(0, 'Normal')
49
+
->addInfoBlock(12, 'Low')
50
+
->addInfoBlock(123, 'Wishlist');
51
+
52
+
$column2 = id(new PHUIInfoPanelView())
53
+
->setHeader($header2)
54
+
->setColumns(3)
55
+
->addInfoBlock(3, 'Needs Triage')
56
+
->addInfoBlock(5, 'Unbreak Now')
57
+
->addInfoBlock(0, 'High')
58
+
->addInfoBlock(0, 'Normal')
59
+
->addInfoBlock(12, 'Low')
60
+
->addInfoBlock(123, 'Wishlist');
61
+
62
+
$column3 = id(new PHUIInfoPanelView())
63
+
->setHeader($header3)
64
+
->setColumns(3)
65
+
->addInfoBlock(3, 'Needs Triage')
66
+
->addInfoBlock(5, 'Unbreak Now')
67
+
->addInfoBlock(0, 'High')
68
+
->addInfoBlock(0, 'Normal')
69
+
->addInfoBlock(12, 'Low')
70
+
->addInfoBlock(123, 'Wishlist');
71
+
72
+
$column4 = id(new PHUIInfoPanelView())
73
+
->setHeader($header4)
74
+
->setColumns(3)
75
+
->setProgress(90)
76
+
->addInfoBlock(3, 'Needs Triage')
77
+
->addInfoBlock(5, 'Unbreak Now')
78
+
->addInfoBlock(0, 'High')
79
+
->addInfoBlock(0, 'Normal')
80
+
->addInfoBlock(0, 'Wishlist');
81
+
82
+
$column5 = id(new PHUIInfoPanelView())
83
+
->setHeader($header5)
84
+
->setColumns(2)
85
+
->setProgress(25)
86
+
->addInfoBlock(3, 'Needs Triage')
87
+
->addInfoBlock(5, 'Unbreak Now')
88
+
->addInfoBlock(0, 'High')
89
+
->addInfoBlock(0, 'Normal');
90
+
91
+
$column6 = id(new PHUIInfoPanelView())
92
+
->setHeader($header6)
93
+
->setColumns(2)
94
+
->setProgress(50)
95
+
->addInfoBlock(3, 'Needs Triage')
96
+
->addInfoBlock(5, 'Unbreak Now')
97
+
->addInfoBlock(0, 'High')
98
+
->addInfoBlock(0, 'Normal');
99
+
100
+
$layout1 = id(new AphrontMultiColumnView())
101
+
->addColumn($column1)
102
+
->addColumn($column2)
103
+
->addColumn($column3)
104
+
->setFluidLayout(true);
105
+
106
+
$layout2 = id(new AphrontMultiColumnView())
107
+
->addColumn($column4)
108
+
->addColumn($column5)
109
+
->addColumn($column6)
110
+
->setFluidLayout(true);
111
+
112
+
113
+
$head1 = id(new PHUIHeaderView())
114
+
->setHeader(pht('Flagged'));
115
+
116
+
$head2 = id(new PHUIHeaderView())
117
+
->setHeader(pht('Sprints'));
118
+
119
+
120
+
$wrap1 = id(new PHUIBoxView())
121
+
->appendChild($layout1)
122
+
->addMargin(PHUI::MARGIN_LARGE_BOTTOM);
123
+
124
+
$wrap2 = id(new PHUIBoxView())
125
+
->appendChild($layout2)
126
+
->addMargin(PHUI::MARGIN_LARGE_BOTTOM);
127
+
128
+
129
+
return phutil_tag(
130
+
'div',
131
+
array(),
132
+
array(
133
+
$head1,
134
+
$wrap1,
135
+
$head2,
136
+
$wrap2
137
+
));
138
+
}
139
+
}
+118
src/view/phui/PHUIInfoPanelView.php
+118
src/view/phui/PHUIInfoPanelView.php
···
1
+
<?php
2
+
3
+
final class PHUIInfoPanelView extends AphrontView {
4
+
5
+
private $header;
6
+
private $progress = null;
7
+
private $columns = 3;
8
+
private $infoblock = array();
9
+
10
+
protected function canAppendChild() {
11
+
return false;
12
+
}
13
+
14
+
public function setHeader(PHUIHeaderView $header) {
15
+
$this->header = $header;
16
+
return $this;
17
+
}
18
+
19
+
public function setProgress($progress) {
20
+
$this->progress = $progress;
21
+
return $this;
22
+
}
23
+
24
+
public function setColumns($columns) {
25
+
$this->columns = $columns;
26
+
return $this;
27
+
}
28
+
29
+
public function addInfoblock($num, $text) {
30
+
$this->infoblock[] = array($num, $text);
31
+
return $this;
32
+
}
33
+
34
+
public function render() {
35
+
require_celerity_resource('phui-info-panel-css');
36
+
37
+
$trs = array();
38
+
$rows = ceil(count($this->infoblock) / $this->columns);
39
+
for ($i = 0; $i < $rows; $i++) {
40
+
$tds = array();
41
+
$ii = 1;
42
+
foreach ($this->infoblock as $key => $cell) {
43
+
$tds[] = $this->renderCell($cell);
44
+
unset($this->infoblock[$key]);
45
+
$ii++;
46
+
if ($ii > $this->columns) break;
47
+
}
48
+
$trs[] = phutil_tag(
49
+
'tr',
50
+
array(
51
+
'class' => 'phui-info-panel-table-row',
52
+
),
53
+
$tds);
54
+
}
55
+
56
+
$table = phutil_tag(
57
+
'table',
58
+
array(
59
+
'class' => 'phui-info-panel-table',
60
+
),
61
+
$trs);
62
+
63
+
$table = id(new PHUIBoxView())
64
+
->addPadding(PHUI::PADDING_MEDIUM)
65
+
->appendChild($table);
66
+
67
+
$progress = null;
68
+
if ($this->progress) {
69
+
$progress = phutil_tag(
70
+
'div',
71
+
array(
72
+
'class' => 'phui-info-panel-progress',
73
+
'style' => 'width: '.(int)$this->progress.'%;',
74
+
),
75
+
null);
76
+
}
77
+
78
+
$box = id(new PHUIObjectBoxView())
79
+
->setHeader($this->header)
80
+
->appendChild($table)
81
+
->appendChild($progress);
82
+
83
+
return phutil_tag(
84
+
'div',
85
+
array(
86
+
'class' => 'phui-info-panel',
87
+
),
88
+
$box);
89
+
}
90
+
91
+
private function renderCell($cell) {
92
+
$number = phutil_tag(
93
+
'div',
94
+
array(
95
+
'class' => 'phui-info-panel-number',
96
+
),
97
+
$cell[0]);
98
+
99
+
$text = phutil_tag(
100
+
'div',
101
+
array(
102
+
'class' => 'phui-info-panel-text',
103
+
),
104
+
$cell[1]);
105
+
106
+
return phutil_tag(
107
+
'td',
108
+
array(
109
+
'class' => 'phui-info-panel-table-cell',
110
+
'align' => 'center',
111
+
'width' => floor(100 / $this->columns).'%',
112
+
),
113
+
array(
114
+
$number,
115
+
$text,
116
+
));
117
+
}
118
+
}
+50
webroot/rsrc/css/phui/phui-info-panel.css
+50
webroot/rsrc/css/phui/phui-info-panel.css
···
1
+
/**
2
+
* @provides phui-info-panel-css
3
+
*/
4
+
5
+
.phui-info-panel .phui-object-box .phui-header-has-image {
6
+
padding: 2px 0 0 2px;
7
+
}
8
+
9
+
.phui-info-panel .phui-object-box .phui-header-image {
10
+
margin: 0 8px 0 0;
11
+
}
12
+
13
+
.phui-info-panel-table {
14
+
border-collapse: collapse;
15
+
border-style: hidden;
16
+
width: 100%;
17
+
}
18
+
19
+
.phui-info-panel-table td,
20
+
.phui-info-panel-table th {
21
+
border: 1px solid {$thinblueborder};
22
+
}
23
+
24
+
.phui-info-panel-table-cell {
25
+
padding: 8px;
26
+
}
27
+
28
+
.phui-info-panel-number,
29
+
.phui-info-panel-number a {
30
+
font-size: 30px;
31
+
font-weight: bold;
32
+
color: {$lightgreytext};
33
+
-webkit-font-smoothing: antialiased;
34
+
}
35
+
36
+
.phui-info-panel-text,
37
+
.phui-info-panel-text a {
38
+
color: {$lightgreytext};
39
+
}
40
+
41
+
.phui-info-panel-number a:hover,
42
+
.phui-info-panel-text a:hover {
43
+
color: {$greytext};
44
+
text-decoration: none;
45
+
}
46
+
47
+
.phui-info-panel-progress {
48
+
background: {$green};
49
+
height: 6px;
50
+
}