@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
Try layering state icons on PHUICircleIconView
Summary: I think this is reasonable for my current use case, but stacking icons overally is pretty clunky.
Test Plan:
UIExamples
{F4978899}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D18032
+98
-6
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'ff161f2d',
11
11
'conpherence.pkg.js' => 'b5b51108',
12
-
'core.pkg.css' => 'b666574e',
12
+
'core.pkg.css' => '19f6f61f',
13
13
'core.pkg.js' => '21d34805',
14
14
'darkconsole.pkg.js' => '1f9a31bc',
15
15
'differential.pkg.css' => '7d4cfa59',
···
158
158
'rsrc/css/phui/phui-header-view.css' => 'a3d1aecd',
159
159
'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
160
160
'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
161
-
'rsrc/css/phui/phui-icon.css' => '12b387a1',
161
+
'rsrc/css/phui/phui-icon.css' => '4c6d624c',
162
162
'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
163
163
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
164
164
'rsrc/css/phui/phui-info-view.css' => '6e217679',
···
862
862
'phui-hovercard' => '1bd28176',
863
863
'phui-hovercard-view-css' => 'f0592bcf',
864
864
'phui-icon-set-selector-css' => '87db8fee',
865
-
'phui-icon-view-css' => '12b387a1',
865
+
'phui-icon-view-css' => '4c6d624c',
866
866
'phui-image-mask-css' => 'a8498f9c',
867
867
'phui-info-panel-css' => '27ea50a1',
868
868
'phui-info-view-css' => '6e217679',
+17
src/applications/uiexample/examples/PHUIIconExample.php
+17
src/applications/uiexample/examples/PHUIIconExample.php
···
130
130
->addClass('mmr');
131
131
}
132
132
133
+
$circles = array('fa-gear', 'fa-recycle');
134
+
$colors = array('green', 'pink', 'red', 'sky', 'violet');
135
+
foreach ($circles as $circle) {
136
+
$states = PHUIIconCircleView::getStateMap();
137
+
foreach ($states as $state => $name) {
138
+
$i = array_rand($colors);
139
+
$circleview[] =
140
+
id(new PHUIIconCircleView())
141
+
->setIcon($circle)
142
+
->setSize(PHUIIconCircleView::SMALL)
143
+
->setState($state)
144
+
->setColor($colors[$i])
145
+
->setHref('#')
146
+
->addClass('mmr');
147
+
}
148
+
}
149
+
133
150
$squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home');
134
151
$squareview = array();
135
152
foreach ($squares as $icon) {
+46
-1
src/view/phui/PHUIIconCircleView.php
+46
-1
src/view/phui/PHUIIconCircleView.php
···
6
6
private $icon;
7
7
private $color;
8
8
private $size;
9
+
private $state;
9
10
10
11
const SMALL = 'circle-small';
11
12
const MEDIUM = 'circle-medium';
13
+
14
+
const STATE_FAIL = 'fa-times-circle';
15
+
const STATE_INFO = 'fa-info-circle';
16
+
const STATE_STOP = 'fa-stop-circle';
17
+
const STATE_START = 'fa-play-circle';
18
+
const STATE_PAUSE = 'fa-pause-circle';
19
+
const STATE_SUCCESS = 'fa-check-circle';
20
+
const STATE_WARNING = 'fa-exclamation-circle';
21
+
const STATE_PLUS = 'fa-plus-circle';
22
+
const STATE_MINUS = 'fa-minus-circle';
23
+
const STATE_UNKNOWN = 'fa-question-circle';
12
24
13
25
public function setHref($href) {
14
26
$this->href = $href;
···
30
42
return $this;
31
43
}
32
44
45
+
public function setState($state) {
46
+
$this->state = $state;
47
+
return $this;
48
+
}
49
+
33
50
protected function getTagName() {
34
51
$tag = 'span';
35
52
if ($this->href) {
···
54
71
$classes[] = $this->size;
55
72
}
56
73
74
+
if ($this->state) {
75
+
$classes[] = 'phui-icon-circle-state';
76
+
}
77
+
57
78
return array(
58
79
'href' => $this->href,
59
80
'class' => $classes,
···
61
82
}
62
83
63
84
protected function getTagContent() {
85
+
$state = null;
86
+
if ($this->state) {
87
+
$state = id(new PHUIIconView())
88
+
->setIcon($this->state.' '.$this->color)
89
+
->addClass('phui-icon-circle-state-icon');
90
+
}
91
+
64
92
return id(new PHUIIconView())
65
-
->setIcon($this->icon);
93
+
->setIcon($this->icon)
94
+
->addClass('phui-icon-circle-icon')
95
+
->appendChild($state);
96
+
}
97
+
98
+
public static function getStateMap() {
99
+
return array(
100
+
self::STATE_FAIL => pht('Failure'),
101
+
self::STATE_INFO => pht('Information'),
102
+
self::STATE_STOP => pht('Stop'),
103
+
self::STATE_START => pht('Start'),
104
+
self::STATE_PAUSE => pht('Pause'),
105
+
self::STATE_SUCCESS => pht('Success'),
106
+
self::STATE_WARNING => pht('Warning'),
107
+
self::STATE_PLUS => pht('Plus'),
108
+
self::STATE_MINUS => pht('Minus'),
109
+
self::STATE_UNKNOWN => pht('Unknown'),
110
+
);
66
111
}
67
112
68
113
}
+32
-2
webroot/rsrc/css/phui/phui-icon.css
+32
-2
webroot/rsrc/css/phui/phui-icon.css
···
57
57
cursor: pointer;
58
58
background: transparent;
59
59
padding: 0;
60
+
position: relative;
60
61
}
61
62
62
63
.phui-icon-circle.circle-medium {
···
65
66
border-radius: 36px;
66
67
}
67
68
68
-
.phui-icon-circle .phui-icon-view {
69
+
.phui-icon-circle.phui-icon-circle-state {
70
+
border-color: transparent;
71
+
background-color: {$bluebackground};
72
+
}
73
+
74
+
.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon {
75
+
color: {$bluetext};
76
+
font-size: 16px;
77
+
}
78
+
79
+
a.phui-icon-circle.phui-icon-circle-state:hover {
80
+
border-color: transparent !important;
81
+
}
82
+
83
+
.phui-icon-circle .phui-icon-circle-icon {
69
84
height: 24px;
70
85
width: 24px;
71
86
font-size: 11px;
···
74
89
cursor: pointer;
75
90
}
76
91
77
-
.phui-icon-circle.circle-medium .phui-icon-view {
92
+
.phui-icon-circle.circle-medium .phui-icon-circle-icon {
78
93
font-size: 18px;
79
94
line-height: 36px;
80
95
}
···
127
142
128
143
a.phui-icon-circle.hover-red:hover .phui-icon-view {
129
144
color: {$red};
145
+
}
146
+
147
+
a.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon {
148
+
position: absolute;
149
+
width: 14px;
150
+
height: 14px;
151
+
display: inline-block;
152
+
font-size: 12px;
153
+
right: -3px;
154
+
top: -4px;
155
+
text-shadow:
156
+
-1px -1px 0 #fff,
157
+
1px -1px 0 #fff,
158
+
-1px 1px 0 #fff,
159
+
1px 1px 0 #fff;
130
160
}
131
161
132
162
/* - Icon in a Square ------------------------------------------------------- */