diff --git a/scripts/celerity/generate_sprites.php b/scripts/celerity/generate_sprites.php index 83ca46d766..d967666fd9 100755 --- a/scripts/celerity/generate_sprites.php +++ b/scripts/celerity/generate_sprites.php @@ -1,192 +1,194 @@ #!/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(); +$at = '@'; $sheet->setCSSHeader(<<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.'/menu_normal_1x.png') ->setSourceSize(30, 30); $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), 'paste' => array(9, 2), 'audit' => array(8, 19), 'uiexample' => array(7, 28), 'phpast' => array(6, 31), 'owners' => array(5, 32), 'phid' => array(9, 25), 'diviner' => array(1, 35), 'repositories' => array(8, 13), ); $xadj = -1; 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(($xadj + glx($x)) * $scale, gly($y) * $scale) ->setTargetCSS('.app-'.$icon.$suffix)); } } $action_template = id(new PhutilSprite()) ->setSourcePosition(0, 0) ->setSourceSize(16, 16); $action_map = array( 'file' => 'icon/page_white_text.png', 'fork' => 'icon/arrow_branch.png', 'edit' => 'icon/page_white_edit.png', 'flag-0' => 'icon/flag-0.png', 'flag-1' => 'icon/flag-1.png', 'flag-2' => 'icon/flag-2.png', 'flag-3' => 'icon/flag-3.png', 'flag-4' => 'icon/flag-4.png', 'flag-5' => 'icon/flag-5.png', 'flag-6' => 'icon/flag-6.png', 'flag-7' => 'icon/flag-7.png', 'flag-ghost' => 'icon/flag-ghost.png', ); foreach ($action_map as $icon => $source) { $sheet->addSprite( id(clone $action_template) ->setSourceFile($srcroot.$source) ->setTargetCSS('.action-'.$icon)); } $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 index ee0c33254b..3a88bba802 100644 --- a/webroot/rsrc/css/autosprite.css +++ b/webroot/rsrc/css/autosprite.css @@ -1,348 +1,349 @@ /** * @provides autosprite-css + * @generated */ .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-help-selected { background-position: 0px -27px; } .main-menu-item-icon-help:hover { background-position: 0px -54px; } .main-menu-item-icon-settings { background-position: 0px -81px; } .main-menu-item-icon-settings-selected { background-position: 0px -108px; } .main-menu-item-icon-settings:hover { background-position: 0px -135px; } .main-menu-item-icon-logout { background-position: 0px -162px; } .main-menu-item-icon-logout-selected { background-position: 0px -189px; } .main-menu-item-icon-logout:hover { background-position: 0px -216px; } .main-menu-item-icon-notifications { background-position: 0px -243px; } .main-menu-item-icon-notifications-selected { background-position: 0px -270px; } .main-menu-item-icon-notifications:hover { background-position: 0px -297px; } .main-menu-item-icon-task { background-position: 0px -324px; } .main-menu-item-icon-task-selected { background-position: 0px -351px; } .main-menu-item-icon-task:hover { background-position: 0px -378px; } .app-differential-full { background-position: 0px -405px; } .app-differential { background-position: 0px -466px; } .app-fact-full { background-position: 0px -497px; } .app-fact { background-position: 0px -558px; } .app-mail-full { background-position: 0px -589px; } .app-mail { background-position: 0px -650px; } .app-diffusion-full { background-position: 0px -681px; } .app-diffusion { background-position: 0px -742px; } .app-slowvote-full { background-position: 0px -773px; } .app-slowvote { background-position: 0px -834px; } .app-phriction-full { background-position: 0px -865px; } .app-phriction { background-position: 0px -926px; } .app-maniphest-full { background-position: 0px -957px; } .app-maniphest { background-position: 0px -1018px; } .app-flags-full { background-position: 0px -1049px; } .app-flags { background-position: 0px -1110px; } .app-settings-full { background-position: 0px -1141px; } .app-settings { background-position: 0px -1202px; } .app-applications-full { background-position: 0px -1233px; } .app-applications { background-position: 0px -1294px; } .app-default-full { background-position: 0px -1325px; } .app-default { background-position: 0px -1386px; } .app-people-full { background-position: 0px -1417px; } .app-people { background-position: 0px -1478px; } .app-ponder-full { background-position: 0px -1509px; } .app-ponder { background-position: 0px -1570px; } .app-calendar-full { background-position: 0px -1601px; } .app-calendar { background-position: 0px -1662px; } .app-files-full { background-position: 0px -1693px; } .app-files { background-position: 0px -1754px; } .app-projects-full { background-position: 0px -1785px; } .app-projects { background-position: 0px -1846px; } .app-daemons-full { background-position: 0px -1877px; } .app-daemons { background-position: 0px -1938px; } .app-herald-full { background-position: 0px -1969px; } .app-herald { background-position: 0px -2030px; } .app-countdown-full { background-position: 0px -2061px; } .app-countdown { background-position: 0px -2122px; } .app-conduit-full { background-position: 0px -2153px; } .app-conduit { background-position: 0px -2214px; } .app-feed-full { background-position: 0px -2245px; } .app-feed { background-position: 0px -2306px; } .app-paste-full { background-position: 0px -2337px; } .app-paste { background-position: 0px -2398px; } .app-audit-full { background-position: 0px -2429px; } .app-audit { background-position: 0px -2490px; } .app-uiexample-full { background-position: 0px -2521px; } .app-uiexample { background-position: 0px -2582px; } .app-phpast-full { background-position: 0px -2613px; } .app-phpast { background-position: 0px -2674px; } .app-owners-full { background-position: 0px -2705px; } .app-owners { background-position: 0px -2766px; } .app-phid-full { background-position: 0px -2797px; } .app-phid { background-position: 0px -2858px; } .app-diviner-full { background-position: 0px -2889px; } .app-diviner { background-position: 0px -2950px; } .app-repositories-full { background-position: 0px -2981px; } .app-repositories { background-position: 0px -3042px; } .action-file { background-position: 0px -3073px; } .action-fork { background-position: 0px -3090px; } .action-edit { background-position: 0px -3107px; } .action-flag-0 { background-position: 0px -3124px; } .action-flag-1 { background-position: 0px -3141px; } .action-flag-2 { background-position: 0px -3158px; } .action-flag-3 { background-position: 0px -3175px; } .action-flag-4 { background-position: 0px -3192px; } .action-flag-5 { background-position: 0px -3209px; } .action-flag-6 { background-position: 0px -3226px; } .action-flag-7 { background-position: 0px -3243px; } .action-flag-ghost { background-position: 0px -3260px; }