[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

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 @@ return array(
     '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' => 'ab8f6356',
-    'rsrc/css/sprite-menu.css' => '02aa815a',
     'rsrc/css/sprite-projects.css' => 'b0d9e24f',
     'rsrc/css/sprite-tokens.css' => '1706b943',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
@@ -305,9 +304,8 @@ return array(
     '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' => 'dc41efa4',
-    'rsrc/image/sprite-menu-X2.png' => 'e8655658',
+    'rsrc/image/sprite-menu.png' => '8848c09a',
-    'rsrc/image/sprite-menu.png' => 'e7e02f73',
     'rsrc/image/sprite-projects-X2.png' => '8c91c839',
     'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
     'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
@@ -808,8 +806,7 @@ return array(
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => '631c4e92',
     'sprite-login-css' => 'a3526809',
-    'sprite-main-header-css' => '28d01b0b',
+    'sprite-menu-css' => 'ab8f6356',
-    'sprite-menu-css' => '02aa815a',
     'sprite-projects-css' => 'b0d9e24f',
     'sprite-tokens-css' => '1706b943',
     'syntax-highlighting-css' => '6b7b24d9',
@@ -2070,7 +2067,6 @@ return array(
       '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 @@ return array(
 
     'font-fontawesome',
     'phui-font-icon-base-css',
-    'sprite-main-header-css',
     'phui-box-css',
     'phui-object-box-css',
     'phui-timeline-view-css',

resources/sprite/manifest/main-header.json

@@ -1,65 +0,0 @@
-{
-  "version": 1,
-  "sprites": {
-    "main-header-applebloom": {
-      "name": "main-header-applebloom",
-      "rule": ".main-header-applebloom",
-      "hash": "64822776b129e724709983db1ac5a712"
-    },
-    "main-header-blindigo": {
-      "name": "main-header-blindigo",
-      "rule": ".main-header-blindigo",
-      "hash": "8c4f5b1f1f3faceb6ca6e8278a1b082f"
-    },
-    "main-header-blue": {
-      "name": "main-header-blue",
-      "rule": ".main-header-blue",
-      "hash": "b5dd317b7bd35e0592b3f4b66267437c"
-    },
-    "main-header-dark": {
-      "name": "main-header-dark",
-      "rule": ".main-header-dark",
-      "hash": "817815d84c0c935b4875f6ecc7dbb526"
-    },
-    "main-header-fluttershy": {
-      "name": "main-header-fluttershy",
-      "rule": ".main-header-fluttershy",
-      "hash": "55d4e9f813cf354693290105cf83cf78"
-    },
-    "main-header-green": {
-      "name": "main-header-green",
-      "rule": ".main-header-green",
-      "hash": "c230f09e307d167fab3ea0d8c3b33755"
-    },
-    "main-header-indigo": {
-      "name": "main-header-indigo",
-      "rule": ".main-header-indigo",
-      "hash": "a27394ff1eff4d24398ec57e54d7f5fd"
-    },
-    "main-header-nightmaremoon": {
-      "name": "main-header-nightmaremoon",
-      "rule": ".main-header-nightmaremoon",
-      "hash": "9e7cc7b18d2132d2dd47586ba0cd6400"
-    },
-    "main-header-red": {
-      "name": "main-header-red",
-      "rule": ".main-header-red",
-      "hash": "3f12cc098afddb8e6c830ef761dcaa61"
-    },
-    "main-header-scootaloo": {
-      "name": "main-header-scootaloo",
-      "rule": ".main-header-scootaloo",
-      "hash": "8cedc359dccab1bbd49cbc69940f566a"
-    },
-    "main-header-yellow": {
-      "name": "main-header-yellow",
-      "rule": ".main-header-yellow",
-      "hash": "d920e70a6d2662cfb83e1d7e4b4000fd"
-    }
-  },
-  "scales": [
-    1
-  ],
-  "header": "\/**\n * @provides sprite-main-header-css\n * @generated\n *\/\n\n.sprite-main-header {\n  background-image: url(\/rsrc\/image\/sprite-main-header.png);\n  background-repeat: repeat-x;\n}\n\n\n",
-  "type": "repeat-x"
-}

resources/sprite/manifest/menu.json

@@ -1,15 +1,65 @@
 {
   "version": 1,
   "sprites": {
-    "eye": {
+    "blindigo-eye": {
-      "name": "eye",
+      "name": "blindigo-eye",
-      "rule": ".phabricator-main-menu-eye",
+      "rule": ".blindigo-eye",
-      "hash": "8848ce0f1d60278ba13a306805107d62"
+      "hash": "fcd3eb2a8d2d8babf59a952b62783282"
     },
-    "logo": {
+    "blindigo-logo": {
-      "name": "logo",
+      "name": "blindigo-logo",
-      "rule": ".phabricator-main-menu-logo",
+      "rule": ".blindigo-logo",
-      "hash": "346032db9e1dbaafc9574664b9581b03"
+      "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": [

scripts/celerity/generate_sprites.php

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

src/applications/celerity/CeleritySpriteGenerator.php

@@ -5,18 +5,28 @@ final class CeleritySpriteGenerator {
   public function buildMenuSheet() {
     $sprites = array();
 
-    $sources = array(
+    $colors = array(
-      'logo' => 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',
+        'css' => '.'.$color.'-logo',
-      ),
+      );
-      'eye' => array(
+      $sources[$color.'-eye'] = array(
         'x' => 40,
         'y' => 40,
-        'css' => '.phabricator-main-menu-eye',
+        'css' => '.'.$color.'-eye',
-      ),
+      );
-    );
+    }
 
     $scales = array(
       '1x' => 1,
@@ -144,32 +154,6 @@ final class CeleritySpriteGenerator {
     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;

src/applications/config/option/PhabricatorUIConfigOptions.php

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

src/view/page/menu/PhabricatorMainMenuView.php

@@ -275,6 +275,8 @@ final class PhabricatorMainMenuView extends AphrontView {
       }
     }
 
+    $color = PhabricatorEnv::getEnvConfig('ui.header-color');
+
     return phutil_tag(
       'a',
       array(
@@ -291,13 +293,13 @@ final class PhabricatorMainMenuView extends AphrontView {
         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,
           ),
           ''),

webroot/rsrc/css/sprite-main-header.css

@@ -1,56 +0,0 @@
-/**
- * @provides sprite-main-header-css
- * @generated
- */
-
-.sprite-main-header {
-  background-image: url(/rsrc/image/sprite-main-header.png);
-  background-repeat: repeat-x;
-}
-
-
-
-
-.main-header-applebloom {
-  background-position: 0px 0px;
-}
-
-.main-header-blindigo {
-  background-position: 0px -45px;
-}
-
-.main-header-blue {
-  background-position: 0px -90px;
-}
-
-.main-header-dark {
-  background-position: 0px -135px;
-}
-
-.main-header-fluttershy {
-  background-position: 0px -180px;
-}
-
-.main-header-green {
-  background-position: 0px -225px;
-}
-
-.main-header-indigo {
-  background-position: 0px -270px;
-}
-
-.main-header-nightmaremoon {
-  background-position: 0px -315px;
-}
-
-.main-header-red {
-  background-position: 0px -360px;
-}
-
-.main-header-scootaloo {
-  background-position: 0px -405px;
-}
-
-.main-header-yellow {
-  background-position: 0px -450px;
-}

webroot/rsrc/css/sprite-menu.css

@@ -13,15 +13,55 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-menu {
     background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 97px 82px;
+    background-size: 194px 205px;
   }
 }
 
 
-.phabricator-main-menu-logo {
+.dark-logo {
   background-position: 0px 0px;
 }
 
-.phabricator-main-menu-eye {
+.dark-eye {
+  background-position: 0px -82px;
+}
+
+.red-logo {
+  background-position: -97px 0px;
+}
+
+.red-eye {
+  background-position: -41px -82px;
+}
+
+.blue-logo {
   background-position: 0px -41px;
 }
+
+.blue-eye {
+  background-position: -82px -82px;
+}
+
+.indigo-logo {
+  background-position: -97px -41px;
+}
+
+.indigo-eye {
+  background-position: -123px -82px;
+}
+
+.blindigo-logo {
+  background-position: 0px -123px;
+}
+
+.blindigo-eye {
+  background-position: -97px -123px;
+}
+
+.rainbow-logo {
+  background-position: 0px -164px;
+}
+
+.rainbow-eye {
+  background-position: -97px -164px;
+}