[Summary view] [Print] [Text view]

   1  <?php
   2  
   3  final class CeleritySpriteGenerator {
   4  
   5    public function buildMenuSheet() {
   6      $sprites = array();
   7  
   8      $sources = array(
   9        'seen_read_all' => array(
  10          'x' => 18,
  11          'y' => 18,
  12          'css' =>
  13            '.alert-notifications .phabricator-main-menu-alert-icon',
  14        ),
  15        'seen_have_unread' => array(
  16          'x' => 18,
  17          'y' => 18,
  18          'css' =>
  19            '.alert-notifications:hover .phabricator-main-menu-alert-icon',
  20        ),
  21        'unseen_any' => array(
  22          'x' => 18,
  23          'y' => 18,
  24          'css' =>
  25            '.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
  26        ),
  27        'arrow-right' => array(
  28          'x' => 9,
  29          'y' => 31,
  30          'css' => '.phabricator-crumb-divider',
  31        ),
  32        'search' => array(
  33          'x' => 24,
  34          'y' => 24,
  35          'css' => '.menu-icon-search',
  36        ),
  37        'search_blue' => array(
  38          'x' => 24,
  39          'y' => 24,
  40          'css' => '.menu-icon-search-blue',
  41        ),
  42        'new' => array(
  43          'x' => 24,
  44          'y' => 24,
  45          'css' => '.menu-icon-new',
  46        ),
  47        'new_blue' => array(
  48          'x' => 24,
  49          'y' => 24,
  50          'css' => '.menu-icon-new-blue',
  51        ),
  52        'info-sm' => array(
  53          'x' => 28,
  54          'y' => 28,
  55          'css' => '.menu-icon-info-sm',
  56        ),
  57        'logout-sm' => array(
  58          'x' => 28,
  59          'y' => 28,
  60          'css' => '.menu-icon-logout-sm',
  61        ),
  62        'new-sm' => array(
  63          'x' => 28,
  64          'y' => 28,
  65          'css' => '.menu-icon-new-sm',
  66        ),
  67        'settings-sm' => array(
  68          'x' => 28,
  69          'y' => 28,
  70          'css' => '.menu-icon-settings-sm',
  71        ),
  72        'power' => array(
  73          'x' => 28,
  74          'y' => 28,
  75          'css' => '.menu-icon-power',
  76        ),
  77        'app' => array(
  78          'x' => 24,
  79          'y' => 24,
  80          'css' => '.menu-icon-app',
  81        ),
  82        'app_blue' => array(
  83          'x' => 24,
  84          'y' => 24,
  85          'css' => '.menu-icon-app-blue',
  86        ),
  87        'logo' => array(
  88          'x' => 96,
  89          'y' => 26,
  90          'css' => '.phabricator-main-menu-logo',
  91        ),
  92        'eye' => array(
  93          'x' => 40,
  94          'y' => 40,
  95          'css' => '.phabricator-main-menu-eye',
  96        ),
  97        'conf-off' => array(
  98          'x' => 18,
  99          'y' => 18,
 100          'css' =>
 101            '.alert-notifications .phabricator-main-menu-message-icon',
 102        ),
 103        'conf-hover' => array(
 104          'x' => 18,
 105          'y' => 18,
 106          'css' =>
 107            '.alert-notifications:hover .phabricator-main-menu-message-icon',
 108        ),
 109        'conf-unseen' => array(
 110          'x' => 18,
 111          'y' => 18,
 112          'css' =>
 113            '.alert-notifications.message-unread '.
 114            '.phabricator-main-menu-message-icon',
 115        ),
 116      );
 117  
 118      $scales = array(
 119        '1x' => 1,
 120        '2x' => 2,
 121      );
 122  
 123      $template = new PhutilSprite();
 124      foreach ($sources as $name => $spec) {
 125        $sprite = id(clone $template)
 126          ->setName($name)
 127          ->setSourceSize($spec['x'], $spec['y'])
 128          ->setTargetCSS($spec['css']);
 129  
 130        foreach ($scales as $scale_name => $scale) {
 131          $path = 'menu_'.$scale_name.'/'.$name.'.png';
 132          $path = $this->getPath($path);
 133  
 134          $sprite->setSourceFile($path, $scale);
 135        }
 136        $sprites[] = $sprite;
 137      }
 138  
 139      $sheet = $this->buildSheet('menu', true);
 140      $sheet->setScales($scales);
 141      foreach ($sprites as $sprite) {
 142        $sheet->addSprite($sprite);
 143      }
 144  
 145      return $sheet;
 146    }
 147  
 148    public function buildTokenSheet() {
 149      $icons = $this->getDirectoryList('tokens_1x');
 150      $scales = array(
 151        '1x' => 1,
 152        '2x' => 2,
 153      );
 154      $template = id(new PhutilSprite())
 155        ->setSourceSize(16, 16);
 156  
 157      $sprites = array();
 158      $prefix = 'tokens_';
 159      foreach ($icons as $icon) {
 160        $sprite = id(clone $template)
 161          ->setName('tokens-'.$icon)
 162          ->setTargetCSS('.tokens-'.$icon);
 163  
 164        foreach ($scales as $scale_key => $scale) {
 165          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
 166          $sprite->setSourceFile($path, $scale);
 167        }
 168        $sprites[] = $sprite;
 169      }
 170  
 171      $sheet = $this->buildSheet('tokens', true);
 172      $sheet->setScales($scales);
 173      foreach ($sprites as $sprite) {
 174        $sheet->addSprite($sprite);
 175      }
 176  
 177      return $sheet;
 178    }
 179  
 180    public function buildProjectsSheet() {
 181      $icons = $this->getDirectoryList('projects_1x');
 182      $scales = array(
 183        '1x' => 1,
 184        '2x' => 2,
 185      );
 186      $template = id(new PhutilSprite())
 187        ->setSourceSize(50, 50);
 188  
 189      $sprites = array();
 190      $prefix = 'projects-';
 191      foreach ($icons as $icon) {
 192        $sprite = id(clone $template)
 193          ->setName($prefix.$icon)
 194          ->setTargetCSS('.'.$prefix.$icon);
 195  
 196        foreach ($scales as $scale_key => $scale) {
 197          $path = $this->getPath('projects_'.$scale_key.'/'.$icon.'.png');
 198          $sprite->setSourceFile($path, $scale);
 199        }
 200        $sprites[] = $sprite;
 201      }
 202  
 203      $sheet = $this->buildSheet('projects', true);
 204      $sheet->setScales($scales);
 205      foreach ($sprites as $sprite) {
 206        $sheet->addSprite($sprite);
 207      }
 208  
 209      return $sheet;
 210    }
 211  
 212    public function buildPaymentsSheet() {
 213      $icons = $this->getDirectoryList('payments_2x');
 214      $scales = array(
 215        '2x' => 1,
 216      );
 217      $template = id(new PhutilSprite())
 218        ->setSourceSize(60, 32);
 219  
 220      $sprites = array();
 221      $prefix = 'payments_';
 222      foreach ($icons as $icon) {
 223        $sprite = id(clone $template)
 224          ->setName('payments-'.$icon)
 225          ->setTargetCSS('.payments-'.$icon);
 226  
 227        foreach ($scales as $scale_key => $scale) {
 228          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
 229          $sprite->setSourceFile($path, $scale);
 230        }
 231        $sprites[] = $sprite;
 232      }
 233  
 234      $sheet = $this->buildSheet('payments', true);
 235      $sheet->setScales($scales);
 236      foreach ($sprites as $sprite) {
 237        $sheet->addSprite($sprite);
 238      }
 239  
 240      return $sheet;
 241    }
 242  
 243  
 244    public function buildConpherenceSheet() {
 245      $name = 'conpherence';
 246      $icons = $this->getDirectoryList($name.'_1x');
 247      $scales = array(
 248        '1x' => 1,
 249        '2x' => 2,
 250      );
 251      $template = id(new PhutilSprite())
 252        ->setSourceSize(32, 32);
 253  
 254      $sprites = array();
 255      foreach ($icons as $icon) {
 256        $color = preg_match('/_on/', $icon) ? 'on' : 'off';
 257  
 258        $prefix = $name.'_';
 259  
 260        $sprite = id(clone $template)
 261          ->setName($prefix.$icon);
 262  
 263        $tcss = array();
 264        $tcss[] = '.'.$prefix.$icon;
 265        if ($color == 'on') {
 266          $class = str_replace('_on', '_off', $prefix.$icon);
 267          $tcss[] = '.device-desktop .'.$class.':hover ';
 268        }
 269  
 270        $sprite->setTargetCSS(implode(', ', $tcss));
 271  
 272        foreach ($scales as $scale_key => $scale) {
 273          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
 274          $sprite->setSourceFile($path, $scale);
 275        }
 276        $sprites[] = $sprite;
 277      }
 278  
 279      $sheet = $this->buildSheet($name, true);
 280      $sheet->setScales($scales);
 281      foreach ($sprites as $sprite) {
 282        $sheet->addSprite($sprite);
 283      }
 284  
 285      return $sheet;
 286    }
 287  
 288    public function buildDocsSheet() {
 289      $icons = $this->getDirectoryList('docs_1x');
 290      $scales = array(
 291        '1x' => 1,
 292        '2x' => 2,
 293      );
 294      $template = id(new PhutilSprite())
 295        ->setSourceSize(32, 32);
 296  
 297      $sprites = array();
 298      $prefix = 'docs_';
 299      foreach ($icons as $icon) {
 300        $sprite = id(clone $template)
 301          ->setName($prefix.$icon)
 302          ->setTargetCSS('.'.$prefix.$icon);
 303  
 304        foreach ($scales as $scale_key => $scale) {
 305          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
 306          $sprite->setSourceFile($path, $scale);
 307        }
 308        $sprites[] = $sprite;
 309      }
 310  
 311      $sheet = $this->buildSheet('docs', true);
 312      $sheet->setScales($scales);
 313      foreach ($sprites as $sprite) {
 314        $sheet->addSprite($sprite);
 315      }
 316  
 317      return $sheet;
 318    }
 319  
 320    public function buildLoginSheet() {
 321      $icons = $this->getDirectoryList('login_1x');
 322      $scales = array(
 323        '1x' => 1,
 324        '2x' => 2,
 325      );
 326      $template = id(new PhutilSprite())
 327        ->setSourceSize(34, 34);
 328  
 329      $sprites = array();
 330      $prefix = 'login_';
 331      foreach ($icons as $icon) {
 332        $sprite = id(clone $template)
 333          ->setName('login-'.$icon)
 334          ->setTargetCSS('.login-'.$icon);
 335  
 336        foreach ($scales as $scale_key => $scale) {
 337          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
 338          $sprite->setSourceFile($path, $scale);
 339        }
 340        $sprites[] = $sprite;
 341      }
 342  
 343      $sheet = $this->buildSheet('login', true);
 344      $sheet->setScales($scales);
 345      foreach ($sprites as $sprite) {
 346        $sheet->addSprite($sprite);
 347      }
 348  
 349      return $sheet;
 350    }
 351  
 352    public function buildGradientSheet() {
 353      $gradients = $this->getDirectoryList('gradients');
 354  
 355      $template = new PhutilSprite();
 356  
 357      $unusual_heights = array(
 358        'breadcrumbs'     => 31,
 359        'grey-header'     => 70,
 360        'dark-grey-header' => 70,
 361        'lightblue-header' => 240,
 362        'lightgreen-header' => 240,
 363        'lightviolet-header' => 240,
 364        'lightred-header' => 240,
 365      );
 366  
 367      $sprites = array();
 368      foreach ($gradients as $gradient) {
 369        $path = $this->getPath('gradients/'.$gradient.'.png');
 370        $sprite = id(clone $template)
 371          ->setName('gradient-'.$gradient)
 372          ->setSourceFile($path)
 373          ->setTargetCSS('.gradient-'.$gradient);
 374  
 375        $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
 376  
 377        $sprites[] = $sprite;
 378      }
 379  
 380      $sheet = $this->buildSheet(
 381        'gradient',
 382        false,
 383        PhutilSpriteSheet::TYPE_REPEAT_X);
 384      foreach ($sprites as $sprite) {
 385        $sheet->addSprite($sprite);
 386      }
 387  
 388      return $sheet;
 389    }
 390  
 391    public function buildMainHeaderSheet() {
 392      $gradients = $this->getDirectoryList('main_header');
 393      $template = new PhutilSprite();
 394  
 395      $sprites = array();
 396      foreach ($gradients as $gradient) {
 397        $path = $this->getPath('main_header/'.$gradient.'.png');
 398        $sprite = id(clone $template)
 399          ->setName('main-header-'.$gradient)
 400          ->setSourceFile($path)
 401          ->setTargetCSS('.main-header-'.$gradient);
 402        $sprite->setSourceSize(6, 44);
 403        $sprites[] = $sprite;
 404      }
 405  
 406      $sheet = $this->buildSheet('main-header',
 407        false,
 408        PhutilSpriteSheet::TYPE_REPEAT_X);
 409  
 410      foreach ($sprites as $sprite) {
 411        $sheet->addSprite($sprite);
 412      }
 413  
 414      return $sheet;
 415    }
 416  
 417  
 418    public function buildAppsSheet() {
 419      return $this->buildAppsSheetVariant(1);
 420    }
 421  
 422    public function buildAppsLargeSheet() {
 423      return $this->buildAppsSheetVariant(2);
 424    }
 425  
 426    public function buildAppsXLargeSheet() {
 427      return $this->buildAppsSheetVariant(3);
 428    }
 429  
 430    private function buildAppsSheetVariant($variant) {
 431  
 432      if ($variant == 1) {
 433        $scales = array(
 434          '1x' => 1,
 435          '2x' => 2,
 436          '4x' => 4,
 437        );
 438        $variant_name = 'apps';
 439        $variant_short = '';
 440        $size_x = 14;
 441        $size_y = 14;
 442  
 443        $colors = array(
 444          'dark'  => 'dark',
 445        );
 446      } else if ($variant == 2) {
 447        $scales = array(
 448          '2x' => 1,
 449          '4x' => 2,
 450        );
 451        $variant_name = 'apps-large';
 452        $variant_short = '-large';
 453        $size_x = 28;
 454        $size_y = 28;
 455  
 456        $colors = array(
 457          'dark'  => 'dark',
 458        );
 459      } else {
 460        $scales = array(
 461          '4x' => 1,
 462        );
 463        $variant_name = 'apps-xlarge';
 464        $variant_short = '-xlarge';
 465        $size_x = 56;
 466        $size_y = 56;
 467  
 468        $colors = array(
 469          'dark'  => 'dark',
 470        );
 471      }
 472  
 473      $apps = $this->getDirectoryList('apps_dark_1x');
 474  
 475      $template = id(new PhutilSprite())
 476        ->setSourceSize($size_x, $size_y);
 477  
 478      $sprites = array();
 479      foreach ($apps as $app) {
 480        foreach ($colors as $color => $color_path) {
 481  
 482          $css = '.apps-'.$app.'-'.$color.$variant_short;
 483          $sprite = id(clone $template)
 484            ->setName('apps-'.$app.'-'.$color.$variant_short)
 485            ->setTargetCSS($css);
 486  
 487          foreach ($scales as $scale_name => $scale) {
 488            $path = $this->getPath(
 489              'apps_'.$color_path.'_'.$scale_name.'/'.$app.'.png');
 490            $sprite->setSourceFile($path, $scale);
 491          }
 492  
 493          $sprites[] = $sprite;
 494        }
 495      }
 496  
 497      $sheet = $this->buildSheet($variant_name, count($scales) > 1);
 498      $sheet->setScales($scales);
 499      foreach ($sprites as $sprite) {
 500        $sheet->addSprite($sprite);
 501      }
 502  
 503      return $sheet;
 504    }
 505  
 506  
 507    private function getPath($to_path = null) {
 508      $root = dirname(phutil_get_library_root('phabricator'));
 509      return $root.'/resources/sprite/'.$to_path;
 510    }
 511  
 512    private function getDirectoryList($dir) {
 513      $path = $this->getPath($dir);
 514  
 515      $result = array();
 516  
 517      $images = Filesystem::listDirectory($path, $include_hidden = false);
 518      foreach ($images as $image) {
 519        if (!preg_match('/\.png$/', $image)) {
 520          throw new Exception(
 521            "Expected file '{$image}' in '{$path}' to be a sprite source ".
 522            "ending in '.png'.");
 523        }
 524        $result[] = substr($image, 0, -4);
 525      }
 526  
 527      return $result;
 528    }
 529  
 530    private function buildSheet(
 531      $name,
 532      $has_retina,
 533      $type = null,
 534      $extra_css = '') {
 535  
 536      $sheet = new PhutilSpriteSheet();
 537  
 538      $at = '@';
 539  
 540      switch ($type) {
 541        case PhutilSpriteSheet::TYPE_STANDARD:
 542        default:
 543          $type = PhutilSpriteSheet::TYPE_STANDARD;
 544          $repeat_rule = 'no-repeat';
 545          break;
 546        case PhutilSpriteSheet::TYPE_REPEAT_X:
 547          $repeat_rule = 'repeat-x';
 548          break;
 549        case PhutilSpriteSheet::TYPE_REPEAT_Y:
 550          $repeat_rule = 'repeat-y';
 551          break;
 552      }
 553  
 554      $retina_rules = null;
 555      if ($has_retina) {
 556        $retina_rules = <<<EOCSS
 557  @media
 558  only screen and (min-device-pixel-ratio: 1.5),
 559  only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 560    .sprite-{$name}{$extra_css} {
 561      background-image: url(/rsrc/image/sprite-{$name}-X2.png);
 562      background-size: {X}px {Y}px;
 563    }
 564  }
 565  EOCSS;
 566      }
 567  
 568      $sheet->setSheetType($type);
 569      $sheet->setCSSHeader(<<<EOCSS
 570  /**
 571   * @provides sprite-{$name}-css
 572   * {$at}generated
 573   */
 574  
 575  .sprite-{$name}{$extra_css} {
 576    background-image: url(/rsrc/image/sprite-{$name}.png);
 577    background-repeat: {$repeat_rule};
 578  }
 579  
 580  {$retina_rules}
 581  
 582  EOCSS
 583  );
 584  
 585      return $sheet;
 586    }
 587  }