diff --git a/scripts/celerity/generate_sprites.php b/scripts/celerity/generate_sprites.php new file mode 100755 index 0000000000..ba815f9134 --- /dev/null +++ b/scripts/celerity/generate_sprites.php @@ -0,0 +1,157 @@ +#!/usr/bin/env php +setTagline('regenerate CSS sprite sheets'); +$args->setSynopsis(<<parseStandardArguments(); +$args->parse( + array( + array( + 'name' => 'source', + 'param' => 'directory', + 'help' => 'Directory with sprite sources.', + ) + )); + +$srcroot = $args->getArg('source'); +if (!$srcroot) { + throw new Exception( + "You must specify a source directory with '--source'."); +} + +$webroot = dirname(phutil_get_library_root('phabricator')).'/webroot/rsrc'; +$webroot = Filesystem::readablePath($webroot); + +function glx($x) { + return (60 + (48 * $x)); +} + +function gly($y) { + return (110 + (48 * $y)); +} + +$sheet = new PhutilSpriteSheet(); +$sheet->addCSSHeader(<<setSourceFile($srcroot.'/menu_normal_1x.png') + ->setSourceSize(26, 26); + +$menu_hover_template = id(new PhutilSprite()) + ->setSourceFile($srcroot.'/menu_hover_1x.png') + ->setSourceSize(26, 26); + +$menu_selected_template = id(new PhutilSprite()) + ->setSourceFile($srcroot.'/menu_selected_1x.png') + ->setSourceSize(26, 26); + +$menu_map = array( + '' => $menu_normal_template, + '-selected' => $menu_selected_template, + ':hover' => $menu_hover_template, +); + +$icon_map = array( + 'help' => array(4, 19), + 'settings' => array(0, 28), + 'logout' => array(3, 6), + 'notifications' => array(5, 20), + 'task' => array(1, 15), +); + +foreach ($icon_map as $icon => $coords) { + list($x, $y) = $coords; + foreach ($menu_map as $suffix => $template) { + $sheet->addSprite( + id(clone $template) + ->setSourcePosition(glx($x), gly($y)) + ->setTargetCSS('.main-menu-item-icon-'.$icon.$suffix)); + } +} + +$app_template_full = id(new PhutilSprite()) + ->setSourceFile($srcroot.'/application_normal_2x.png') + ->setSourceSize(60, 60); + +$app_template_mini = id(new PhutilSprite()) + ->setSourceFile($srcroot.'/application_normal_1x.png') + ->setSourceSize(26, 26); + +$app_source_map = array( + '-full' => array($app_template_full, 2), + '' => array($app_template_mini, 1), +); + +$app_map = array( + 'differential' => array(9, 1), + 'fact' => array(2, 4), + 'mail' => array(0, 1), + 'diffusion' => array(7, 13), + 'slowvote' => array(1, 4), + 'phriction' => array(1, 7), + 'maniphest' => array(3, 24), + 'flags' => array(6, 26), + 'settings' => array(9, 11), + 'applications' => array(0, 34), + 'default' => array(9, 9), + 'people' => array(3, 0), + 'ponder' => array(4, 35), + 'calendar' => array(5, 4), + 'files' => array(6, 3), + 'projects' => array(7, 35), + 'daemons' => array(7, 6), + 'herald' => array(1, 5), + 'countdown' => array(7, 5), + 'conduit' => array(7, 30), + 'feed' => array(3, 11), +); + +foreach ($app_map as $icon => $coords) { + list($x, $y) = $coords; + foreach ($app_source_map as $suffix => $spec) { + list($template, $scale) = $spec; + $sheet->addSprite( + id(clone $template) + ->setSourcePosition(glx($x) * $scale, gly($y) * $scale) + ->setTargetCSS('.app-'.$icon.$suffix)); + } +} + +$sheet->generateImage($webroot.'/image/autosprite.png'); +$sheet->generateCSS($webroot.'/css/autosprite.css'); + +echo "Done.\n"; diff --git a/webroot/rsrc/css/autosprite.css b/webroot/rsrc/css/autosprite.css new file mode 100644 index 0000000000..27a0489e0c --- /dev/null +++ b/webroot/rsrc/css/autosprite.css @@ -0,0 +1,236 @@ +/** + * @provides autosprite-css + */ + +.autosprite { + background-image: url(/rsrc/image/autosprite.png); + background-repeat: no-repeat; +} + +.main-menu-item-icon-help { + background-position: 0px 0px; +} + +.main-menu-item-icon-settings { + background-position: 0px -26px; +} + +.main-menu-item-icon-logout { + background-position: 0px -52px; +} + +.main-menu-item-icon-notifications { + background-position: 0px -78px; +} + +.main-menu-item-icon-task { + background-position: 0px -104px; +} + +.main-menu-item-icon-help-selected { + background-position: 0px -130px; +} + +.main-menu-item-icon-settings-selected { + background-position: 0px -156px; +} + +.main-menu-item-icon-logout-selected { + background-position: 0px -182px; +} + +.main-menu-item-icon-notifications-selected { + background-position: 0px -208px; +} + +.main-menu-item-icon-task-selected { + background-position: 0px -234px; +} + +.main-menu-item-icon-help:hover { + background-position: 0px -260px; +} + +.main-menu-item-icon-settings:hover { + background-position: 0px -286px; +} + +.main-menu-item-icon-logout:hover { + background-position: 0px -312px; +} + +.main-menu-item-icon-notifications:hover { + background-position: 0px -338px; +} + +.main-menu-item-icon-task:hover { + background-position: 0px -364px; +} + +.app-differential-full { + background-position: 0px -390px; +} + +.app-fact-full { + background-position: 0px -450px; +} + +.app-mail-full { + background-position: 0px -510px; +} + +.app-diffusion-full { + background-position: 0px -570px; +} + +.app-slowvote-full { + background-position: 0px -630px; +} + +.app-phriction-full { + background-position: 0px -690px; +} + +.app-maniphest-full { + background-position: 0px -750px; +} + +.app-flags-full { + background-position: 0px -810px; +} + +.app-settings-full { + background-position: 0px -870px; +} + +.app-applications-full { + background-position: 0px -930px; +} + +.app-default-full { + background-position: 0px -990px; +} + +.app-people-full { + background-position: 0px -1050px; +} + +.app-ponder-full { + background-position: 0px -1110px; +} + +.app-calendar-full { + background-position: 0px -1170px; +} + +.app-files-full { + background-position: 0px -1230px; +} + +.app-projects-full { + background-position: 0px -1290px; +} + +.app-daemons-full { + background-position: 0px -1350px; +} + +.app-herald-full { + background-position: 0px -1410px; +} + +.app-countdown-full { + background-position: 0px -1470px; +} + +.app-conduit-full { + background-position: 0px -1530px; +} + +.app-feed-full { + background-position: 0px -1590px; +} + +.app-differential { + background-position: 0px -1650px; +} + +.app-fact { + background-position: 0px -1676px; +} + +.app-mail { + background-position: 0px -1702px; +} + +.app-diffusion { + background-position: 0px -1728px; +} + +.app-slowvote { + background-position: 0px -1754px; +} + +.app-phriction { + background-position: 0px -1780px; +} + +.app-maniphest { + background-position: 0px -1806px; +} + +.app-flags { + background-position: 0px -1832px; +} + +.app-settings { + background-position: 0px -1858px; +} + +.app-applications { + background-position: 0px -1884px; +} + +.app-default { + background-position: 0px -1910px; +} + +.app-people { + background-position: 0px -1936px; +} + +.app-ponder { + background-position: 0px -1962px; +} + +.app-calendar { + background-position: 0px -1988px; +} + +.app-files { + background-position: 0px -2014px; +} + +.app-projects { + background-position: 0px -2040px; +} + +.app-daemons { + background-position: 0px -2066px; +} + +.app-herald { + background-position: 0px -2092px; +} + +.app-countdown { + background-position: 0px -2118px; +} + +.app-conduit { + background-position: 0px -2144px; +} + +.app-feed { + background-position: 0px -2170px; +} diff --git a/webroot/rsrc/image/autosprite.png b/webroot/rsrc/image/autosprite.png new file mode 100644 index 0000000000..e10f410164 Binary files /dev/null and b/webroot/rsrc/image/autosprite.png differ