Index: resources/sprite/manifest/main-header.json =================================================================== --- /dev/null +++ resources/sprite/manifest/main-header.json @@ -0,0 +1,55 @@ +{ + "version" : 1, + "sprites" : { + "main-header-applebloom" : { + "name" : "main-header-applebloom", + "rule" : ".main-header-applebloom", + "hash" : "64822776b129e724709983db1ac5a712" + }, + "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-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" +} Index: scripts/celerity/generate_sprites.php =================================================================== --- scripts/celerity/generate_sprites.php +++ scripts/celerity/generate_sprites.php @@ -38,6 +38,7 @@ 'tokens' => $generator->buildTokenSheet(), 'docs' => $generator->buildDocsSheet(), 'gradient' => $generator->buildGradientSheet(), + 'main-header' => $generator->buildMainHeaderSheet(), 'login' => $generator->buildLoginSheet(), 'status' => $generator->buildStatusSheet(), 'projects' => $generator->buildProjectsSheet(), Index: src/__celerity_resource_map__.php =================================================================== --- src/__celerity_resource_map__.php +++ src/__celerity_resource_map__.php @@ -546,6 +546,13 @@ 'disk' => '/rsrc/image/phrequent_inactive.png', 'type' => 'png', ), + '/rsrc/image/search-white.png' => + array( + 'hash' => '5d5236170c4097fa7e7cbb32e737c9d8', + 'uri' => '/res/5d523617/rsrc/image/search-white.png', + 'disk' => '/rsrc/image/search-white.png', + 'type' => 'png', + ), '/rsrc/image/search.png' => array( 'hash' => 'ff7da044e6f923b8f569dec11f97e5e5', @@ -665,6 +672,13 @@ 'disk' => '/rsrc/image/sprite-login.png', 'type' => 'png', ), + '/rsrc/image/sprite-main-header.png' => + array( + 'hash' => 'a00aa3b33178899d6bd7979b475ae559', + 'uri' => '/res/a00aa3b3/rsrc/image/sprite-main-header.png', + 'disk' => '/rsrc/image/sprite-main-header.png', + 'type' => 'png', + ), '/rsrc/image/sprite-menu-X2.png' => array( 'hash' => '63b649a6ccba7bf76bc9456dc5dfb12b', @@ -3367,7 +3381,7 @@ ), 'phabricator-main-menu-view' => array( - 'uri' => '/res/95ff522a/rsrc/css/application/base/main-menu-view.css', + 'uri' => '/res/44456bed/rsrc/css/application/base/main-menu-view.css', 'type' => 'css', 'requires' => array( @@ -4268,6 +4282,15 @@ ), 'disk' => '/rsrc/css/sprite-login.css', ), + 'sprite-main-header-css' => + array( + 'uri' => '/res/b788fd75/rsrc/css/sprite-main-header.css', + 'type' => 'css', + 'requires' => + array( + ), + 'disk' => '/rsrc/css/sprite-main-header.css', + ), 'sprite-menu-css' => array( 'uri' => '/res/764ab039/rsrc/css/sprite-menu.css', @@ -4343,7 +4366,7 @@ ), array( 'packages' => array( - '152ef0e5' => + '33d9080b' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4392,7 +4415,7 @@ 41 => 'phabricator-tag-view-css', 42 => 'phui-list-view-css', ), - 'uri' => '/res/pkg/152ef0e5/core.pkg.css', + 'uri' => '/res/pkg/33d9080b/core.pkg.css', 'type' => 'css', ), '2c1dba03' => @@ -4584,15 +4607,15 @@ ), 'reverse' => array( - 'aphront-dialog-view-css' => '152ef0e5', - 'aphront-error-view-css' => '152ef0e5', - 'aphront-list-filter-view-css' => '152ef0e5', - 'aphront-pager-view-css' => '152ef0e5', - 'aphront-panel-view-css' => '152ef0e5', - 'aphront-table-view-css' => '152ef0e5', - 'aphront-tokenizer-control-css' => '152ef0e5', - 'aphront-tooltip-css' => '152ef0e5', - 'aphront-typeahead-control-css' => '152ef0e5', + 'aphront-dialog-view-css' => '33d9080b', + 'aphront-error-view-css' => '33d9080b', + 'aphront-list-filter-view-css' => '33d9080b', + 'aphront-pager-view-css' => '33d9080b', + 'aphront-panel-view-css' => '33d9080b', + 'aphront-table-view-css' => '33d9080b', + 'aphront-tokenizer-control-css' => '33d9080b', + 'aphront-tooltip-css' => '33d9080b', + 'aphront-typeahead-control-css' => '33d9080b', 'differential-changeset-view-css' => '67248472', 'differential-core-view-css' => '67248472', 'differential-inline-comment-editor' => '92f459f0', @@ -4606,7 +4629,7 @@ 'differential-table-of-contents-css' => '67248472', 'diffusion-commit-view-css' => '7aa115b4', 'diffusion-icons-css' => '7aa115b4', - 'global-drag-and-drop-css' => '152ef0e5', + 'global-drag-and-drop-css' => '33d9080b', 'inline-comment-summary-css' => '67248472', 'javelin-aphlict' => '2c1dba03', 'javelin-behavior' => '3e3be199', @@ -4681,56 +4704,56 @@ 'javelin-util' => '3e3be199', 'javelin-vector' => '3e3be199', 'javelin-workflow' => '3e3be199', - 'lightbox-attachment-css' => '152ef0e5', + 'lightbox-attachment-css' => '33d9080b', 'maniphest-task-summary-css' => '49898640', - 'phabricator-action-list-view-css' => '152ef0e5', - 'phabricator-application-launch-view-css' => '152ef0e5', + 'phabricator-action-list-view-css' => '33d9080b', + 'phabricator-application-launch-view-css' => '33d9080b', 'phabricator-busy' => '2c1dba03', 'phabricator-content-source-view-css' => '67248472', - 'phabricator-core-css' => '152ef0e5', - 'phabricator-crumbs-view-css' => '152ef0e5', + 'phabricator-core-css' => '33d9080b', + 'phabricator-crumbs-view-css' => '33d9080b', 'phabricator-drag-and-drop-file-upload' => '92f459f0', 'phabricator-dropdown-menu' => '2c1dba03', 'phabricator-file-upload' => '2c1dba03', - 'phabricator-filetree-view-css' => '152ef0e5', - 'phabricator-flag-css' => '152ef0e5', + 'phabricator-filetree-view-css' => '33d9080b', + 'phabricator-flag-css' => '33d9080b', 'phabricator-hovercard' => '2c1dba03', - 'phabricator-jump-nav' => '152ef0e5', + 'phabricator-jump-nav' => '33d9080b', 'phabricator-keyboard-shortcut' => '2c1dba03', 'phabricator-keyboard-shortcut-manager' => '2c1dba03', - 'phabricator-main-menu-view' => '152ef0e5', + 'phabricator-main-menu-view' => '33d9080b', 'phabricator-menu-item' => '2c1dba03', - 'phabricator-nav-view-css' => '152ef0e5', + 'phabricator-nav-view-css' => '33d9080b', 'phabricator-notification' => '2c1dba03', - 'phabricator-notification-css' => '152ef0e5', - 'phabricator-notification-menu-css' => '152ef0e5', + 'phabricator-notification-css' => '33d9080b', + 'phabricator-notification-menu-css' => '33d9080b', 'phabricator-object-selector-css' => '67248472', 'phabricator-phtize' => '2c1dba03', 'phabricator-prefab' => '2c1dba03', 'phabricator-project-tag-css' => '49898640', - 'phabricator-remarkup-css' => '152ef0e5', + 'phabricator-remarkup-css' => '33d9080b', 'phabricator-shaped-request' => '92f459f0', - 'phabricator-side-menu-view-css' => '152ef0e5', - 'phabricator-standard-page-view' => '152ef0e5', - 'phabricator-tag-view-css' => '152ef0e5', + 'phabricator-side-menu-view-css' => '33d9080b', + 'phabricator-standard-page-view' => '33d9080b', + 'phabricator-tag-view-css' => '33d9080b', 'phabricator-textareautils' => '2c1dba03', 'phabricator-tooltip' => '2c1dba03', - 'phabricator-transaction-view-css' => '152ef0e5', - 'phabricator-zindex-css' => '152ef0e5', - 'phui-button-css' => '152ef0e5', - 'phui-form-css' => '152ef0e5', - 'phui-form-view-css' => '152ef0e5', - 'phui-header-view-css' => '152ef0e5', - 'phui-icon-view-css' => '152ef0e5', - 'phui-list-view-css' => '152ef0e5', - 'phui-object-item-list-view-css' => '152ef0e5', - 'phui-property-list-view-css' => '152ef0e5', - 'phui-spacing-css' => '152ef0e5', - 'sprite-apps-large-css' => '152ef0e5', - 'sprite-gradient-css' => '152ef0e5', - 'sprite-icons-css' => '152ef0e5', - 'sprite-menu-css' => '152ef0e5', - 'sprite-status-css' => '152ef0e5', - 'syntax-highlighting-css' => '152ef0e5', + 'phabricator-transaction-view-css' => '33d9080b', + 'phabricator-zindex-css' => '33d9080b', + 'phui-button-css' => '33d9080b', + 'phui-form-css' => '33d9080b', + 'phui-form-view-css' => '33d9080b', + 'phui-header-view-css' => '33d9080b', + 'phui-icon-view-css' => '33d9080b', + 'phui-list-view-css' => '33d9080b', + 'phui-object-item-list-view-css' => '33d9080b', + 'phui-property-list-view-css' => '33d9080b', + 'phui-spacing-css' => '33d9080b', + 'sprite-apps-large-css' => '33d9080b', + 'sprite-gradient-css' => '33d9080b', + 'sprite-icons-css' => '33d9080b', + 'sprite-menu-css' => '33d9080b', + 'sprite-status-css' => '33d9080b', + 'syntax-highlighting-css' => '33d9080b', ), )); Index: src/infrastructure/celerity/CeleritySpriteGenerator.php =================================================================== --- src/infrastructure/celerity/CeleritySpriteGenerator.php +++ src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -615,6 +615,33 @@ 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; + } + + public function buildAppsSheet() { return $this->buildAppsSheetVariant(1); } Index: src/view/page/menu/PhabricatorMainMenuView.php =================================================================== --- src/view/page/menu/PhabricatorMainMenuView.php +++ src/view/page/menu/PhabricatorMainMenuView.php @@ -37,6 +37,7 @@ $user = $this->user; require_celerity_resource('phabricator-main-menu-view'); + require_celerity_resource('sprite-main-header-css'); $header_id = celerity_generate_unique_node_id(); $menus = array(); @@ -64,11 +65,16 @@ } $application_menu = $this->renderApplicationMenu(); + $classes = array(); + $classes[] = 'phabricator-main-menu'; + $classes[] = 'sprite-main-header'; + // TODO: Let admins or users set header + $classes[] = 'main-header-dark'; return phutil_tag( 'div', array( - 'class' => 'phabricator-main-menu', + 'class' => implode(' ', $classes), 'id' => $header_id, ), array( @@ -227,6 +233,8 @@ } private function renderPhabricatorLogo() { + $class = 'phabricator-main-menu-logo-image'; + return phutil_tag( 'a', array( @@ -236,7 +244,7 @@ phutil_tag( 'span', array( - 'class' => 'sprite-menu phabricator-main-menu-logo-image', + 'class' => 'sprite-menu menu-logo-image '.$class, ), '')); } Index: webroot/rsrc/css/application/base/main-menu-view.css =================================================================== --- webroot/rsrc/css/application/base/main-menu-view.css +++ webroot/rsrc/css/application/base/main-menu-view.css @@ -12,7 +12,6 @@ .phabricator-main-menu { background: #2d3236; - background-image: url(/rsrc/image/texture/phlnx-bg.png); background-repeat: repeat-x; position: relative; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); @@ -49,11 +48,7 @@ padding-left: 6px; } -.device-desktop .phabricator-main-menu-logo:hover { - background-color: rgba(0,0,0,.6); -} - -.phabricator-main-menu-logo-image { +.menu-logo-image { position: absolute; width: 149px; height: 26px; @@ -146,13 +141,18 @@ font-size: 13px; border: 1px solid #333; border-radius: 12px; - background-color: #555; + background-color: #222; + opacity: .8; height: 26px; line-height: 12px; box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25); padding: 6px 32px 6px 10px; } +.phabricator-main-menu.main-header-dark .phabricator-main-menu-search input { + background-color: #555; +} + .device .phabricator-main-menu-search input { height: 30px; font-size: 15px; @@ -161,6 +161,7 @@ .phabricator-main-menu .phabricator-main-menu-search input:focus { background: #fff; + opacity: 1; color: #333; border-color: #e7e7e7; box-shadow: none; @@ -169,13 +170,13 @@ } .phabricator-main-menu-search input.jx-typeahead-placeholder { - color: {$lightgreytext}; + color: #fff; } .phabricator-main-menu-search button { position: absolute; color: transparent; - background: transparent 5px 6px url(/rsrc/image/search.png) no-repeat; + background: transparent 5px 6px url(/rsrc/image/search-white.png) no-repeat; border: none; outline: none; box-shadow: none; @@ -353,11 +354,18 @@ display: block; } -.device-desktop .phabricator-application-menu - .core-menu-item.phui-list-item-view:hover { +.device-desktop .main-header-dark .phabricator-application-menu + .core-menu-item.phui-list-item-view:hover, +.device-desktop .main-header-dark .phabricator-main-menu-logo:hover { background-color: rgba(0,0,0,.6); } +.device-desktop .phabricator-application-menu + .core-menu-item.phui-list-item-view:hover, +.device-desktop .phabricator-main-menu-logo:hover { + background-color: rgba(0,0,0,.3); +} + .device-desktop .phabricator-application-menu .phui-list-item-view { float: left; position: relative; Index: webroot/rsrc/css/sprite-main-header.css =================================================================== --- /dev/null +++ webroot/rsrc/css/sprite-main-header.css @@ -0,0 +1,48 @@ +/** + * @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-blue { + background-position: 0px -45px; +} + +.main-header-dark { + background-position: 0px -90px; +} + +.main-header-fluttershy { + background-position: 0px -135px; +} + +.main-header-green { + background-position: 0px -180px; +} + +.main-header-nightmaremoon { + background-position: 0px -225px; +} + +.main-header-red { + background-position: 0px -270px; +} + +.main-header-scootaloo { + background-position: 0px -315px; +} + +.main-header-yellow { + background-position: 0px -360px; +}