@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 a sprite generation script to Phabricator
Summary: This probably needs some tweaks, but gets the point across. I'll lay in the actual usage in the next diff.
Test Plan: Looked at generated CSS/PNG.
Reviewers: btrahan, chad, vrana
Reviewed By: vrana
CC: aran
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3278
+393
+157
scripts/celerity/generate_sprites.php
+157
scripts/celerity/generate_sprites.php
···
1
+
#!/usr/bin/env php
2
+
<?php
3
+
4
+
/*
5
+
* Copyright 2012 Facebook, Inc.
6
+
*
7
+
* Licensed under the Apache License, Version 2.0 (the "License");
8
+
* you may not use this file except in compliance with the License.
9
+
* You may obtain a copy of the License at
10
+
*
11
+
* http://www.apache.org/licenses/LICENSE-2.0
12
+
*
13
+
* Unless required by applicable law or agreed to in writing, software
14
+
* distributed under the License is distributed on an "AS IS" BASIS,
15
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+
* See the License for the specific language governing permissions and
17
+
* limitations under the License.
18
+
*/
19
+
20
+
require_once dirname(dirname(__FILE__)).'/__init_script__.php';
21
+
22
+
$args = new PhutilArgumentParser($argv);
23
+
$args->setTagline('regenerate CSS sprite sheets');
24
+
$args->setSynopsis(<<<EOHELP
25
+
**sprites**
26
+
Rebuild CSS sprite sheets.
27
+
28
+
EOHELP
29
+
);
30
+
$args->parseStandardArguments();
31
+
$args->parse(
32
+
array(
33
+
array(
34
+
'name' => 'source',
35
+
'param' => 'directory',
36
+
'help' => 'Directory with sprite sources.',
37
+
)
38
+
));
39
+
40
+
$srcroot = $args->getArg('source');
41
+
if (!$srcroot) {
42
+
throw new Exception(
43
+
"You must specify a source directory with '--source'.");
44
+
}
45
+
46
+
$webroot = dirname(phutil_get_library_root('phabricator')).'/webroot/rsrc';
47
+
$webroot = Filesystem::readablePath($webroot);
48
+
49
+
function glx($x) {
50
+
return (60 + (48 * $x));
51
+
}
52
+
53
+
function gly($y) {
54
+
return (110 + (48 * $y));
55
+
}
56
+
57
+
$sheet = new PhutilSpriteSheet();
58
+
$sheet->addCSSHeader(<<<EOCSS
59
+
/**
60
+
* @provides autosprite-css
61
+
*/
62
+
63
+
.autosprite {
64
+
background-image: url(/rsrc/image/autosprite.png);
65
+
background-repeat: no-repeat;
66
+
}
67
+
EOCSS
68
+
);
69
+
70
+
$menu_normal_template = id(new PhutilSprite())
71
+
->setSourceFile($srcroot.'/menu_normal_1x.png')
72
+
->setSourceSize(26, 26);
73
+
74
+
$menu_hover_template = id(new PhutilSprite())
75
+
->setSourceFile($srcroot.'/menu_hover_1x.png')
76
+
->setSourceSize(26, 26);
77
+
78
+
$menu_selected_template = id(new PhutilSprite())
79
+
->setSourceFile($srcroot.'/menu_selected_1x.png')
80
+
->setSourceSize(26, 26);
81
+
82
+
$menu_map = array(
83
+
'' => $menu_normal_template,
84
+
'-selected' => $menu_selected_template,
85
+
':hover' => $menu_hover_template,
86
+
);
87
+
88
+
$icon_map = array(
89
+
'help' => array(4, 19),
90
+
'settings' => array(0, 28),
91
+
'logout' => array(3, 6),
92
+
'notifications' => array(5, 20),
93
+
'task' => array(1, 15),
94
+
);
95
+
96
+
foreach ($icon_map as $icon => $coords) {
97
+
list($x, $y) = $coords;
98
+
foreach ($menu_map as $suffix => $template) {
99
+
$sheet->addSprite(
100
+
id(clone $template)
101
+
->setSourcePosition(glx($x), gly($y))
102
+
->setTargetCSS('.main-menu-item-icon-'.$icon.$suffix));
103
+
}
104
+
}
105
+
106
+
$app_template_full = id(new PhutilSprite())
107
+
->setSourceFile($srcroot.'/application_normal_2x.png')
108
+
->setSourceSize(60, 60);
109
+
110
+
$app_template_mini = id(new PhutilSprite())
111
+
->setSourceFile($srcroot.'/application_normal_1x.png')
112
+
->setSourceSize(26, 26);
113
+
114
+
$app_source_map = array(
115
+
'-full' => array($app_template_full, 2),
116
+
'' => array($app_template_mini, 1),
117
+
);
118
+
119
+
$app_map = array(
120
+
'differential' => array(9, 1),
121
+
'fact' => array(2, 4),
122
+
'mail' => array(0, 1),
123
+
'diffusion' => array(7, 13),
124
+
'slowvote' => array(1, 4),
125
+
'phriction' => array(1, 7),
126
+
'maniphest' => array(3, 24),
127
+
'flags' => array(6, 26),
128
+
'settings' => array(9, 11),
129
+
'applications' => array(0, 34),
130
+
'default' => array(9, 9),
131
+
'people' => array(3, 0),
132
+
'ponder' => array(4, 35),
133
+
'calendar' => array(5, 4),
134
+
'files' => array(6, 3),
135
+
'projects' => array(7, 35),
136
+
'daemons' => array(7, 6),
137
+
'herald' => array(1, 5),
138
+
'countdown' => array(7, 5),
139
+
'conduit' => array(7, 30),
140
+
'feed' => array(3, 11),
141
+
);
142
+
143
+
foreach ($app_map as $icon => $coords) {
144
+
list($x, $y) = $coords;
145
+
foreach ($app_source_map as $suffix => $spec) {
146
+
list($template, $scale) = $spec;
147
+
$sheet->addSprite(
148
+
id(clone $template)
149
+
->setSourcePosition(glx($x) * $scale, gly($y) * $scale)
150
+
->setTargetCSS('.app-'.$icon.$suffix));
151
+
}
152
+
}
153
+
154
+
$sheet->generateImage($webroot.'/image/autosprite.png');
155
+
$sheet->generateCSS($webroot.'/css/autosprite.css');
156
+
157
+
echo "Done.\n";
+236
webroot/rsrc/css/autosprite.css
+236
webroot/rsrc/css/autosprite.css
···
1
+
/**
2
+
* @provides autosprite-css
3
+
*/
4
+
5
+
.autosprite {
6
+
background-image: url(/rsrc/image/autosprite.png);
7
+
background-repeat: no-repeat;
8
+
}
9
+
10
+
.main-menu-item-icon-help {
11
+
background-position: 0px 0px;
12
+
}
13
+
14
+
.main-menu-item-icon-settings {
15
+
background-position: 0px -26px;
16
+
}
17
+
18
+
.main-menu-item-icon-logout {
19
+
background-position: 0px -52px;
20
+
}
21
+
22
+
.main-menu-item-icon-notifications {
23
+
background-position: 0px -78px;
24
+
}
25
+
26
+
.main-menu-item-icon-task {
27
+
background-position: 0px -104px;
28
+
}
29
+
30
+
.main-menu-item-icon-help-selected {
31
+
background-position: 0px -130px;
32
+
}
33
+
34
+
.main-menu-item-icon-settings-selected {
35
+
background-position: 0px -156px;
36
+
}
37
+
38
+
.main-menu-item-icon-logout-selected {
39
+
background-position: 0px -182px;
40
+
}
41
+
42
+
.main-menu-item-icon-notifications-selected {
43
+
background-position: 0px -208px;
44
+
}
45
+
46
+
.main-menu-item-icon-task-selected {
47
+
background-position: 0px -234px;
48
+
}
49
+
50
+
.main-menu-item-icon-help:hover {
51
+
background-position: 0px -260px;
52
+
}
53
+
54
+
.main-menu-item-icon-settings:hover {
55
+
background-position: 0px -286px;
56
+
}
57
+
58
+
.main-menu-item-icon-logout:hover {
59
+
background-position: 0px -312px;
60
+
}
61
+
62
+
.main-menu-item-icon-notifications:hover {
63
+
background-position: 0px -338px;
64
+
}
65
+
66
+
.main-menu-item-icon-task:hover {
67
+
background-position: 0px -364px;
68
+
}
69
+
70
+
.app-differential-full {
71
+
background-position: 0px -390px;
72
+
}
73
+
74
+
.app-fact-full {
75
+
background-position: 0px -450px;
76
+
}
77
+
78
+
.app-mail-full {
79
+
background-position: 0px -510px;
80
+
}
81
+
82
+
.app-diffusion-full {
83
+
background-position: 0px -570px;
84
+
}
85
+
86
+
.app-slowvote-full {
87
+
background-position: 0px -630px;
88
+
}
89
+
90
+
.app-phriction-full {
91
+
background-position: 0px -690px;
92
+
}
93
+
94
+
.app-maniphest-full {
95
+
background-position: 0px -750px;
96
+
}
97
+
98
+
.app-flags-full {
99
+
background-position: 0px -810px;
100
+
}
101
+
102
+
.app-settings-full {
103
+
background-position: 0px -870px;
104
+
}
105
+
106
+
.app-applications-full {
107
+
background-position: 0px -930px;
108
+
}
109
+
110
+
.app-default-full {
111
+
background-position: 0px -990px;
112
+
}
113
+
114
+
.app-people-full {
115
+
background-position: 0px -1050px;
116
+
}
117
+
118
+
.app-ponder-full {
119
+
background-position: 0px -1110px;
120
+
}
121
+
122
+
.app-calendar-full {
123
+
background-position: 0px -1170px;
124
+
}
125
+
126
+
.app-files-full {
127
+
background-position: 0px -1230px;
128
+
}
129
+
130
+
.app-projects-full {
131
+
background-position: 0px -1290px;
132
+
}
133
+
134
+
.app-daemons-full {
135
+
background-position: 0px -1350px;
136
+
}
137
+
138
+
.app-herald-full {
139
+
background-position: 0px -1410px;
140
+
}
141
+
142
+
.app-countdown-full {
143
+
background-position: 0px -1470px;
144
+
}
145
+
146
+
.app-conduit-full {
147
+
background-position: 0px -1530px;
148
+
}
149
+
150
+
.app-feed-full {
151
+
background-position: 0px -1590px;
152
+
}
153
+
154
+
.app-differential {
155
+
background-position: 0px -1650px;
156
+
}
157
+
158
+
.app-fact {
159
+
background-position: 0px -1676px;
160
+
}
161
+
162
+
.app-mail {
163
+
background-position: 0px -1702px;
164
+
}
165
+
166
+
.app-diffusion {
167
+
background-position: 0px -1728px;
168
+
}
169
+
170
+
.app-slowvote {
171
+
background-position: 0px -1754px;
172
+
}
173
+
174
+
.app-phriction {
175
+
background-position: 0px -1780px;
176
+
}
177
+
178
+
.app-maniphest {
179
+
background-position: 0px -1806px;
180
+
}
181
+
182
+
.app-flags {
183
+
background-position: 0px -1832px;
184
+
}
185
+
186
+
.app-settings {
187
+
background-position: 0px -1858px;
188
+
}
189
+
190
+
.app-applications {
191
+
background-position: 0px -1884px;
192
+
}
193
+
194
+
.app-default {
195
+
background-position: 0px -1910px;
196
+
}
197
+
198
+
.app-people {
199
+
background-position: 0px -1936px;
200
+
}
201
+
202
+
.app-ponder {
203
+
background-position: 0px -1962px;
204
+
}
205
+
206
+
.app-calendar {
207
+
background-position: 0px -1988px;
208
+
}
209
+
210
+
.app-files {
211
+
background-position: 0px -2014px;
212
+
}
213
+
214
+
.app-projects {
215
+
background-position: 0px -2040px;
216
+
}
217
+
218
+
.app-daemons {
219
+
background-position: 0px -2066px;
220
+
}
221
+
222
+
.app-herald {
223
+
background-position: 0px -2092px;
224
+
}
225
+
226
+
.app-countdown {
227
+
background-position: 0px -2118px;
228
+
}
229
+
230
+
.app-conduit {
231
+
background-position: 0px -2144px;
232
+
}
233
+
234
+
.app-feed {
235
+
background-position: 0px -2170px;
236
+
}
webroot/rsrc/image/autosprite.png
webroot/rsrc/image/autosprite.png
This is a binary file and will not be displayed.