1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-15 11:22:40 +01:00
phorge-phorge/src/infrastructure/celerity/CeleritySpriteGenerator.php
epriestley 6c88c76cac Generate an icon sprite map with new sprites and 2x retina graphics
Summary:
  - The filesystem is now the authority for which sprites are available. If you add new icons, the generation process will pick them up.
  - I broke out icon generation and added retina support. App icon generation still uses the old method.
  - Update ActionList and RemarkupControl to use the new sheet.
  - Use white icons on hover.
  - Also fixed a couple of minor issues with some stuff in Firefox/Chrome.

Test Plan:
{F25750}

{F25751}

{F25752}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2013

Differential Revision: https://secure.phabricator.com/D4027
2012-11-23 16:35:39 -08:00

132 lines
3 KiB
PHP

<?php
final class CeleritySpriteGenerator {
public function buildIconSheet() {
$icons = $this->getDirectoryList('icons_1x');
$colors = array(
'',
'grey',
'white',
);
$scales = array(
'1x' => 1,
'2x' => 2,
);
$template = id(new PhutilSprite())
->setSourceSize(14, 14);
$sprites = array();
foreach ($colors as $color) {
foreach ($icons as $icon) {
$prefix = 'icons_';
if (strlen($color)) {
$prefix .= $color.'_';
}
$suffix = '';
if (strlen($color)) {
$suffix = '-'.$color;
}
$sprite = id(clone $template)
->setName('action-'.$icon.$suffix);
if ($color == 'white') {
$sprite->setTargetCSS(
'.device-desktop .phabricator-action-view:hover .action-'.$icon);
} else {
$sprite->setTargetCSS('.action-'.$icon.$suffix);
}
foreach ($scales as $scale_key => $scale) {
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
$sprite->setSourceFile($path, $scale);
}
$sprites[] = $sprite;
}
}
$remarkup_icons = $this->getDirectoryList('remarkup_1x');
foreach ($remarkup_icons as $icon) {
$prefix = 'remarkup_';
// Strip 'text_' from these file names.
$class_name = substr($icon, 5);
$sprite = id(clone $template)
->setName('remarkup-assist-'.$icon)
->setTargetCSS('.remarkup-assist-'.$class_name);
foreach ($scales as $scale_key => $scale) {
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
$sprite->setSourceFile($path, $scale);
}
$sprites[] = $sprite;
}
$sheet = $this->buildSheet('icon');
$sheet->setScales($scales);
foreach ($sprites as $sprite) {
$sheet->addSprite($sprite);
}
return $sheet;
}
private function getPath($to_path = null) {
$root = dirname(phutil_get_library_root('phabricator'));
return $root.'/resources/sprite/'.$to_path;
}
private function getDirectoryList($dir) {
$path = $this->getPath($dir);
$result = array();
$images = Filesystem::listDirectory($path, $include_hidden = false);
foreach ($images as $image) {
if (!preg_match('/\.png$/', $image)) {
throw new Exception(
"Expected file '{$image}' in '{$path}' to be a sprite source ".
"ending in '.png'.");
}
$result[] = substr($image, 0, -4);
}
return $result;
}
private function buildSheet($name) {
$sheet = new PhutilSpriteSheet();
$at = '@';
$sheet->setCSSHeader(<<<EOCSS
/**
* @provides sprite-{$name}-css
* {$at}generated
*/
.sprite-{$name} {
background-image: url(/rsrc/image/sprite-{$name}.png);
background-repeat: no-repeat;
}
@media
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sprite-{$name} {
background-image: url(/rsrc/image/sprite-{$name}-X2.png);
background-size: {X}px {Y}px;
}
}
EOCSS
);
return $sheet;
}
}