2012-11-24 01:35:39 +01:00
|
|
|
<?php
|
|
|
|
|
|
|
|
final class CeleritySpriteGenerator {
|
|
|
|
|
2012-11-27 23:03:25 +01:00
|
|
|
public function buildMenuSheet() {
|
|
|
|
$sprites = array();
|
|
|
|
|
|
|
|
$sources = array(
|
2012-12-07 23:29:09 +01:00
|
|
|
'logo' => array(
|
2014-11-06 18:23:17 +01:00
|
|
|
'x' => 96,
|
2015-02-19 23:43:33 +01:00
|
|
|
'y' => 40,
|
2014-11-06 18:23:17 +01:00
|
|
|
'css' => '.phabricator-main-menu-logo',
|
|
|
|
),
|
|
|
|
'eye' => array(
|
|
|
|
'x' => 40,
|
|
|
|
'y' => 40,
|
|
|
|
'css' => '.phabricator-main-menu-eye',
|
2012-12-07 23:29:09 +01:00
|
|
|
),
|
2012-11-27 23:03:25 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
|
|
|
|
$template = new PhutilSprite();
|
|
|
|
foreach ($sources as $name => $spec) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($name)
|
|
|
|
->setSourceSize($spec['x'], $spec['y'])
|
|
|
|
->setTargetCSS($spec['css']);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_name => $scale) {
|
2012-12-07 22:35:49 +01:00
|
|
|
$path = 'menu_'.$scale_name.'/'.$name.'.png';
|
2012-11-27 23:03:25 +01:00
|
|
|
$path = $this->getPath($path);
|
|
|
|
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
$sheet = $this->buildSheet('menu', true);
|
2012-11-27 23:03:25 +01:00
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-02-15 16:47:14 +01:00
|
|
|
public function buildTokenSheet() {
|
2013-11-04 20:50:19 +01:00
|
|
|
$icons = $this->getDirectoryList('tokens_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
2013-02-15 16:47:14 +01:00
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(16, 16);
|
|
|
|
|
|
|
|
$sprites = array();
|
2013-11-04 20:50:19 +01:00
|
|
|
$prefix = 'tokens_';
|
|
|
|
foreach ($icons as $icon) {
|
2013-02-15 16:47:14 +01:00
|
|
|
$sprite = id(clone $template)
|
2013-11-04 20:50:19 +01:00
|
|
|
->setName('tokens-'.$icon)
|
|
|
|
->setTargetCSS('.tokens-'.$icon);
|
2013-02-15 16:47:14 +01:00
|
|
|
|
2013-11-04 20:50:19 +01:00
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
2013-02-15 16:47:14 +01:00
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
2013-11-04 20:50:19 +01:00
|
|
|
$sheet = $this->buildSheet('tokens', true);
|
|
|
|
$sheet->setScales($scales);
|
2013-02-15 16:47:14 +01:00
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-10-13 04:15:38 +02:00
|
|
|
public function buildProjectsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('projects_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(50, 50);
|
|
|
|
|
|
|
|
$sprites = array();
|
2013-10-17 18:32:34 +02:00
|
|
|
$prefix = 'projects-';
|
2013-10-13 04:15:38 +02:00
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($prefix.$icon)
|
|
|
|
->setTargetCSS('.'.$prefix.$icon);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
2013-10-17 18:32:34 +02:00
|
|
|
$path = $this->getPath('projects_'.$scale_key.'/'.$icon.'.png');
|
2013-10-13 04:15:38 +02:00
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('projects', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
2013-01-29 00:56:29 +01:00
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-06-11 19:22:09 +02:00
|
|
|
public function buildLoginSheet() {
|
|
|
|
$icons = $this->getDirectoryList('login_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(34, 34);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
$prefix = 'login_';
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
2013-06-13 00:05:16 +02:00
|
|
|
->setName('login-'.$icon)
|
|
|
|
->setTargetCSS('.login-'.$icon);
|
2013-06-11 19:22:09 +02:00
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('login', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
2013-07-17 17:44:11 +02:00
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
public function buildGradientSheet() {
|
|
|
|
$gradients = $this->getDirectoryList('gradients');
|
|
|
|
|
|
|
|
$template = new PhutilSprite();
|
|
|
|
|
|
|
|
$unusual_heights = array(
|
|
|
|
'breadcrumbs' => 31,
|
2013-04-10 00:50:48 +02:00
|
|
|
'grey-header' => 70,
|
|
|
|
'dark-grey-header' => 70,
|
2013-09-29 00:55:38 +02:00
|
|
|
'lightblue-header' => 240,
|
2014-06-24 18:39:32 +02:00
|
|
|
'lightgreen-header' => 240,
|
|
|
|
'lightviolet-header' => 240,
|
|
|
|
'lightred-header' => 240,
|
2012-12-07 22:35:49 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($gradients as $gradient) {
|
|
|
|
$path = $this->getPath('gradients/'.$gradient.'.png');
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('gradient-'.$gradient)
|
|
|
|
->setSourceFile($path)
|
2014-05-25 06:56:45 +02:00
|
|
|
->setTargetCSS('.gradient-'.$gradient);
|
2012-12-07 22:35:49 +01:00
|
|
|
|
|
|
|
$sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
|
|
|
|
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet(
|
|
|
|
'gradient',
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
false,
|
2014-05-25 06:56:45 +02:00
|
|
|
PhutilSpriteSheet::TYPE_REPEAT_X);
|
2012-12-07 22:35:49 +01:00
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-12-06 21:08:11 +01:00
|
|
|
public function buildMainHeaderSheet() {
|
|
|
|
$gradients = $this->getDirectoryList('main_header');
|
|
|
|
$template = new PhutilSprite();
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($gradients as $gradient) {
|
|
|
|
$path = $this->getPath('main_header/'.$gradient.'.png');
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('main-header-'.$gradient)
|
|
|
|
->setSourceFile($path)
|
|
|
|
->setTargetCSS('.main-header-'.$gradient);
|
|
|
|
$sprite->setSourceSize(6, 44);
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('main-header',
|
|
|
|
false,
|
|
|
|
PhutilSpriteSheet::TYPE_REPEAT_X);
|
|
|
|
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
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(
|
2015-05-22 09:27:56 +02:00
|
|
|
pht(
|
|
|
|
"Expected file '%s' in '%s' to be a sprite source ending in '%s'.",
|
|
|
|
$image,
|
|
|
|
$path,
|
|
|
|
'.png'));
|
2012-11-24 01:35:39 +01:00
|
|
|
}
|
|
|
|
$result[] = substr($image, 0, -4);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $result;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
private function buildSheet(
|
|
|
|
$name,
|
|
|
|
$has_retina,
|
|
|
|
$type = null,
|
|
|
|
$extra_css = '') {
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
$sheet = new PhutilSpriteSheet();
|
|
|
|
|
|
|
|
$at = '@';
|
2012-12-07 22:35:49 +01:00
|
|
|
|
|
|
|
switch ($type) {
|
|
|
|
case PhutilSpriteSheet::TYPE_STANDARD:
|
|
|
|
default:
|
|
|
|
$type = PhutilSpriteSheet::TYPE_STANDARD;
|
|
|
|
$repeat_rule = 'no-repeat';
|
|
|
|
break;
|
|
|
|
case PhutilSpriteSheet::TYPE_REPEAT_X:
|
|
|
|
$repeat_rule = 'repeat-x';
|
|
|
|
break;
|
|
|
|
case PhutilSpriteSheet::TYPE_REPEAT_Y:
|
|
|
|
$repeat_rule = 'repeat-y';
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
$retina_rules = null;
|
|
|
|
if ($has_retina) {
|
|
|
|
$retina_rules = <<<EOCSS
|
|
|
|
@media
|
|
|
|
only screen and (min-device-pixel-ratio: 1.5),
|
|
|
|
only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
|
|
.sprite-{$name}{$extra_css} {
|
|
|
|
background-image: url(/rsrc/image/sprite-{$name}-X2.png);
|
|
|
|
background-size: {X}px {Y}px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
EOCSS;
|
|
|
|
}
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
$sheet->setSheetType($type);
|
2012-11-24 01:35:39 +01:00
|
|
|
$sheet->setCSSHeader(<<<EOCSS
|
|
|
|
/**
|
|
|
|
* @provides sprite-{$name}-css
|
|
|
|
* {$at}generated
|
|
|
|
*/
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
.sprite-{$name}{$extra_css} {
|
2012-11-24 01:35:39 +01:00
|
|
|
background-image: url(/rsrc/image/sprite-{$name}.png);
|
2012-12-07 22:35:49 +01:00
|
|
|
background-repeat: {$repeat_rule};
|
2012-11-24 01:35:39 +01:00
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
{$retina_rules}
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
EOCSS
|
|
|
|
);
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
}
|