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
2024-09-19 16:58:48 +02:00 · 2012-08-14 14:17:19 -07:00 · 2012-08-14 14:17:19 -07:00 · 27b86d5132
commit 27b86d5132
parent 1855ed4bee
3 changed files with 393 additions and 0 deletions
--- a/scripts/celerity/generate_sprites.php
+++ b/scripts/celerity/generate_sprites.php
@ -0,0 +1,157 @@
+#!/usr/bin/env php
+<?php
+
+/*
+ * Copyright 2012 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require_once dirname(dirname(__FILE__)).'/__init_script__.php';
+
+$args = new PhutilArgumentParser($argv);
+$args->setTagline('regenerate CSS sprite sheets');
+$args->setSynopsis(<<<EOHELP
+**sprites**
+    Rebuild CSS sprite sheets.
+
+EOHELP
+);
+$args->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(<<<EOCSS
+/**
+ * @provides autosprite-css
+ */
+
+.autosprite {
+  background-image: url(/rsrc/image/autosprite.png);
+  background-repeat: no-repeat;
+}
+EOCSS
+);
+
+$menu_normal_template = id(new PhutilSprite())
+  ->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";
--- a/webroot/rsrc/css/autosprite.css
+++ 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;
+}
--- a/webroot/rsrc/image/autosprite.png
+++ b/webroot/rsrc/image/autosprite.png