@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
PHUIBadgeView
Summary: Resonable sketchout of a "Badge" UI for Profiles/Projects/Achievements.
Test Plan:
weee
{F602729}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T7992
Differential Revision: https://secure.phabricator.com/D13615
+562
+2
resources/celerity/map.php
+2
resources/celerity/map.php
···
126
126
'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
127
127
'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
128
128
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
129
+
'rsrc/css/phui/phui-badge.css' => 'd6603d7f',
129
130
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
130
131
'rsrc/css/phui/phui-button.css' => 'cf529a01',
131
132
'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867',
···
774
775
'phrequent-css' => 'ffc185ad',
775
776
'phriction-document-css' => 'd1861e06',
776
777
'phui-action-panel-css' => '3ee9afd5',
778
+
'phui-badge-view-css' => 'd6603d7f',
777
779
'phui-box-css' => 'a5bb366d',
778
780
'phui-button-css' => 'cf529a01',
779
781
'phui-calendar-css' => 'ccabe893',
+6
src/__phutil_library_map__.php
+6
src/__phutil_library_map__.php
···
1286
1286
'PHUI' => 'view/phui/PHUI.php',
1287
1287
'PHUIActionPanelExample' => 'applications/uiexample/examples/PHUIActionPanelExample.php',
1288
1288
'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php',
1289
+
'PHUIBadgeBoxView' => 'view/phui/PHUIBadgeBoxView.php',
1290
+
'PHUIBadgeExample' => 'applications/uiexample/examples/PHUIBadgeExample.php',
1291
+
'PHUIBadgeView' => 'view/phui/PHUIBadgeView.php',
1289
1292
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
1290
1293
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
1291
1294
'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
···
4932
4935
'PHUI' => 'Phobject',
4933
4936
'PHUIActionPanelExample' => 'PhabricatorUIExample',
4934
4937
'PHUIActionPanelView' => 'AphrontTagView',
4938
+
'PHUIBadgeBoxView' => 'AphrontTagView',
4939
+
'PHUIBadgeExample' => 'PhabricatorUIExample',
4940
+
'PHUIBadgeView' => 'AphrontTagView',
4935
4941
'PHUIBoxExample' => 'PhabricatorUIExample',
4936
4942
'PHUIBoxView' => 'AphrontTagView',
4937
4943
'PHUIButtonBarExample' => 'PhabricatorUIExample',
+132
src/applications/uiexample/examples/PHUIBadgeExample.php
+132
src/applications/uiexample/examples/PHUIBadgeExample.php
···
1
+
<?php
2
+
3
+
final class PHUIBadgeExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return pht('Badge');
7
+
}
8
+
9
+
public function getDescription() {
10
+
return pht('Celebrate the moments of your life.');
11
+
}
12
+
13
+
public function renderExample() {
14
+
15
+
$badges1 = array();
16
+
$badges1[] = id(new PHUIBadgeView())
17
+
->setIcon('fa-users')
18
+
->setHeader(pht('Phacility High Command'))
19
+
->setHref('/')
20
+
->setSource('Projects (automatic)')
21
+
->addByline(pht('Dec 31, 1969'))
22
+
->addByline('3 Members');
23
+
24
+
$badges1[] = id(new PHUIBadgeView())
25
+
->setIcon('fa-lock')
26
+
->setHeader(pht('Blessed Committers'))
27
+
->setSource('Projects (automatic)')
28
+
->addByline(pht('Dec 31, 1969'))
29
+
->addByline('12 Members');
30
+
31
+
$badges1[] = id(new PHUIBadgeView())
32
+
->setIcon('fa-camera-retro')
33
+
->setHeader(pht('Design'))
34
+
->setSource('Projects (automatic)')
35
+
->addByline(pht('Dec 31, 1969'))
36
+
->addByline('2 Members');
37
+
38
+
$badges1[] = id(new PHUIBadgeView())
39
+
->setIcon('fa-lock')
40
+
->setHeader(pht('Blessed Reviewers'))
41
+
->setSource('Projects (automatic)')
42
+
->addByline(pht('Dec 31, 1969'))
43
+
->addByline('3 Members');
44
+
45
+
$badges1[] = id(new PHUIBadgeView())
46
+
->setIcon('fa-umbrella')
47
+
->setHeader(pht('Wikipedia'))
48
+
->setSource('Projects (automatic)')
49
+
->addByline(pht('Dec 31, 1969'))
50
+
->addByline('22 Members');
51
+
52
+
$badges2 = array();
53
+
$badges2[] = id(new PHUIBadgeView())
54
+
->setIcon('fa-user')
55
+
->setHeader(pht('Phabricator User'))
56
+
->setSubhead(pht('Confirmed your account.'))
57
+
->setQuality(PHUIBadgeView::POOR)
58
+
->setSource(pht('People (automatic)'))
59
+
->addByline(pht('Dec 31, 1969'))
60
+
->addByline('212 Issued (100%)');
61
+
62
+
$badges2[] = id(new PHUIBadgeView())
63
+
->setIcon('fa-code')
64
+
->setHeader(pht('Code Contributor'))
65
+
->setSubhead(pht('Wrote code that was acceptable'))
66
+
->setQuality(PHUIBadgeView::COMMON)
67
+
->setSource('Diffusion (automatic)')
68
+
->addByline(pht('Dec 31, 1969'))
69
+
->addByline('200 Awarded (98%)');
70
+
71
+
$badges2[] = id(new PHUIBadgeView())
72
+
->setIcon('fa-bug')
73
+
->setHeader(pht('Task Master'))
74
+
->setSubhead(pht('Closed over 100 tasks'))
75
+
->setQuality(PHUIBadgeView::UNCOMMON)
76
+
->setSource('Maniphest (automatic)')
77
+
->addByline(pht('Dec 31, 1969'))
78
+
->addByline('56 Awarded (43%)');
79
+
80
+
$badges2[] = id(new PHUIBadgeView())
81
+
->setIcon('fa-star')
82
+
->setHeader(pht('Code Weaver'))
83
+
->setSubhead(pht('Landed 1,000 Commits'))
84
+
->setQuality(PHUIBadgeView::RARE)
85
+
->setSource('Diffusion (automatic)')
86
+
->addByline(pht('Dec 31, 1969'))
87
+
->addByline('42 Awarded (20%)');
88
+
89
+
$badges2[] = id(new PHUIBadgeView())
90
+
->setIcon('fa-users')
91
+
->setHeader(pht('Security Team'))
92
+
->setSubhead(pht('<sripts>alert(1);</script>'))
93
+
->setQuality(PHUIBadgeView::EPIC)
94
+
->setSource('Projects (automatic)')
95
+
->addByline(pht('Dec 31, 1969'))
96
+
->addByline('21 Awarded (10%)');
97
+
98
+
$badges2[] = id(new PHUIBadgeView())
99
+
->setIcon('fa-user')
100
+
->setHeader(pht('Adminstrator'))
101
+
->setSubhead(pht('Drew the short stick'))
102
+
->setQuality(PHUIBadgeView::LEGENDARY)
103
+
->setSource(pht('People (automatic)'))
104
+
->addByline(pht('Dec 31, 1969'))
105
+
->addByline('3 Awarded (1.4%)');
106
+
107
+
$badges2[] = id(new PHUIBadgeView())
108
+
->setIcon('fa-compass')
109
+
->setHeader(pht('Lead Developer'))
110
+
->setSubhead(pht('Lead Developer of Phabricator'))
111
+
->setQuality(PHUIBadgeView::HEIRLOOM)
112
+
->setSource(pht('Direct Award (epriestley)'))
113
+
->addByline(pht('Dec 31, 1969'))
114
+
->addByline('1 Awarded (0.4%)');
115
+
116
+
$flex1 = new PHUIBadgeBoxView();
117
+
$flex1->addItems($badges1);
118
+
119
+
$box1 = id(new PHUIObjectBoxView())
120
+
->setHeaderText(pht('Project Membership'))
121
+
->appendChild($flex1);
122
+
123
+
$flex2 = new PHUIBadgeBoxView();
124
+
$flex2->addItems($badges2);
125
+
126
+
$box2 = id(new PHUIObjectBoxView())
127
+
->setHeaderText(pht('Acheivements'))
128
+
->appendChild($flex2);
129
+
130
+
return array($box1, $box2);
131
+
}
132
+
}
+48
src/view/phui/PHUIBadgeBoxView.php
+48
src/view/phui/PHUIBadgeBoxView.php
···
1
+
<?php
2
+
3
+
final class PHUIBadgeBoxView extends AphrontTagView {
4
+
5
+
private $items = array();
6
+
7
+
public function addItem($item) {
8
+
$this->items[] = $item;
9
+
return $this;
10
+
}
11
+
12
+
public function addItems($items) {
13
+
foreach ($items as $item) {
14
+
$this->items[] = $item;
15
+
}
16
+
return $this;
17
+
}
18
+
19
+
protected function getTagName() {
20
+
return 'ul';
21
+
}
22
+
23
+
protected function getTagAttributes() {
24
+
require_celerity_resource('phui-badge-view-css');
25
+
26
+
$classes = array();
27
+
$classes[] = 'phui-badge-flex-view';
28
+
$classes[] = 'grouped';
29
+
30
+
return array(
31
+
'class' => implode(' ', $classes),
32
+
);
33
+
}
34
+
35
+
protected function getTagContent() {
36
+
$items = array();
37
+
foreach ($this->items as $item) {
38
+
$items[] = phutil_tag(
39
+
'li',
40
+
array(
41
+
'class' => 'phui-badge-flex-item',
42
+
),
43
+
$item);
44
+
}
45
+
return $items;
46
+
47
+
}
48
+
}
+215
src/view/phui/PHUIBadgeView.php
+215
src/view/phui/PHUIBadgeView.php
···
1
+
<?php
2
+
3
+
final class PHUIBadgeView extends AphrontTagView {
4
+
5
+
private $href;
6
+
private $icon;
7
+
private $quality;
8
+
private $source;
9
+
private $header;
10
+
private $subhead;
11
+
private $bylines = array();
12
+
13
+
// Yes, World of Warcraft Item Quality
14
+
const POOR = 'grey';
15
+
const COMMON = 'white';
16
+
const UNCOMMON = 'green';
17
+
const RARE = 'blue';
18
+
const EPIC = 'indigo';
19
+
const LEGENDARY = 'orange';
20
+
const HEIRLOOM = 'yellow';
21
+
22
+
23
+
public function setIcon($icon) {
24
+
$this->icon = $icon;
25
+
return $this;
26
+
}
27
+
28
+
public function setHref($href) {
29
+
$this->href = $href;
30
+
return $this;
31
+
}
32
+
33
+
public function setQuality($quality) {
34
+
$this->quality = $quality;
35
+
return $this;
36
+
}
37
+
38
+
public function setSource($source) {
39
+
$this->source = $source;
40
+
return $this;
41
+
}
42
+
43
+
public function setHeader($header) {
44
+
$this->header = $header;
45
+
return $this;
46
+
}
47
+
48
+
public function setSubhead($subhead) {
49
+
$this->subhead = $subhead;
50
+
return $this;
51
+
}
52
+
53
+
public function addByline($byline) {
54
+
$this->bylines[] = $byline;
55
+
return $this;
56
+
}
57
+
58
+
private function getQualityTitle() {
59
+
60
+
switch ($this->quality) {
61
+
case self::POOR:
62
+
return pht('Poor');
63
+
case self::COMMON:
64
+
return pht('Common');
65
+
case self::UNCOMMON:
66
+
return pht('Uncommon');
67
+
case self::RARE:
68
+
return pht('Rare');
69
+
case self::EPIC:
70
+
return pht('Epic');
71
+
case self::LEGENDARY:
72
+
return pht('Legendary');
73
+
case self::HEIRLOOM:
74
+
return pht('Heirloom');
75
+
}
76
+
}
77
+
78
+
protected function getTagName() {
79
+
return 'span';
80
+
}
81
+
82
+
protected function getTagAttributes() {
83
+
require_celerity_resource('phui-badge-view-css');
84
+
$id = celerity_generate_unique_node_id();
85
+
86
+
$classes = array();
87
+
$classes[] = 'phui-badge-view';
88
+
if ($this->quality) {
89
+
$classes[] = 'phui-badge-view-'.$this->quality;
90
+
}
91
+
92
+
return array(
93
+
'class' => implode(' ', $classes),
94
+
'sigil' => 'jx-toggle-class',
95
+
'id' => $id,
96
+
'meta' => array(
97
+
'map' => array(
98
+
$id => 'card-flipped',
99
+
),
100
+
),
101
+
);
102
+
}
103
+
104
+
protected function getTagContent() {
105
+
106
+
$icon = id(new PHUIIconView())
107
+
->setIconFont($this->icon);
108
+
109
+
$illustration = phutil_tag_div('phui-badge-illustration', $icon);
110
+
111
+
$header = null;
112
+
if ($this->header) {
113
+
$header = phutil_tag(
114
+
($this->href) ? 'a' : 'span',
115
+
array(
116
+
'class' => 'phui-badge-view-header',
117
+
'href' => $this->href,
118
+
),
119
+
$this->header);
120
+
}
121
+
122
+
$subhead = null;
123
+
if ($this->subhead) {
124
+
$subhead = phutil_tag_div('phui-badge-view-subhead', $this->subhead);
125
+
}
126
+
127
+
$information = phutil_tag(
128
+
'div',
129
+
array(
130
+
'class' => 'phui-badge-view-information',
131
+
),
132
+
array($header, $subhead));
133
+
134
+
$quality = phutil_tag_div('phui-badge-quality', $this->getQualityTitle());
135
+
$source = phutil_tag_div('phui-badge-source', $this->source);
136
+
137
+
$bylines = array();
138
+
if ($this->bylines) {
139
+
foreach ($this->bylines as $byline) {
140
+
$bylines[] = phutil_tag_div('phui-badge-byline', $byline);
141
+
}
142
+
}
143
+
144
+
$card_front_1 = phutil_tag(
145
+
'div',
146
+
array(
147
+
'class' => 'phui-badge-inner-front',
148
+
),
149
+
array(
150
+
$illustration,
151
+
));
152
+
153
+
$card_front_2 = phutil_tag(
154
+
'div',
155
+
array(
156
+
'class' => 'phui-badge-inner-front',
157
+
),
158
+
array(
159
+
$information,
160
+
));
161
+
162
+
$back_info = phutil_tag(
163
+
'div',
164
+
array(
165
+
'class' => 'phui-badge-view-information',
166
+
),
167
+
array(
168
+
$quality,
169
+
$source,
170
+
$bylines,
171
+
));
172
+
173
+
$card_back = phutil_tag(
174
+
'div',
175
+
array(
176
+
'class' => 'phui-badge-inner-back',
177
+
),
178
+
array(
179
+
$back_info,
180
+
));
181
+
182
+
$inner_front = phutil_tag(
183
+
'div',
184
+
array(
185
+
'class' => 'phui-badge-front-view',
186
+
),
187
+
array(
188
+
$card_front_1,
189
+
$card_front_2,
190
+
));
191
+
192
+
$inner_back = phutil_tag_div('phui-badge-back-view', $card_back);
193
+
$front = phutil_tag_div('phui-badge-card-front', $inner_front);
194
+
$back = phutil_tag_div('phui-badge-card-back', $inner_back);
195
+
196
+
$card = phutil_tag(
197
+
'div',
198
+
array(
199
+
'class' => 'phui-badge-card',
200
+
),
201
+
array(
202
+
$front,
203
+
$back,
204
+
));
205
+
206
+
return phutil_tag(
207
+
'div',
208
+
array(
209
+
'class' => 'phui-badge-card-container',
210
+
),
211
+
$card);
212
+
213
+
}
214
+
215
+
}
+159
webroot/rsrc/css/phui/phui-badge.css
+159
webroot/rsrc/css/phui/phui-badge.css
···
1
+
/**
2
+
* @provides phui-badge-view-css
3
+
*/
4
+
5
+
.phui-badge-flex-view {
6
+
padding: 12px 4px 8px;
7
+
overflow: hidden;
8
+
text-align: center;
9
+
}
10
+
11
+
.phui-badge-flex-item {
12
+
display: inline-block;
13
+
padding: 4px 8px;
14
+
}
15
+
16
+
.phui-badge-view {
17
+
display: inline-block;
18
+
position: relative;
19
+
perspective: 512px;
20
+
}
21
+
22
+
.phui-badge-card-container {
23
+
transform-style: preserve-3d;
24
+
-webkit-transform-style: preserve-3d;
25
+
26
+
transition: transform 0.5s;
27
+
-webkit-transition: -webkit-transform 0.5s;
28
+
29
+
transform-origin: right center;
30
+
-webkit-transform-origin: right center;
31
+
32
+
width: 100%;
33
+
height: 100%;
34
+
}
35
+
36
+
.phui-badge-card {
37
+
cursor: pointer;
38
+
padding: 12px;
39
+
height: 180px;
40
+
width: 128px;
41
+
border: 1px solid {$lightgreyborder};
42
+
background-color: {$lightbluebackground};
43
+
}
44
+
45
+
.card-flipped .phui-badge-card-container {
46
+
transform: translateX( -100% ) rotateY( -180deg );
47
+
-webkit-transform: translateX( -100% ) rotateY( -180deg );
48
+
}
49
+
50
+
.phui-badge-card-front,
51
+
.phui-badge-card-back {
52
+
display: block;
53
+
position: absolute;
54
+
width: 128px;
55
+
height: 100%;
56
+
57
+
backface-visibility: hidden;
58
+
-webkit-backface-visibility: hidden;
59
+
-moz-backface-visibility: hidden;
60
+
}
61
+
62
+
63
+
/* Firefox Fix */
64
+
.phui-badge-card-front {
65
+
transform: rotateY(0deg);
66
+
-webkit-trasform: rotateY(0deg);
67
+
}
68
+
69
+
.phui-badge-front-view,
70
+
.phui-badge-back-view {
71
+
display: table;
72
+
width: 100%;
73
+
}
74
+
75
+
.phui-badge-inner-front,
76
+
.phui-badge-inner-back {
77
+
display: table-row;
78
+
}
79
+
80
+
.phui-badge-illustration {
81
+
background-color: #fff;
82
+
box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,.1);
83
+
text-align: center;
84
+
height: 100px;
85
+
width: 100%;
86
+
vertical-align: middle;
87
+
display: table-cell;
88
+
}
89
+
90
+
.phui-badge-illustration .phui-icon-view {
91
+
font-size: 48px;
92
+
height: 48px;
93
+
width: 48px;
94
+
color: {$bluetext};
95
+
}
96
+
97
+
.phui-badge-view-information {
98
+
display: table-cell;
99
+
text-align: center;
100
+
color: {$greytext};
101
+
}
102
+
103
+
.phui-badge-view-header {
104
+
color: {$darkgreytext};
105
+
font-weight: bold;
106
+
padding-top: 12px;
107
+
display: block;
108
+
}
109
+
110
+
.phui-badge-quality {
111
+
padding: 4px 0;
112
+
color: {$darkbluetext};
113
+
font-weight: bold;
114
+
}
115
+
116
+
.phui-badge-view-subhead {
117
+
color: {$lightgreytext};
118
+
font-size: {$smallerfontsize};
119
+
}
120
+
121
+
.phui-badge-card-back {
122
+
transform: rotateY( 180deg );
123
+
-webkit-transform: rotateY( 180deg );
124
+
}
125
+
126
+
/** Quality Levels ***********************************************************/
127
+
128
+
.phui-badge-view-grey .phui-badge-card {
129
+
background-color: {$lightgreybackground};
130
+
}
131
+
132
+
.phui-badge-view-white .phui-badge-card {
133
+
background-color: {$lightbluebackground};
134
+
}
135
+
136
+
.phui-badge-view-green .phui-badge-card {
137
+
background-color: {$sh-greenbackground};
138
+
border-color: {$sh-lightgreenborder};
139
+
}
140
+
141
+
.phui-badge-view-blue .phui-badge-card {
142
+
background-color: {$sh-bluebackground};
143
+
border-color: {$sh-lightblueborder};
144
+
}
145
+
146
+
.phui-badge-view-indigo .phui-badge-card {
147
+
background-color: {$sh-indigobackground};
148
+
border-color: {$sh-lightindigoborder};
149
+
}
150
+
151
+
.phui-badge-view-orange .phui-badge-card {
152
+
background-color: {$sh-orangebackground};
153
+
border-color: {$sh-lightorangeborder};
154
+
}
155
+
156
+
.phui-badge-view-yellow .phui-badge-card {
157
+
background-color: {$sh-yellowbackground};
158
+
border-color: {$sh-lightyellowborder};
159
+
}