@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
PHUIIconCircleView
Summary: Icon in a circle. Base class, not much in the way of color choices.
Test Plan:
UIExamples, Chrome.
{F1062027}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15034
+143
-3
+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' => 'eacc9293',
10
+
'core.pkg.css' => '9d3a79f4',
11
11
'core.pkg.js' => '573e6664',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '2de124c9',
···
134
134
'rsrc/css/phui/phui-form.css' => '0b98e572',
135
135
'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
136
136
'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
137
-
'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6',
137
+
'rsrc/css/phui/phui-icon.css' => '3f33ab57',
138
138
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
139
139
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
140
140
'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
···
812
812
'phui-form-view-css' => '4a1a0f5e',
813
813
'phui-header-view-css' => '55bb32dd',
814
814
'phui-icon-set-selector-css' => '1ab67aad',
815
-
'phui-icon-view-css' => 'b0a6b1b6',
815
+
'phui-icon-view-css' => '3f33ab57',
816
816
'phui-image-mask-css' => '5a8b09c8',
817
817
'phui-info-panel-css' => '27ea50a1',
818
818
'phui-info-view-css' => '6d7c3509',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
1491
1491
'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php',
1492
1492
'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php',
1493
1493
'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php',
1494
+
'PHUIIconCircleView' => 'view/phui/PHUIIconCircleView.php',
1494
1495
'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
1495
1496
'PHUIIconView' => 'view/phui/PHUIIconView.php',
1496
1497
'PHUIImageMaskExample' => 'applications/uiexample/examples/PHUIImageMaskExample.php',
···
5640
5641
'PHUIHandleTagListView' => 'AphrontTagView',
5641
5642
'PHUIHandleView' => 'AphrontView',
5642
5643
'PHUIHeaderView' => 'AphrontTagView',
5644
+
'PHUIIconCircleView' => 'AphrontTagView',
5643
5645
'PHUIIconExample' => 'PhabricatorUIExample',
5644
5646
'PHUIIconView' => 'AphrontTagView',
5645
5647
'PHUIImageMaskExample' => 'PhabricatorUIExample',
+29
src/applications/uiexample/examples/PHUIIconExample.php
+29
src/applications/uiexample/examples/PHUIIconExample.php
···
110
110
->addClass(PHUI::MARGIN_SMALL_RIGHT);
111
111
}
112
112
113
+
$circles = array('fa-pencil', 'fa-chevron-left', 'fa-chevron-right');
114
+
$circleview = array();
115
+
foreach ($circles as $circle) {
116
+
$circleview[] =
117
+
id(new PHUIIconCircleView())
118
+
->setIcon($circle)
119
+
->setHref('#')
120
+
->addClass('mmr');
121
+
}
122
+
123
+
$circles = array('fa-plus', 'fa-bars', 'fa-paw');
124
+
foreach ($circles as $circle) {
125
+
$circleview[] =
126
+
id(new PHUIIconCircleView())
127
+
->setIcon($circle)
128
+
->setSize(PHUIIconCircleView::MEDIUM)
129
+
->setHref('#')
130
+
->addClass('mmr');
131
+
}
132
+
113
133
$layout_cicons = id(new PHUIBoxView())
114
134
->appendChild($cicons)
115
135
->addMargin(PHUI::MARGIN_LARGE);
···
130
150
->appendChild($tokenview)
131
151
->addMargin(PHUI::MARGIN_MEDIUM);
132
152
153
+
$layout4 = id(new PHUIBoxView())
154
+
->appendChild($circleview)
155
+
->addMargin(PHUI::MARGIN_MEDIUM);
156
+
133
157
$layout5 = id(new PHUIBoxView())
134
158
->appendChild($loginview)
135
159
->addMargin(PHUI::MARGIN_MEDIUM);
···
158
182
->setHeaderText(pht('Tokens'))
159
183
->appendChild($layout3);
160
184
185
+
$wrap4 = id(new PHUIObjectBoxView())
186
+
->setHeaderText(pht('Circles'))
187
+
->appendChild($layout4);
188
+
161
189
$wrap5 = id(new PHUIObjectBoxView())
162
190
->setHeaderText(pht('Authentication'))
163
191
->appendChild($layout5);
···
172
200
$transforms,
173
201
$wrap2,
174
202
$wrap3,
203
+
$wrap4,
175
204
$wrap5,
176
205
));
177
206
}
+67
src/view/phui/PHUIIconCircleView.php
+67
src/view/phui/PHUIIconCircleView.php
···
1
+
<?php
2
+
3
+
final class PHUIIconCircleView extends AphrontTagView {
4
+
5
+
private $href = null;
6
+
private $icon;
7
+
private $color;
8
+
private $size;
9
+
10
+
const SMALL = 'circle-small';
11
+
const MEDIUM = 'circle-medium';
12
+
13
+
public function setHref($href) {
14
+
$this->href = $href;
15
+
return $this;
16
+
}
17
+
18
+
public function setIcon($icon) {
19
+
$this->icon = $icon;
20
+
return $this;
21
+
}
22
+
23
+
public function setColor($color) {
24
+
$this->color = $color;
25
+
return $this;
26
+
}
27
+
28
+
public function setSize($size) {
29
+
$this->size = $size;
30
+
return $this;
31
+
}
32
+
33
+
protected function getTagName() {
34
+
$tag = 'span';
35
+
if ($this->href) {
36
+
$tag = 'a';
37
+
}
38
+
return $tag;
39
+
}
40
+
41
+
protected function getTagAttributes() {
42
+
require_celerity_resource('phui-icon-view-css');
43
+
44
+
$classes = array();
45
+
$classes[] = 'phui-icon-circle';
46
+
47
+
if ($this->color) {
48
+
$classes[] = 'phui-icon-circle-'.$this->color;
49
+
}
50
+
51
+
if ($this->size) {
52
+
$classes[] = $this->size;
53
+
}
54
+
55
+
return array(
56
+
'href' => $this->href,
57
+
'class' => $classes,
58
+
);
59
+
}
60
+
61
+
protected function getTagContent() {
62
+
return id(new PHUIIconView())
63
+
->setIconFont($this->icon)
64
+
->addClass($this->color);
65
+
}
66
+
67
+
}
+42
webroot/rsrc/css/phui/phui-icon.css
+42
webroot/rsrc/css/phui/phui-icon.css
···
38
38
text-decoration: none;
39
39
color: {$sky};
40
40
}
41
+
42
+
/* - Icon in a Circle ------------------------------------------------------- */
43
+
44
+
.phui-icon-circle {
45
+
border: 1px solid {$lightblueborder};
46
+
border-radius: 24px;
47
+
height: 24px;
48
+
width: 24px;
49
+
text-align: center;
50
+
display: inline-block;
51
+
cursor: pointer;
52
+
}
53
+
54
+
.phui-icon-circle.circle-medium {
55
+
height: 36px;
56
+
width: 36px;
57
+
border-radius: 36px;
58
+
}
59
+
60
+
.phui-icon-circle .phui-icon-view {
61
+
height: 24px;
62
+
width: 24px;
63
+
font-size: 11px;
64
+
line-height: 24px;
65
+
color: {$lightblueborder};
66
+
cursor: pointer;
67
+
}
68
+
69
+
.phui-icon-circle.circle-medium .phui-icon-view {
70
+
font-size: 18px;
71
+
line-height: 36px;
72
+
}
73
+
74
+
a.phui-icon-circle:hover {
75
+
text-decoration: none;
76
+
border-color: {$sky};
77
+
cursor: pointer;
78
+
}
79
+
80
+
a.phui-icon-circle:hover .phui-icon-view {
81
+
color: {$sky};
82
+
}