[Redesign] Add back limited header-color options

Summary: Ref T8099. Adds back basic header color options, which change the logo color instead. Also RAINBOW.

Test Plan:
tested each of the new colors.

{F442284}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D13040

Author: chadlittle

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'e5517713',
+    'core.pkg.css' => '75121d30',
     'core.pkg.js' => '9db3e620',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -153,8 +153,7 @@
     'rsrc/css/phui/phui-workboard-view.css' => '720efdde',
     'rsrc/css/phui/phui-workpanel-view.css' => '015a0cab',
     'rsrc/css/sprite-login.css' => 'a3526809',
-    'rsrc/css/sprite-main-header.css' => '28d01b0b',
-    'rsrc/css/sprite-menu.css' => '02aa815a',
+    'rsrc/css/sprite-menu.css' => 'ab8f6356',
     'rsrc/css/sprite-projects.css' => 'b0d9e24f',
     'rsrc/css/sprite-tokens.css' => '1706b943',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
@@ -305,9 +304,8 @@
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
     'rsrc/image/sprite-login-X2.png' => 'a15918f0',
     'rsrc/image/sprite-login.png' => '8cee4f6e',
-    'rsrc/image/sprite-main-header.png' => '39419fa6',
-    'rsrc/image/sprite-menu-X2.png' => 'e8655658',
-    'rsrc/image/sprite-menu.png' => 'e7e02f73',
+    'rsrc/image/sprite-menu-X2.png' => 'dc41efa4',
+    'rsrc/image/sprite-menu.png' => '8848c09a',
     'rsrc/image/sprite-projects-X2.png' => '8c91c839',
     'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
     'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
@@ -808,8 +806,7 @@
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => '631c4e92',
     'sprite-login-css' => 'a3526809',
-    'sprite-main-header-css' => '28d01b0b',
-    'sprite-menu-css' => '02aa815a',
+    'sprite-menu-css' => 'ab8f6356',
     'sprite-projects-css' => 'b0d9e24f',
     'sprite-tokens-css' => '1706b943',
     'syntax-highlighting-css' => '6b7b24d9',
@@ -2070,7 +2067,6 @@
       'phui-list-view-css',
       'font-fontawesome',
       'phui-font-icon-base-css',
-      'sprite-main-header-css',
       'phui-box-css',
       'phui-object-box-css',
       'phui-timeline-view-css',

resources/celerity/packages.php

@@ -125,7 +125,6 @@
 
     'font-fontawesome',
     'phui-font-icon-base-css',
-    'sprite-main-header-css',
     'phui-box-css',
     'phui-object-box-css',
     'phui-timeline-view-css',

resources/sprite/main_header/applebloom.png

