@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
Replace PNG flag images with SVG versions
Summary:
SVG files look less blurry on high-resolution screens.
These trivial SVG files are self-created.
Closes T16207
Test Plan:
* Go to http://phorge.localhost/T1, click "Flag For Later"
* Go to http://phorge.localhost/flag/ and also click on Edit Query, see new icons also in the search form
* Go to http://phorge.localhost/maniphest/query/advanced/ and search for T1, look at the flag shown on the right of the result
* On all those pages, zoom as much as your browser can zoom
* Go to http://phorge.localhost/settings/panel/display/ and repeat the same steps in Dark Mode
Reviewers: O1 Blessed Committers, valerio.bozzolan
Reviewed By: O1 Blessed Committers, valerio.bozzolan
Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T16207
Differential Revision: https://we.phorge.it/D26243
+180
-34
+14
-14
resources/celerity/map.php
+14
-14
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'beb13d57',
11
11
'conpherence.pkg.js' => '020aebcf',
12
-
'core.pkg.css' => 'fac845f9',
12
+
'core.pkg.css' => 'f7f31d57',
13
13
'core.pkg.js' => 'dad1a225',
14
14
'dark-console.pkg.js' => '187792c2',
15
15
'differential.pkg.css' => 'abdb4fe9',
···
71
71
'rsrc/css/application/diffusion/diffusion-repository.css' => 'd9f8ff47',
72
72
'rsrc/css/application/diffusion/diffusion.css' => 'e46232d6',
73
73
'rsrc/css/application/files/global-drag-and-drop.css' => '1d2713a4',
74
-
'rsrc/css/application/flag/flag.css' => '2b77be8d',
74
+
'rsrc/css/application/flag/flag.css' => '64dacab2',
75
75
'rsrc/css/application/harbormaster/harbormaster.css' => '9346e08b',
76
76
'rsrc/css/application/herald/herald-test.css' => '7e7bbdae',
77
77
'rsrc/css/application/herald/herald.css' => '648d39e2',
···
154
154
'rsrc/css/phui/phui-header-view.css' => '7bc4efa0',
155
155
'rsrc/css/phui/phui-hovercard.css' => '7ffb4e0c',
156
156
'rsrc/css/phui/phui-icon-set-selector.css' => '19e0253b',
157
-
'rsrc/css/phui/phui-icon.css' => '084ac612',
157
+
'rsrc/css/phui/phui-icon.css' => 'e790b94e',
158
158
'rsrc/css/phui/phui-image-mask.css' => '724396b6',
159
159
'rsrc/css/phui/phui-info-view.css' => 'a10a909b',
160
160
'rsrc/css/phui/phui-invisible-character-view.css' => 'c694c4a4',
···
278
278
'rsrc/image/darkload.gif' => '5bd41a89',
279
279
'rsrc/image/examples/hero.png' => '5d8c4b21',
280
280
'rsrc/image/grip.svg' => 'cfd4bee8',
281
-
'rsrc/image/icon/fatcow/flag_blue.png' => '54db2e5c',
282
-
'rsrc/image/icon/fatcow/flag_finish.png' => '2953a51b',
283
-
'rsrc/image/icon/fatcow/flag_ghost.png' => '7d9ada92',
284
-
'rsrc/image/icon/fatcow/flag_green.png' => '010f7161',
285
-
'rsrc/image/icon/fatcow/flag_orange.png' => '6c384ca5',
286
-
'rsrc/image/icon/fatcow/flag_pink.png' => '11ac6b12',
287
-
'rsrc/image/icon/fatcow/flag_purple.png' => 'c4f423a4',
288
-
'rsrc/image/icon/fatcow/flag_red.png' => '9e6d8817',
289
-
'rsrc/image/icon/fatcow/flag_yellow.png' => '906733f4',
281
+
'rsrc/image/icon/flags/flag_blue.svg' => 'dd845d38',
282
+
'rsrc/image/icon/flags/flag_finish.svg' => 'dd3cff6d',
283
+
'rsrc/image/icon/flags/flag_ghost.svg' => '75e31633',
284
+
'rsrc/image/icon/flags/flag_green.svg' => '2ddd26a5',
285
+
'rsrc/image/icon/flags/flag_orange.svg' => '1ae47d4c',
286
+
'rsrc/image/icon/flags/flag_pink.svg' => '1dd74ea6',
287
+
'rsrc/image/icon/flags/flag_purple.svg' => '1670b58a',
288
+
'rsrc/image/icon/flags/flag_red.svg' => '521b43f9',
289
+
'rsrc/image/icon/flags/flag_yellow.svg' => '792d4e41',
290
290
'rsrc/image/logo/project-logo.png' => '019d256f',
291
291
'rsrc/image/people/harding.png' => '95b2db63',
292
292
'rsrc/image/people/jefferson.png' => 'e883a3a2',
···
736
736
'phabricator-fatal-config-template-css' => '20babf50',
737
737
'phabricator-favicon' => '7930776a',
738
738
'phabricator-file-upload' => '331676ea',
739
-
'phabricator-flag-css' => '2b77be8d',
739
+
'phabricator-flag-css' => '64dacab2',
740
740
'phabricator-keyboard-shortcut' => '1a844c06',
741
741
'phabricator-keyboard-shortcut-manager' => '81debc48',
742
742
'phabricator-main-menu-view' => 'e826f44f',
···
802
802
'phui-hovercard-list' => 'de4b4919',
803
803
'phui-hovercard-view-css' => '7ffb4e0c',
804
804
'phui-icon-set-selector-css' => '19e0253b',
805
-
'phui-icon-view-css' => '084ac612',
805
+
'phui-icon-view-css' => 'e790b94e',
806
806
'phui-image-mask-css' => '724396b6',
807
807
'phui-info-view-css' => 'a10a909b',
808
808
'phui-inline-comment-view-css' => '066c3341',
+2
-1
src/applications/flag/view/PhabricatorFlagSelectControl.php
+2
-1
src/applications/flag/view/PhabricatorFlagSelectControl.php
···
28
28
foreach ($colors as $const => $name) {
29
29
// TODO: This should probably be a sprite sheet.
30
30
$partial = $file_map[$const];
31
-
$uri = '/rsrc/image/icon/fatcow/flag_'.$partial.'.png';
31
+
$uri = '/rsrc/image/icon/flags/flag_'.$partial.'.svg';
32
32
$uri = celerity_get_resource_uri($uri);
33
33
34
34
$icon = id(new PHUIIconView())
35
+
->setHeadSize(PHUIIconView::HEAD_FLAG)
35
36
->setImage($uri);
36
37
37
38
$input = phutil_tag(
+7
src/view/phui/PHUIIconView.php
+7
src/view/phui/PHUIIconView.php
···
7
7
8
8
const HEAD_SMALL = 'phuihead-small';
9
9
const HEAD_MEDIUM = 'phuihead-medium';
10
+
const HEAD_FLAG = 'phuihead-flag';
10
11
11
12
private $href = null;
12
13
private $image;
···
26
27
return $this;
27
28
}
28
29
30
+
/**
31
+
* @param string $image URI of the icon file
32
+
*/
29
33
public function setImage($image) {
30
34
$this->image = $image;
31
35
return $this;
···
36
40
return $this;
37
41
}
38
42
43
+
/**
44
+
* @param string $size One of the `PHUIIconView::HEAD_*` variables
45
+
*/
39
46
public function setHeadSize($size) {
40
47
$this->headSize = $size;
41
48
return $this;
+18
-9
webroot/rsrc/css/application/flag/flag.css
+18
-9
webroot/rsrc/css/application/flag/flag.css
···
21
21
}
22
22
23
23
.phabricator-flag-color-0 {
24
-
background-image: url(/rsrc/image/icon/fatcow/flag_red.png);
24
+
background-image: url(/rsrc/image/icon/flags/flag_red.svg);
25
+
background-size: 16px;
25
26
}
26
27
27
28
.phabricator-flag-color-1 {
28
-
background-image: url(/rsrc/image/icon/fatcow/flag_orange.png);
29
+
background-image: url(/rsrc/image/icon/flags/flag_orange.svg);
30
+
background-size: 16px;
29
31
}
30
32
31
33
.phabricator-flag-color-2 {
32
-
background-image: url(/rsrc/image/icon/fatcow/flag_yellow.png);
34
+
background-image: url(/rsrc/image/icon/flags/flag_yellow.svg);
35
+
background-size: 16px;
33
36
}
34
37
35
38
.phabricator-flag-color-3 {
36
-
background-image: url(/rsrc/image/icon/fatcow/flag_green.png);
39
+
background-image: url(/rsrc/image/icon/flags/flag_green.svg);
40
+
background-size: 16px;
37
41
}
38
42
39
43
.phabricator-flag-color-4 {
40
-
background-image: url(/rsrc/image/icon/fatcow/flag_blue.png);
44
+
background-image: url(/rsrc/image/icon/flags/flag_blue.svg);
45
+
background-size: 16px;
41
46
}
42
47
43
48
.phabricator-flag-color-5 {
44
-
background-image: url(/rsrc/image/icon/fatcow/flag_pink.png);
49
+
background-image: url(/rsrc/image/icon/flags/flag_pink.svg);
50
+
background-size: 16px;
45
51
}
46
52
47
53
.phabricator-flag-color-6 {
48
-
background-image: url(/rsrc/image/icon/fatcow/flag_purple.png);
54
+
background-image: url(/rsrc/image/icon/flags/flag_purple.svg);
55
+
background-size: 16px;
49
56
}
50
57
51
58
.phabricator-flag-color-7 {
52
-
background-image: url(/rsrc/image/icon/fatcow/flag_finish.png);
59
+
background-image: url(/rsrc/image/icon/flags/flag_finish.svg);
60
+
background-size: 16px;
53
61
}
54
62
55
63
.phabricator-flag-ghost {
56
-
background-image: url(/rsrc/image/icon/fatcow/flag_ghost.png);
64
+
background-image: url(/rsrc/image/icon/flags/flag_ghost.svg);
65
+
background-size: 16px;
57
66
}
58
67
59
68
.phabricator-flag-select-control .phabricator-flag-select-label {
+4
webroot/rsrc/css/phui/phui-icon.css
+4
webroot/rsrc/css/phui/phui-icon.css
-10
webroot/rsrc/image/icon/fatcow/README
-10
webroot/rsrc/image/icon/fatcow/README
···
1
-
These icons come from the FatCow icon set originally hosted at
2
-
http://www.fatcow.com/free-icons, now available from:
3
-
4
-
https://commons.wikimedia.org/wiki/Farm-Fresh_web_icons
5
-
https://github.com/gammasoft/fatcow
6
-
7
-
They are available under the Creative Commons Attribution 3.0 License:
8
-
9
-
http://creativecommons.org/licenses/by/3.0/us/
10
-
webroot/rsrc/image/icon/fatcow/flag_blue.png
webroot/rsrc/image/icon/fatcow/flag_blue.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_finish.png
webroot/rsrc/image/icon/fatcow/flag_finish.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_ghost.png
webroot/rsrc/image/icon/fatcow/flag_ghost.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_green.png
webroot/rsrc/image/icon/fatcow/flag_green.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_orange.png
webroot/rsrc/image/icon/fatcow/flag_orange.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_pink.png
webroot/rsrc/image/icon/fatcow/flag_pink.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_purple.png
webroot/rsrc/image/icon/fatcow/flag_purple.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_red.png
webroot/rsrc/image/icon/fatcow/flag_red.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/fatcow/flag_yellow.png
webroot/rsrc/image/icon/fatcow/flag_yellow.png
This is a binary file and will not be displayed.
+14
webroot/rsrc/image/icon/flags/flag_blue.svg
+14
webroot/rsrc/image/icon/flags/flag_blue.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#3498db" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+23
webroot/rsrc/image/icon/flags/flag_finish.svg
+23
webroot/rsrc/image/icon/flags/flag_finish.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<defs>
5
+
<pattern id="checkeredPattern" width="80" height="80"
6
+
patternUnits="userSpaceOnUse">
7
+
<rect width="40" height="40" fill="white" />
8
+
<rect x="40" y="40" width="40" height="40" fill="white" />
9
+
<rect x="40" width="40" height="40" fill="black" />
10
+
<rect y="40" width="40" height="40" fill="black" />
11
+
</pattern>
12
+
</defs>
13
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
14
+
<path id="flag" fill="url(#checkeredPattern)"
15
+
stroke="black" stroke-width="5" d="
16
+
M 30,20
17
+
Q 60,10 100,30
18
+
T 185,25
19
+
L 185,140
20
+
Q 140,160 100,140
21
+
T 30,140 Z
22
+
" />
23
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_ghost.svg
+14
webroot/rsrc/image/icon/flags/flag_ghost.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#c3c3c3" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_green.svg
+14
webroot/rsrc/image/icon/flags/flag_green.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#139543" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_orange.svg
+14
webroot/rsrc/image/icon/flags/flag_orange.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#e67e22" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_pink.svg
+14
webroot/rsrc/image/icon/flags/flag_pink.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#de6c9a" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_purple.svg
+14
webroot/rsrc/image/icon/flags/flag_purple.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#8e44ad" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_red.svg
+14
webroot/rsrc/image/icon/flags/flag_red.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#c0392b" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
+14
webroot/rsrc/image/icon/flags/flag_yellow.svg
+14
webroot/rsrc/image/icon/flags/flag_yellow.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg width="200" height="200" viewBox="0 0 200 200"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<rect x="10" y="10" width="20" height="180" fill="#8e663e"/>
5
+
<path id="flag" fill="#f1c40f" d="
6
+
M 30,20
7
+
Q 60,10 100,30
8
+
T 185,25
9
+
L 185,140
10
+
Q 140,160 100,140
11
+
T 30,140 Z
12
+
">
13
+
</path>
14
+
</svg>
