@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
PHUIIconView
Summary: Adds a base class for displaying images and icons.
Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5736
+341
-170
+10
-10
resources/sprite/manifest/actions.json
+10
-10
resources/sprite/manifest/actions.json
···
3
3
"sprites" : {
4
4
"actions-close-dark" : {
5
5
"name" : "actions-close-dark",
6
-
"rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover",
6
+
"rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover",
7
7
"hash" : "f04c5692010a6d96b6fa83a26d73737e"
8
8
},
9
9
"actions-close-grey" : {
···
18
18
},
19
19
"actions-flag-dark" : {
20
20
"name" : "actions-flag-dark",
21
-
"rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover",
21
+
"rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover",
22
22
"hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
23
23
},
24
24
"actions-flag-grey" : {
···
33
33
},
34
34
"actions-heart-dark" : {
35
35
"name" : "actions-heart-dark",
36
-
"rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover",
36
+
"rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover",
37
37
"hash" : "90b437a281724a4961e33272eafd616b"
38
38
},
39
39
"actions-heart-grey" : {
···
48
48
},
49
49
"actions-move-dark" : {
50
50
"name" : "actions-move-dark",
51
-
"rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover",
51
+
"rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover",
52
52
"hash" : "38f5b9168bf04d1a904b09805e589cd7"
53
53
},
54
54
"actions-move-grey" : {
···
63
63
},
64
64
"actions-new-dark" : {
65
65
"name" : "actions-new-dark",
66
-
"rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover",
66
+
"rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover",
67
67
"hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
68
68
},
69
69
"actions-new-grey" : {
···
78
78
},
79
79
"actions-search-dark" : {
80
80
"name" : "actions-search-dark",
81
-
"rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover",
81
+
"rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover",
82
82
"hash" : "6ff124bc9423bf98be5a53e22508cd26"
83
83
},
84
84
"actions-search-grey" : {
···
93
93
},
94
94
"actions-settings-dark" : {
95
95
"name" : "actions-settings-dark",
96
-
"rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover",
96
+
"rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover",
97
97
"hash" : "5ecb08643250a052e5d090ef4660faf5"
98
98
},
99
99
"actions-settings-grey" : {
···
108
108
},
109
109
"actions-star-dark" : {
110
110
"name" : "actions-star-dark",
111
-
"rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover",
111
+
"rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover",
112
112
"hash" : "45567d03f8e34811eca0621e93b5e050"
113
113
},
114
114
"actions-star-grey" : {
···
123
123
},
124
124
"actions-tag-dark" : {
125
125
"name" : "actions-tag-dark",
126
-
"rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover",
126
+
"rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover",
127
127
"hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
128
128
},
129
129
"actions-tag-grey" : {
···
138
138
},
139
139
"actions-wrench-dark" : {
140
140
"name" : "actions-wrench-dark",
141
-
"rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover",
141
+
"rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover",
142
142
"hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
143
143
},
144
144
"actions-wrench-grey" : {
+48
-48
resources/sprite/manifest/tokens.json
+48
-48
resources/sprite/manifest/tokens.json
···
1
1
{
2
2
"version" : 1,
3
3
"sprites" : {
4
-
"token-coin-1" : {
5
-
"name" : "token-coin-1",
6
-
"rule" : ".token-coin-1",
4
+
"tokens-coin-1" : {
5
+
"name" : "tokens-coin-1",
6
+
"rule" : ".tokens-coin-1",
7
7
"hash" : "5e1fa22d5ef7f2d8ea14839c303315bb"
8
8
},
9
-
"token-coin-2" : {
10
-
"name" : "token-coin-2",
11
-
"rule" : ".token-coin-2",
9
+
"tokens-coin-2" : {
10
+
"name" : "tokens-coin-2",
11
+
"rule" : ".tokens-coin-2",
12
12
"hash" : "6a6ef9f8730e5919fa16669258ecb74d"
13
13
},
14
-
"token-coin-3" : {
15
-
"name" : "token-coin-3",
16
-
"rule" : ".token-coin-3",
14
+
"tokens-coin-3" : {
15
+
"name" : "tokens-coin-3",
16
+
"rule" : ".tokens-coin-3",
17
17
"hash" : "97256d9133c6aaf965925218d846cc32"
18
18
},
19
-
"token-coin-4" : {
20
-
"name" : "token-coin-4",
21
-
"rule" : ".token-coin-4",
19
+
"tokens-coin-4" : {
20
+
"name" : "tokens-coin-4",
21
+
"rule" : ".tokens-coin-4",
22
22
"hash" : "51cb98e751ad6f7f6d30d0acbe3bfc7c"
23
23
},
24
-
"token-heart-1" : {
25
-
"name" : "token-heart-1",
26
-
"rule" : ".token-heart-1",
24
+
"tokens-heart-1" : {
25
+
"name" : "tokens-heart-1",
26
+
"rule" : ".tokens-heart-1",
27
27
"hash" : "eacfe71d6ede3f994223a02e875135b2"
28
28
},
29
-
"token-heart-2" : {
30
-
"name" : "token-heart-2",
31
-
"rule" : ".token-heart-2",
29
+
"tokens-heart-2" : {
30
+
"name" : "tokens-heart-2",
31
+
"rule" : ".tokens-heart-2",
32
32
"hash" : "4745a935630e1b049e63c93e88667867"
33
33
},
34
-
"token-like-1" : {
35
-
"name" : "token-like-1",
36
-
"rule" : ".token-like-1",
34
+
"tokens-like-1" : {
35
+
"name" : "tokens-like-1",
36
+
"rule" : ".tokens-like-1",
37
37
"hash" : "6e38278e6653c03135157d2865907722"
38
38
},
39
-
"token-like-2" : {
40
-
"name" : "token-like-2",
41
-
"rule" : ".token-like-2",
39
+
"tokens-like-2" : {
40
+
"name" : "tokens-like-2",
41
+
"rule" : ".tokens-like-2",
42
42
"hash" : "fb47711ebbc21515cfd6fab3a19d8c7a"
43
43
},
44
-
"token-medal-1" : {
45
-
"name" : "token-medal-1",
46
-
"rule" : ".token-medal-1",
44
+
"tokens-medal-1" : {
45
+
"name" : "tokens-medal-1",
46
+
"rule" : ".tokens-medal-1",
47
47
"hash" : "979c6f8b7dad182e912a0d67b44595c2"
48
48
},
49
-
"token-medal-2" : {
50
-
"name" : "token-medal-2",
51
-
"rule" : ".token-medal-2",
49
+
"tokens-medal-2" : {
50
+
"name" : "tokens-medal-2",
51
+
"rule" : ".tokens-medal-2",
52
52
"hash" : "2263fc36370d88bceb620128902a51ae"
53
53
},
54
-
"token-medal-3" : {
55
-
"name" : "token-medal-3",
56
-
"rule" : ".token-medal-3",
54
+
"tokens-medal-3" : {
55
+
"name" : "tokens-medal-3",
56
+
"rule" : ".tokens-medal-3",
57
57
"hash" : "95a83057cbd9ebb7ca2f1f082c72ddac"
58
58
},
59
-
"token-medal-4" : {
60
-
"name" : "token-medal-4",
61
-
"rule" : ".token-medal-4",
59
+
"tokens-medal-4" : {
60
+
"name" : "tokens-medal-4",
61
+
"rule" : ".tokens-medal-4",
62
62
"hash" : "c8c94dd2f0e8a2a8711f1f21be61ea3b"
63
63
},
64
-
"token-misc-1" : {
65
-
"name" : "token-misc-1",
66
-
"rule" : ".token-misc-1",
64
+
"tokens-misc-1" : {
65
+
"name" : "tokens-misc-1",
66
+
"rule" : ".tokens-misc-1",
67
67
"hash" : "d16df367d29e0aedabcfb11c672ebd8c"
68
68
},
69
-
"token-misc-2" : {
70
-
"name" : "token-misc-2",
71
-
"rule" : ".token-misc-2",
69
+
"tokens-misc-2" : {
70
+
"name" : "tokens-misc-2",
71
+
"rule" : ".tokens-misc-2",
72
72
"hash" : "74d971c084b2f7665a84c61c0846446c"
73
73
},
74
-
"token-misc-3" : {
75
-
"name" : "token-misc-3",
76
-
"rule" : ".token-misc-3",
74
+
"tokens-misc-3" : {
75
+
"name" : "tokens-misc-3",
76
+
"rule" : ".tokens-misc-3",
77
77
"hash" : "c91387778404c8e88f243477d056d985"
78
78
},
79
-
"token-misc-4" : {
80
-
"name" : "token-misc-4",
81
-
"rule" : ".token-misc-4",
79
+
"tokens-misc-4" : {
80
+
"name" : "tokens-misc-4",
81
+
"rule" : ".tokens-misc-4",
82
82
"hash" : "4705e7c79906180c04286a62d375f33b"
83
83
}
84
84
},
+14
-14
src/__celerity_resource_map__.php
+14
-14
src/__celerity_resource_map__.php
···
2839
2839
),
2840
2840
'disk' => '/rsrc/css/layout/phabricator-action-header-view.css',
2841
2841
),
2842
-
'phabricator-action-icon-view-css' =>
2843
-
array(
2844
-
'uri' => '/res/dbceab3e/rsrc/css/layout/phabricator-action-icon-view.css',
2845
-
'type' => 'css',
2846
-
'requires' =>
2847
-
array(
2848
-
),
2849
-
'disk' => '/rsrc/css/layout/phabricator-action-icon-view.css',
2850
-
),
2851
2842
'phabricator-action-list-view-css' =>
2852
2843
array(
2853
2844
'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css',
···
3525
3516
),
3526
3517
'phabricator-workboard-view-css' =>
3527
3518
array(
3528
-
'uri' => '/res/14217087/rsrc/css/layout/phabricator-workboard-view.css',
3519
+
'uri' => '/res/e48df9e8/rsrc/css/layout/phabricator-workboard-view.css',
3529
3520
'type' => 'css',
3530
3521
'requires' =>
3531
3522
array(
···
3606
3597
),
3607
3598
'phui-feed-story-css' =>
3608
3599
array(
3609
-
'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css',
3600
+
'uri' => '/res/a2db2369/rsrc/css/phui/phui-feed-story.css',
3610
3601
'type' => 'css',
3611
3602
'requires' =>
3612
3603
array(
3613
3604
),
3614
3605
'disk' => '/rsrc/css/phui/phui-feed-story.css',
3615
3606
),
3607
+
'phui-icon-view-css' =>
3608
+
array(
3609
+
'uri' => '/res/4d0588b4/rsrc/css/phui/phui-icon.css',
3610
+
'type' => 'css',
3611
+
'requires' =>
3612
+
array(
3613
+
),
3614
+
'disk' => '/rsrc/css/phui/phui-icon.css',
3615
+
),
3616
3616
'ponder-comment-table-css' =>
3617
3617
array(
3618
3618
'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css',
···
3786
3786
),
3787
3787
'sprite-actions-css' =>
3788
3788
array(
3789
-
'uri' => '/res/00b8f8bc/rsrc/css/sprite-actions.css',
3789
+
'uri' => '/res/89d67d5a/rsrc/css/sprite-actions.css',
3790
3790
'type' => 'css',
3791
3791
'requires' =>
3792
3792
array(
···
3876
3876
),
3877
3877
'sprite-tokens-css' =>
3878
3878
array(
3879
-
'uri' => '/res/9ae0de5b/rsrc/css/sprite-tokens.css',
3879
+
'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css',
3880
3880
'type' => 'css',
3881
3881
'requires' =>
3882
3882
array(
···
3912
3912
),
3913
3913
'tokens-css' =>
3914
3914
array(
3915
-
'uri' => '/res/6b3c65c7/rsrc/css/application/tokens/tokens.css',
3915
+
'uri' => '/res/1699df7d/rsrc/css/application/tokens/tokens.css',
3916
3916
'type' => 'css',
3917
3917
'requires' =>
3918
3918
array(
+4
-2
src/__phutil_library_map__.php
+4
-2
src/__phutil_library_map__.php
···
667
667
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
668
668
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
669
669
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
670
+
'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
671
+
'PHUIIconView' => 'view/phui/PHUIIconView.php',
670
672
'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
671
673
'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
672
674
'PackageMail' => 'applications/owners/mail/PackageMail.php',
···
678
680
'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php',
679
681
'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php',
680
682
'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php',
681
-
'PhabricatorActionIconView' => 'view/layout/PhabricatorActionIconView.php',
682
683
'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php',
683
684
'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
684
685
'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
···
2372
2373
'PHUIBoxExample' => 'PhabricatorUIExample',
2373
2374
'PHUIBoxView' => 'AphrontTagView',
2374
2375
'PHUIFeedStoryView' => 'AphrontView',
2376
+
'PHUIIconExample' => 'PhabricatorUIExample',
2377
+
'PHUIIconView' => 'AphrontView',
2375
2378
'PackageCreateMail' => 'PackageMail',
2376
2379
'PackageDeleteMail' => 'PackageMail',
2377
2380
'PackageMail' => 'PhabricatorMail',
···
2382
2385
'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions',
2383
2386
'PhabricatorActionHeaderExample' => 'PhabricatorUIExample',
2384
2387
'PhabricatorActionHeaderView' => 'AphrontView',
2385
-
'PhabricatorActionIconView' => 'AphrontView',
2386
2388
'PhabricatorActionListExample' => 'PhabricatorUIExample',
2387
2389
'PhabricatorActionListView' => 'AphrontView',
2388
2390
'PhabricatorActionView' => 'AphrontView',
+4
-6
src/applications/tokens/storage/PhabricatorToken.php
+4
-6
src/applications/tokens/storage/PhabricatorToken.php
···
35
35
36
36
$sprite = substr($this->getPHID(), 10);
37
37
38
-
return phutil_tag(
39
-
'div',
40
-
array(
41
-
'class' => 'sprite-tokens token-icon token-'.$sprite,
42
-
),
43
-
'');
38
+
return id(new PHUIIconView())
39
+
->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
40
+
->setSpriteIcon($sprite);
41
+
44
42
}
45
43
46
44
}
+144
src/applications/uiexample/examples/PHUIIconExample.php
+144
src/applications/uiexample/examples/PHUIIconExample.php
···
1
+
<?php
2
+
3
+
final class PHUIIconExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return 'Icons and Images';
7
+
}
8
+
9
+
public function getDescription() {
10
+
return 'Easily render icons or images with links and sprites.';
11
+
}
12
+
13
+
public function renderExample() {
14
+
15
+
$person1 = new PHUIIconView();
16
+
$person1->setHeadSize(PHUIIconView::HEAD_MEDIUM);
17
+
$person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
18
+
$person1->setImage(
19
+
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
20
+
21
+
$person2 = new PHUIIconView();
22
+
$person2->setHeadSize(PHUIIconView::HEAD_MEDIUM);
23
+
$person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
24
+
$person2->setImage(
25
+
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
26
+
27
+
$person3 = new PHUIIconView();
28
+
$person3->setHeadSize(PHUIIconView::HEAD_MEDIUM);
29
+
$person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
30
+
$person3->setImage(
31
+
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
32
+
33
+
$person4 = new PHUIIconView();
34
+
$person4->setHeadSize(PHUIIconView::HEAD_SMALL);
35
+
$person4->setHref('http://en.wikipedia.org/wiki/George_Washington');
36
+
$person4->setImage(
37
+
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
38
+
39
+
$person5 = new PHUIIconView();
40
+
$person5->setHeadSize(PHUIIconView::HEAD_SMALL);
41
+
$person5->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
42
+
$person5->setImage(
43
+
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
44
+
45
+
$person6 = new PHUIIconView();
46
+
$person6->setHeadSize(PHUIIconView::HEAD_SMALL);
47
+
$person6->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
48
+
$person6->setImage(
49
+
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
50
+
51
+
$actions = array(
52
+
'settings-grey',
53
+
'heart-grey',
54
+
'tag-grey',
55
+
'new-grey',
56
+
'search-grey',
57
+
'move-grey');
58
+
$actionview = array();
59
+
foreach ($actions as $action) {
60
+
$actionview[] = id(new PHUIIconView())
61
+
->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
62
+
->setSpriteIcon($action)
63
+
->setHref('#');
64
+
}
65
+
66
+
$tokens = array(
67
+
'like-1',
68
+
'like-2',
69
+
'heart-1',
70
+
'heart-2');
71
+
$tokenview = array();
72
+
foreach ($tokens as $token) {
73
+
$tokenview[] =
74
+
id(new PHUIIconView())
75
+
->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
76
+
->setSpriteIcon($token);
77
+
}
78
+
79
+
$layout1 =
80
+
array(
81
+
id(new PHUIBoxView())
82
+
->appendChild($actionview)
83
+
->addMargin(PHUI::MARGIN_MEDIUM)
84
+
->addPadding(PHUI::PADDING_SMALL)
85
+
->setShadow(true));
86
+
87
+
$layout2 =
88
+
array(
89
+
id(new PHUIBoxView())
90
+
->appendChild(array($person1, $person2, $person3))
91
+
->addMargin(PHUI::MARGIN_MEDIUM)
92
+
->addPadding(PHUI::PADDING_SMALL)
93
+
->setShadow(true));
94
+
95
+
$layout2a =
96
+
array(
97
+
id(new PHUIBoxView())
98
+
->appendChild(array($person4, $person5, $person6))
99
+
->addMargin(PHUI::MARGIN_MEDIUM)
100
+
->addPadding(PHUI::PADDING_SMALL)
101
+
->setShadow(true));
102
+
103
+
$layout3 =
104
+
array(
105
+
id(new PHUIBoxView())
106
+
->appendChild($tokenview)
107
+
->addMargin(PHUI::MARGIN_MEDIUM)
108
+
->addPadding(PHUI::PADDING_SMALL)
109
+
->setShadow(true));
110
+
111
+
$head1 = id(new PhabricatorHeaderView())
112
+
->setHeader(pht('Action Icons!'));
113
+
114
+
$head2 = id(new PhabricatorHeaderView())
115
+
->setHeader(pht('People!'));
116
+
117
+
$head3 = id(new PhabricatorHeaderView())
118
+
->setHeader(pht('Tokens'));
119
+
120
+
$wrap1 = id(new PHUIBoxView())
121
+
->appendChild($layout1)
122
+
->addMargin(PHUI::MARGIN_LARGE);
123
+
124
+
$wrap2 = id(new PHUIBoxView())
125
+
->appendChild(array($layout2, $layout2a))
126
+
->addMargin(PHUI::MARGIN_LARGE);
127
+
128
+
$wrap3 = id(new PHUIBoxView())
129
+
->appendChild($layout3)
130
+
->addMargin(PHUI::MARGIN_LARGE);
131
+
132
+
return phutil_tag(
133
+
'div',
134
+
array(),
135
+
array(
136
+
$head1,
137
+
$wrap1,
138
+
$head2,
139
+
$wrap2,
140
+
$head3,
141
+
$wrap3
142
+
));
143
+
}
144
+
}
+14
-14
src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
+14
-14
src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
···
105
105
$title3 = id(new PhabricatorHeaderView())
106
106
->setHeader(pht('With Action Icons'));
107
107
108
-
$action1 = new PhabricatorActionIconView();
109
-
$action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
108
+
$action1 = new PHUIIconView();
109
+
$action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
110
110
$action1->setSpriteIcon('settings-grey');
111
111
$action1->setHref('#');
112
112
113
-
$action2 = new PhabricatorActionIconView();
114
-
$action2->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
113
+
$action2 = new PHUIIconView();
114
+
$action2->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
115
115
$action2->setSpriteIcon('heart-white');
116
116
$action2->setHref('#');
117
117
118
-
$action3 = new PhabricatorActionIconView();
119
-
$action3->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
118
+
$action3 = new PHUIIconView();
119
+
$action3->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
120
120
$action3->setSpriteIcon('tag-white');
121
121
$action3->setHref('#');
122
122
123
-
$action4 = new PhabricatorActionIconView();
124
-
$action4->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
123
+
$action4 = new PHUIIconView();
124
+
$action4->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
125
125
$action4->setSpriteIcon('new-white');
126
126
$action4->setHref('#');
127
127
128
-
$action5 = new PhabricatorActionIconView();
129
-
$action5->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
128
+
$action5 = new PHUIIconView();
129
+
$action5->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
130
130
$action5->setSpriteIcon('search-white');
131
131
$action5->setHref('#');
132
132
133
-
$action6 = new PhabricatorActionIconView();
134
-
$action6->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
133
+
$action6 = new PHUIIconView();
134
+
$action6->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
135
135
$action6->setSpriteIcon('move-white');
136
136
$action6->setHref('#');
137
137
···
199
199
->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
200
200
->setName('Closed');
201
201
202
-
$action1 = new PhabricatorActionIconView();
203
-
$action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
202
+
$action1 = new PHUIIconView();
203
+
$action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
204
204
$action1->setSpriteIcon('flag-grey');
205
205
$action1->setHref('#');
206
206
+4
-4
src/applications/uiexample/examples/PhabricatorWorkboardExample.php
+4
-4
src/applications/uiexample/examples/PhabricatorWorkboardExample.php
···
131
131
->addPanel($panel2)
132
132
->addPanel($panel3);
133
133
134
-
$action = new PhabricatorActionIconView();
134
+
$action = new PHUIIconView();
135
135
$action->setHref('/maniphest/task/create');
136
136
$action->setImage('/rsrc/image/actions/edit.png');
137
137
138
-
$person1 = new PhabricatorActionIconView();
138
+
$person1 = new PHUIIconView();
139
139
$person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
140
140
$person1->setImage(
141
141
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
142
142
143
-
$person2 = new PhabricatorActionIconView();
143
+
$person2 = new PHUIIconView();
144
144
$person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
145
145
$person2->setImage(
146
146
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
147
147
148
-
$person3 = new PhabricatorActionIconView();
148
+
$person3 = new PHUIIconView();
149
149
$person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
150
150
$person3->setImage(
151
151
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
+3
-3
src/infrastructure/celerity/CeleritySpriteGenerator.php
+3
-3
src/infrastructure/celerity/CeleritySpriteGenerator.php
···
120
120
$tcss[] = '.actions-'.$icon.$suffix;
121
121
if ($color == 'dark') {
122
122
$tcss[] = '.device-desktop '.
123
-
'.actions-'.$icon.'-grey.phabricator-action-icon-item-link:hover';
123
+
'.actions-'.$icon.'-grey.phui-icon-item-link:hover';
124
124
}
125
125
126
126
$sprite->setTargetCSS(implode(', ', $tcss));
···
308
308
$path = $this->getPath('tokens_1x/'.$token.'.png');
309
309
310
310
$sprite = id(clone $template)
311
-
->setName('token-'.$token)
312
-
->setTargetCSS('.token-'.$token)
311
+
->setName('tokens-'.$token)
312
+
->setTargetCSS('.tokens-'.$token)
313
313
->setSourceFile($path, 1);
314
314
315
315
$sprites[] = $sprite;
+1
-1
src/view/layout/PhabricatorActionHeaderView.php
+1
-1
src/view/layout/PhabricatorActionHeaderView.php
+20
-6
src/view/layout/PhabricatorActionIconView.php
src/view/phui/PHUIIconView.php
+20
-6
src/view/layout/PhabricatorActionIconView.php
src/view/phui/PHUIIconView.php
···
1
1
<?php
2
2
3
-
final class PhabricatorActionIconView extends AphrontView {
3
+
final class PHUIIconView extends AphrontView {
4
4
5
5
const SPRITE_MINICONS = 'minicons';
6
6
const SPRITE_ACTIONS = 'actions';
7
7
const SPRITE_APPS = 'apps';
8
+
const SPRITE_TOKENS = 'tokens';
9
+
10
+
const HEAD_SMALL = 'phuihead-small';
11
+
const HEAD_MEDIUM = 'phuihead-medium';
8
12
9
13
private $href;
10
14
private $workflow;
11
15
private $image;
16
+
private $headSize = null;
12
17
private $spriteIcon;
13
18
private $spriteSheet;
14
19
···
27
32
return $this;
28
33
}
29
34
35
+
public function setHeadSize($size) {
36
+
$this->headSize = $size;
37
+
return $this;
38
+
}
39
+
30
40
public function setSpriteIcon($sprite) {
31
41
$this->spriteIcon = $sprite;
32
42
return $this;
···
38
48
}
39
49
40
50
public function render() {
41
-
require_celerity_resource('phabricator-action-icon-view-css');
51
+
require_celerity_resource('phui-icon-view-css');
42
52
43
53
$tag = 'span';
44
54
if ($this->href) {
45
55
$tag = 'a';
46
56
}
47
57
58
+
$classes = array();
59
+
$classes[] = 'phui-icon-item-link';
60
+
48
61
if ($this->spriteIcon) {
49
62
require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
50
-
51
-
$classes = array();
52
-
$classes[] = 'phabricator-action-icon-item-link';
53
63
$classes[] = 'sprite-'.$this->spriteSheet;
54
64
$classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
55
65
···
62
72
),
63
73
'');
64
74
} else {
75
+
if ($this->headSize) {
76
+
$classes[] = $this->headSize;
77
+
}
78
+
65
79
$action_icon = phutil_tag(
66
80
$tag,
67
81
array(
68
82
'href' => $this->href ? $this->href : null,
69
-
'class' => 'phabricator-action-icon-item-link',
83
+
'class' => implode(' ', $classes),
70
84
'sigil' => $this->workflow ? 'workflow' : null,
71
85
'style' => 'background-image: url('.$this->image.');'
72
86
),
+1
-1
src/view/layout/PhabricatorWorkboardView.php
+1
-1
src/view/layout/PhabricatorWorkboardView.php
+3
-3
src/view/phui/PHUIFeedStoryView.php
+3
-3
src/view/phui/PHUIFeedStoryView.php
···
80
80
81
81
$actor = '';
82
82
if ($this->image) {
83
-
$actor = new PhabricatorActionIconView();
83
+
$actor = new PHUIIconView();
84
84
$actor->setImage($this->image);
85
85
if ($this->imageHref) {
86
86
$actor->setHref($this->imageHref);
···
118
118
119
119
$icon = null;
120
120
if ($this->appIcon) {
121
-
$icon = new PhabricatorActionIconView();
121
+
$icon = new PHUIIconView();
122
122
$icon->setSpriteIcon($this->appIcon);
123
-
$icon->setSpriteSheet(PhabricatorActionIconView::SPRITE_APPS);
123
+
$icon->setSpriteSheet(PHUIIconView::SPRITE_APPS);
124
124
}
125
125
126
126
$foot = phutil_tag(
-7
webroot/rsrc/css/application/tokens/tokens.css
-7
webroot/rsrc/css/application/tokens/tokens.css
-21
webroot/rsrc/css/layout/phabricator-action-icon-view.css
-21
webroot/rsrc/css/layout/phabricator-action-icon-view.css
···
1
-
/**
2
-
* @provides phabricator-action-icon-view-css
3
-
*/
4
-
5
-
.phabricator-action-icon-item-link.sprite-minicons {
6
-
display: block;
7
-
height: 16px;
8
-
width: 16px;
9
-
}
10
-
11
-
.phabricator-action-icon-item-link.sprite-actions {
12
-
display: block;
13
-
height: 24px;
14
-
width: 24px;
15
-
}
16
-
17
-
.phabricator-action-icon-item-link.sprite-apps {
18
-
display: block;
19
-
height: 14px;
20
-
width: 14px;
21
-
}
+2
-2
webroot/rsrc/css/layout/phabricator-workboard-view.css
+2
-2
webroot/rsrc/css/layout/phabricator-workboard-view.css
···
48
48
margin: 0px;
49
49
}
50
50
51
-
.phabricator-workboard-view .phabricator-action-icon-item-link {
51
+
.phabricator-workboard-view .phui-icon-item-link {
52
52
display: block;
53
53
width: 50px;
54
54
height: 50px;
55
55
margin: 5px 4px 5px 5px;
56
56
}
57
57
58
-
.device-phone .phabricator-workboard-view .phabricator-action-icon-item-link {
58
+
.device-phone .phabricator-workboard-view .phui-icon-item-link {
59
59
margin-right: 0;
60
60
}
61
61
+2
-2
webroot/rsrc/css/phui/phui-feed-story.css
+2
-2
webroot/rsrc/css/phui/phui-feed-story.css
···
16
16
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
17
17
}
18
18
19
-
.phui-feed-story-head .phabricator-action-icon-item-link {
19
+
.phui-feed-story-head .phui-icon-item-link {
20
20
width: 35px;
21
21
height: 35px;
22
22
background-size: 35px;
···
42
42
padding: 10px;
43
43
}
44
44
45
-
.phui-feed-story-foot .phabricator-action-icon-item-link {
45
+
.phui-feed-story-foot .phui-icon-item-link {
46
46
float: left;
47
47
display: inline-block;
48
48
margin-right: 5px;
+41
webroot/rsrc/css/phui/phui-icon.css
+41
webroot/rsrc/css/phui/phui-icon.css
···
1
+
/**
2
+
* @provides phui-icon-view-css
3
+
*/
4
+
5
+
.phui-icon-item-link {
6
+
display: inline-block;
7
+
vertical-align: top;
8
+
}
9
+
10
+
.phui-icon-item-link.sprite-minicons {
11
+
height: 16px;
12
+
width: 16px;
13
+
}
14
+
15
+
.phui-icon-item-link.sprite-actions {
16
+
height: 24px;
17
+
width: 24px;
18
+
}
19
+
20
+
.phui-icon-item-link.sprite-apps {
21
+
height: 14px;
22
+
width: 14px;
23
+
}
24
+
25
+
.phui-icon-item-link.sprite-tokens {
26
+
height: 16px;
27
+
width: 16px;
28
+
}
29
+
30
+
.phui-icon-item-link.phuihead-medium {
31
+
height: 50px;
32
+
width: 50px;
33
+
}
34
+
35
+
.phui-icon-item-link.phuihead-small {
36
+
height: 35px;
37
+
width: 35px;
38
+
background-size: 35px;
39
+
}
40
+
41
+
+10
-10
webroot/rsrc/css/sprite-actions.css
+10
-10
webroot/rsrc/css/sprite-actions.css
···
18
18
}
19
19
20
20
21
-
.actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover {
21
+
.actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover {
22
22
background-position: 0px 0px;
23
23
}
24
24
25
-
.actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover {
25
+
.actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover {
26
26
background-position: -25px 0px;
27
27
}
28
28
29
-
.actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover {
29
+
.actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover {
30
30
background-position: -50px 0px;
31
31
}
32
32
33
-
.actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover {
33
+
.actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover {
34
34
background-position: -75px 0px;
35
35
}
36
36
37
-
.actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover {
37
+
.actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover {
38
38
background-position: -100px 0px;
39
39
}
40
40
41
-
.actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover {
41
+
.actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover {
42
42
background-position: 0px -25px;
43
43
}
44
44
45
-
.actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover {
45
+
.actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover {
46
46
background-position: -25px -25px;
47
47
}
48
48
49
-
.actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover {
49
+
.actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover {
50
50
background-position: -50px -25px;
51
51
}
52
52
53
-
.actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover {
53
+
.actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover {
54
54
background-position: -75px -25px;
55
55
}
56
56
57
-
.actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover {
57
+
.actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover {
58
58
background-position: -100px -25px;
59
59
}
60
60
+16
-16
webroot/rsrc/css/sprite-tokens.css
+16
-16
webroot/rsrc/css/sprite-tokens.css
···
11
11
12
12
13
13
14
-
.token-coin-1 {
14
+
.tokens-coin-1 {
15
15
background-position: 0px 0px;
16
16
}
17
17
18
-
.token-coin-2 {
18
+
.tokens-coin-2 {
19
19
background-position: -17px 0px;
20
20
}
21
21
22
-
.token-coin-3 {
22
+
.tokens-coin-3 {
23
23
background-position: -34px 0px;
24
24
}
25
25
26
-
.token-coin-4 {
26
+
.tokens-coin-4 {
27
27
background-position: -51px 0px;
28
28
}
29
29
30
-
.token-heart-1 {
30
+
.tokens-heart-1 {
31
31
background-position: 0px -17px;
32
32
}
33
33
34
-
.token-heart-2 {
34
+
.tokens-heart-2 {
35
35
background-position: -17px -17px;
36
36
}
37
37
38
-
.token-like-1 {
38
+
.tokens-like-1 {
39
39
background-position: -34px -17px;
40
40
}
41
41
42
-
.token-like-2 {
42
+
.tokens-like-2 {
43
43
background-position: -51px -17px;
44
44
}
45
45
46
-
.token-medal-1 {
46
+
.tokens-medal-1 {
47
47
background-position: 0px -34px;
48
48
}
49
49
50
-
.token-medal-2 {
50
+
.tokens-medal-2 {
51
51
background-position: -17px -34px;
52
52
}
53
53
54
-
.token-medal-3 {
54
+
.tokens-medal-3 {
55
55
background-position: -34px -34px;
56
56
}
57
57
58
-
.token-medal-4 {
58
+
.tokens-medal-4 {
59
59
background-position: -51px -34px;
60
60
}
61
61
62
-
.token-misc-1 {
62
+
.tokens-misc-1 {
63
63
background-position: 0px -51px;
64
64
}
65
65
66
-
.token-misc-2 {
66
+
.tokens-misc-2 {
67
67
background-position: -17px -51px;
68
68
}
69
69
70
-
.token-misc-3 {
70
+
.tokens-misc-3 {
71
71
background-position: -34px -51px;
72
72
}
73
73
74
-
.token-misc-4 {
74
+
.tokens-misc-4 {
75
75
background-position: -51px -51px;
76
76
}