@@ -1,15 +1,65 @@
 {
   "version": 1,
   "sprites": {
-    "eye": {
-      "name": "eye",
-      "rule": ".phabricator-main-menu-eye",
-      "hash": "8848ce0f1d60278ba13a306805107d62"
-    },
-    "logo": {
-      "name": "logo",
-      "rule": ".phabricator-main-menu-logo",
-      "hash": "346032db9e1dbaafc9574664b9581b03"
+    "blindigo-eye": {
+      "name": "blindigo-eye",
+      "rule": ".blindigo-eye",
+      "hash": "fcd3eb2a8d2d8babf59a952b62783282"
+    },
+    "blindigo-logo": {
+      "name": "blindigo-logo",
+      "rule": ".blindigo-logo",
+      "hash": "a22978e621df5126471576510303222f"
+    },
+    "blue-eye": {
+      "name": "blue-eye",
+      "rule": ".blue-eye",
+      "hash": "f7505e56e452c5922f1a275a736d5326"
+    },
+    "blue-logo": {
+      "name": "blue-logo",
+      "rule": ".blue-logo",
+      "hash": "4c6240f153245d56a6bf02bb6796404f"
+    },
+    "dark-eye": {
+      "name": "dark-eye",
+      "rule": ".dark-eye",
+      "hash": "c8112e52666fa1cb509ebb2cdf3a3df5"
+    },
+    "dark-logo": {
+      "name": "dark-logo",
+      "rule": ".dark-logo",
+      "hash": "e3425da87e8f6737d8db0063d064cd7d"
+    },
+    "indigo-eye": {
+      "name": "indigo-eye",
+      "rule": ".indigo-eye",
+      "hash": "497b57bc1709a88fa68b14dc88a2a253"
+    },
+    "indigo-logo": {
+      "name": "indigo-logo",
+      "rule": ".indigo-logo",
+      "hash": "c7223567a77c46fbab571170f0a76ae6"
+    },
+    "rainbow-eye": {
+      "name": "rainbow-eye",
+      "rule": ".rainbow-eye",
+      "hash": "2c63171eeb8ba6acb645219fdf2585b1"
+    },
+    "rainbow-logo": {
+      "name": "rainbow-logo",
+      "rule": ".rainbow-logo",
+      "hash": "eca0c685cb9524bff513a5f7eab7c6e5"
+    },
+    "red-eye": {
+      "name": "red-eye",
+      "rule": ".red-eye",
+      "hash": "97a9a11ecbeee1fbb8a7c8ea406e4be4"
+    },
+    "red-logo": {
+      "name": "red-logo",
+      "rule": ".red-logo",
+      "hash": "1126a79154d24242d3f72e868b95a445"
     }
   },
   "scales": [

resources/sprite/main_header/blindigo.png

@@ -29,7 +29,6 @@
 $sheets = array(
   'menu' => $generator->buildMenuSheet(),
   'tokens' => $generator->buildTokenSheet(),
-  'main-header' => $generator->buildMainHeaderSheet(),
   'login' => $generator->buildLoginSheet(),
   'projects' => $generator->buildProjectsSheet(),
 );

resources/sprite/main_header/blue.png

@@ -5,18 +5,28 @@ final class CeleritySpriteGenerator {
   public function buildMenuSheet() {
     $sprites = array();
 
-    $sources = array(
-      'logo' => array(
+    $colors = array(
+      'dark',
+      'red',
+      'blue',
+      'indigo',
+      'blindigo',
+      'rainbow',
+    );
+
+    $sources = array();
+    foreach ($colors as $color) {
+      $sources[$color.'-logo'] = array(
         'x' => 96,
         'y' => 40,
-        'css' => '.phabricator-main-menu-logo',
-      ),
-      'eye' => array(
+        'css' => '.'.$color.'-logo',
+      );
+      $sources[$color.'-eye'] = array(
         'x' => 40,
         'y' => 40,
-        'css' => '.phabricator-main-menu-eye',
-      ),
-    );
+        'css' => '.'.$color.'-eye',
+      );
+    }
 
     $scales = array(
       '1x' => 1,
@@ -144,32 +154,6 @@ public function buildLoginSheet() {
     return $sheet;
   }
 
-  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;
-  }
-
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
     return $root.'/resources/sprite/'.$to_path;

resources/sprite/main_header/dark.png

@@ -20,16 +20,18 @@ public function getGroup() {
   }
 
   public function getOptions() {
-    $manifest = PHUIIconView::getSheetManifest('main-header');
     $custom_header_example =
       PhabricatorCustomHeaderConfigType::getExampleConfig();
     $experimental_link = 'https://secure.phabricator.com/T4214';
 
-    $options = array();
-    foreach (array_keys($manifest) as $sprite_name) {
-      $key = substr($sprite_name, strlen('main-header-'));
-      $options[$key] = $key;
-    }
+    $options = array(
+      'blindigo' => 'blindigo',
+      'blue' => 'blue',
+      'dark' => 'dark',
+      'indigo' => 'indigo',
+      'red' => 'red',
+      'rainbow' => 'rainbow',
+    );
 
     $example = <<<EOJSON
 [

resources/sprite/main_header/fluttershy.png

@@ -275,6 +275,8 @@ private function renderPhabricatorLogo() {
       }
     }
 
+    $color = PhabricatorEnv::getEnvConfig('ui.header-color');
+
     return phutil_tag(
       'a',
       array(
@@ -291,13 +293,13 @@ private function renderPhabricatorLogo() {
         phutil_tag(
           'span',
           array(
-            'class' => 'sprite-menu phabricator-main-menu-eye',
+            'class' => 'sprite-menu phabricator-main-menu-eye '.$color.'-eye',
           ),
           ''),
           phutil_tag(
           'span',
           array(
-            'class' => 'sprite-menu phabricator-main-menu-logo',
+            'class' => 'sprite-menu phabricator-main-menu-logo '.$color.'-logo',
             'style' => $style_logo,
           ),
           ''),