@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 setBackground to PHUIIconView
Summary: Ref T11132. Adds a background color option to PHUIIconView, for use whereever, and NUX. Also normalize icon placement for mixed image/icon result list.
Test Plan: Test in UIExamples, and Global Settings.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Maniphest Tasks: T11132
Differential Revision: https://secure.phabricator.com/D16424
+108
-35
+7
-7
resources/celerity/map.php
+7
-7
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'ba6d7e7a',
10
+
'core.pkg.css' => 'ed7ae7bb',
11
11
'core.pkg.js' => 'b562c3db',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '3fb7f532',
···
112
112
'rsrc/css/font/font-aleo.css' => '8bdb2835',
113
113
'rsrc/css/font/font-awesome.css' => '2b7ebbcc',
114
114
'rsrc/css/font/font-lato.css' => 'c7ccd872',
115
-
'rsrc/css/font/phui-font-icon-base.css' => '6449bce8',
115
+
'rsrc/css/font/phui-font-icon-base.css' => '4e8274c4',
116
116
'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
117
117
'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
118
118
'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
···
141
141
'rsrc/css/phui/phui-header-view.css' => '06385974',
142
142
'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
143
143
'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
144
-
'rsrc/css/phui/phui-icon.css' => 'd0534b71',
144
+
'rsrc/css/phui/phui-icon.css' => 'b1dbd620',
145
145
'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
146
146
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
147
147
'rsrc/css/phui/phui-info-view.css' => '28efab79',
148
148
'rsrc/css/phui/phui-list.css' => '9da2aa00',
149
149
'rsrc/css/phui/phui-object-box.css' => '6b487c57',
150
-
'rsrc/css/phui/phui-object-item-list-view.css' => 'aefe157c',
150
+
'rsrc/css/phui/phui-object-item-list-view.css' => '40010767',
151
151
'rsrc/css/phui/phui-pager.css' => 'bea33d23',
152
152
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
153
153
'rsrc/css/phui/phui-profile-menu.css' => '8a3fc181',
···
840
840
'phui-document-view-css' => 'c32e8dec',
841
841
'phui-document-view-pro-css' => 'dc3d46ed',
842
842
'phui-feed-story-css' => 'aa49845d',
843
-
'phui-font-icon-base-css' => '6449bce8',
843
+
'phui-font-icon-base-css' => '4e8274c4',
844
844
'phui-fontkit-css' => '9cda225e',
845
845
'phui-form-css' => 'aac1d51d',
846
846
'phui-form-view-css' => '76b4a46c',
···
849
849
'phui-hovercard' => '1bd28176',
850
850
'phui-hovercard-view-css' => 'de1a2119',
851
851
'phui-icon-set-selector-css' => '1ab67aad',
852
-
'phui-icon-view-css' => 'd0534b71',
852
+
'phui-icon-view-css' => 'b1dbd620',
853
853
'phui-image-mask-css' => 'a8498f9c',
854
854
'phui-info-panel-css' => '27ea50a1',
855
855
'phui-info-view-css' => '28efab79',
856
856
'phui-inline-comment-view-css' => '5953c28e',
857
857
'phui-list-view-css' => '9da2aa00',
858
858
'phui-object-box-css' => '6b487c57',
859
-
'phui-object-item-list-view-css' => 'aefe157c',
859
+
'phui-object-item-list-view-css' => '40010767',
860
860
'phui-pager-css' => 'bea33d23',
861
861
'phui-pinboard-view-css' => '2495140e',
862
862
'phui-profile-menu-css' => '8a3fc181',
+5
-2
src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php
+5
-2
src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php
···
62
62
->setViewer($viewer);
63
63
foreach ($settings as $setting) {
64
64
65
+
$icon = id(new PHUIIconView())
66
+
->setIcon('fa-globe')
67
+
->setBackground('bg-sky');
68
+
65
69
$item = id(new PHUIObjectItemView())
66
70
->setHeader($setting->getDisplayName())
67
71
->setHref($setting->getEditURI())
68
-
// TODO: Replace this with NUX Style bg / white icon when built
69
-
->setImageIcon('fa-globe')
72
+
->setImageIcon($icon)
70
73
->addAttribute(pht('Edit global default settings for all users.'));
71
74
72
75
$list->addItem($item);
+21
-1
src/applications/uiexample/examples/PHUIIconExample.php
+21
-1
src/applications/uiexample/examples/PHUIIconExample.php
···
130
130
->addClass('mmr');
131
131
}
132
132
133
+
$squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home');
134
+
$squareview = array();
135
+
foreach ($squares as $icon) {
136
+
$squareview[] =
137
+
id(new PHUIIconView())
138
+
->setIcon($icon)
139
+
->setBackground('bg-blue')
140
+
->setHref('#')
141
+
->addClass('mmr');
142
+
}
143
+
133
144
$layout_cicons = id(new PHUIBoxView())
134
145
->appendChild($cicons)
135
146
->addMargin(PHUI::MARGIN_LARGE);
···
155
166
->addMargin(PHUI::MARGIN_MEDIUM);
156
167
157
168
$layout5 = id(new PHUIBoxView())
169
+
->appendChild($squareview)
170
+
->addMargin(PHUI::MARGIN_MEDIUM);
171
+
172
+
$layout6 = id(new PHUIBoxView())
158
173
->appendChild($loginview)
159
174
->addMargin(PHUI::MARGIN_MEDIUM);
160
175
···
187
202
->appendChild($layout4);
188
203
189
204
$wrap5 = id(new PHUIObjectBoxView())
190
-
->setHeaderText(pht('Authentication'))
205
+
->setHeaderText(pht('Squares'))
191
206
->appendChild($layout5);
207
+
208
+
$wrap6 = id(new PHUIObjectBoxView())
209
+
->setHeaderText(pht('Authentication'))
210
+
->appendChild($layout6);
192
211
193
212
return phutil_tag(
194
213
'div',
···
202
221
$wrap3,
203
222
$wrap4,
204
223
$wrap5,
224
+
$wrap6,
205
225
));
206
226
}
207
227
}
+10
src/view/phui/PHUIIconView.php
+10
src/view/phui/PHUIIconView.php
···
17
17
private $spriteSheet;
18
18
private $iconFont;
19
19
private $iconColor;
20
+
private $iconBackground;
20
21
21
22
public function setHref($href) {
22
23
$this->href = $href;
···
54
55
return $this;
55
56
}
56
57
58
+
public function setBackground($color) {
59
+
$this->iconBackground = $color;
60
+
return $this;
61
+
}
62
+
57
63
protected function getTagName() {
58
64
$tag = 'span';
59
65
if ($this->href) {
···
78
84
$classes[] = $this->iconFont;
79
85
if ($this->iconColor) {
80
86
$classes[] = $this->iconColor;
87
+
}
88
+
if ($this->iconBackground) {
89
+
$classes[] = 'phui-icon-square';
90
+
$classes[] = $this->iconBackground;
81
91
}
82
92
} else {
83
93
if ($this->headSize) {
+39
webroot/rsrc/css/font/phui-font-icon-base.css
+39
webroot/rsrc/css/font/phui-font-icon-base.css
···
151
151
color: rgba({$alphagrey},0.3);
152
152
}
153
153
154
+
/* Backgrounds */
155
+
156
+
.phui-icon-view.bg-dark {
157
+
background-color: {$darkgreytext};
158
+
}
159
+
.phui-icon-view.bg-bluegrey {
160
+
background-color: {$bluetext};
161
+
}
162
+
.phui-icon-view.bg-red {
163
+
background-color: {$red};
164
+
}
165
+
.phui-icon-view.bg-orange {
166
+
background-color: {$orange};
167
+
}
168
+
.phui-icon-view.bg-yellow {
169
+
background-color: {$yellow};
170
+
}
171
+
.phui-icon-view.bg-green {
172
+
background-color: {$green}
173
+
}
174
+
.phui-icon-view.bg-blue {
175
+
background-color: {$blue};
176
+
}
177
+
.phui-icon-view.bg-sky {
178
+
background-color: {$sky};
179
+
}
180
+
.phui-icon-view.bg-indigo {
181
+
background-color: {$indigo};
182
+
}
183
+
.phui-icon-view.bg-pink {
184
+
background-color: {$pink};
185
+
}
186
+
.phui-icon-view.bg-fire {
187
+
background-color: {$fire};
188
+
}
189
+
.phui-icon-view.bg-violet {
190
+
background-color: {$violet};
191
+
}
192
+
154
193
/* Hovers */
155
194
156
195
.device-desktop a.phui-icon-view.lightgreytext:hover,
+17
webroot/rsrc/css/phui/phui-icon.css
+17
webroot/rsrc/css/phui/phui-icon.css
···
80
80
a.phui-icon-circle:hover .phui-icon-view {
81
81
color: {$sky};
82
82
}
83
+
84
+
/* - Icon in a Square ------------------------------------------------------- */
85
+
86
+
.phui-icon-view.phui-icon-square {
87
+
height: 40px;
88
+
width: 40px;
89
+
color: #fff;
90
+
font-size: 26px;
91
+
text-align: center;
92
+
line-height: 38px;
93
+
border-radius: 3px;
94
+
}
95
+
96
+
a.phui-icon-view.phui-icon-square:hover {
97
+
text-decoration: none;
98
+
color: #fff;
99
+
}
+9
-25
webroot/rsrc/css/phui/phui-object-item-list-view.css
+9
-25
webroot/rsrc/css/phui/phui-object-item-list-view.css
···
651
651
652
652
.phui-object-item-image-icon {
653
653
background: none;
654
-
width: 30px;
655
-
height: 30px;
656
-
margin: 4px 0;
654
+
width: 40px;
655
+
height: 40px;
656
+
margin: 8px 6px;
657
657
position: absolute;
658
658
}
659
659
660
660
.phui-object-item-image-icon .phui-icon-view {
661
661
position: absolute;
662
-
width: 24px;
663
-
height: 24px;
664
-
left: 6px;
665
-
top: 10px;
666
-
font-size: 24px;
662
+
width: 40px;
663
+
height: 40px;
664
+
font-size: 26px;
667
665
text-align: center;
668
-
vertical-align: bottom;
669
-
}
670
-
671
-
.phui-object-item-with-image-icon .phui-object-item-frame {
672
-
min-height: 48px;
673
-
}
674
-
675
-
.phui-object-item-with-image-icon .phui-object-item-content-box {
676
-
margin-left: 36px;
677
-
}
678
-
679
-
.device-desktop .phui-object-item-launcher-list .phui-object-item-content {
680
-
margin-right: 0;
681
-
}
682
-
683
-
.device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
684
-
width: auto;
666
+
line-height: 36px;
685
667
}
686
668
687
669
.phui-object-item-image {
···
693
675
position: absolute;
694
676
}
695
677
678
+
.phui-object-item-with-image-icon .phui-object-item-frame,
696
679
.phui-object-item-with-image .phui-object-item-frame {
697
680
min-height: 52px;
698
681
}
699
682
683
+
.phui-object-item-with-image-icon .phui-object-item-content-box,
700
684
.phui-object-item-with-image .phui-object-item-content-box {
701
685
margin-left: 46px;
702
686
}