mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-18 19:40:55 +01:00
Redesign main header
Summary: First cut of redesign branch, simpler, lighter header. Will check in new graphics in follow up diff. Test Plan: Mostly all just new colors, but this also removes setting of `header-color` in Config. Reviewers: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12745
This commit is contained in:
parent
23d192cb3d
commit
476b7ef816
6 changed files with 51 additions and 70 deletions
|
@ -7,8 +7,8 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'core.pkg.css' => 'ca3f6a60',
|
||||
'core.pkg.js' => 'ff529dc7',
|
||||
'core.pkg.css' => '84f8e6af',
|
||||
'core.pkg.js' => '60924527',
|
||||
'darkconsole.pkg.js' => 'e7393ebb',
|
||||
'differential.pkg.css' => 'bb338e4b',
|
||||
'differential.pkg.js' => '3cfa26f9',
|
||||
|
@ -34,10 +34,10 @@ return array(
|
|||
'rsrc/css/aphront/typeahead.css' => '0e403212',
|
||||
'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
|
||||
'rsrc/css/application/auth/auth.css' => '1e655982',
|
||||
'rsrc/css/application/base/main-menu-view.css' => '663e3810',
|
||||
'rsrc/css/application/base/main-menu-view.css' => '0275c7b0',
|
||||
'rsrc/css/application/base/notification-menu.css' => '3c9d8aa1',
|
||||
'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
|
||||
'rsrc/css/application/base/standard-page-view.css' => 'd3e1abe9',
|
||||
'rsrc/css/application/base/standard-page-view.css' => 'dc14c671',
|
||||
'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
|
||||
'rsrc/css/application/config/config-options.css' => '7fedf08b',
|
||||
'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
|
||||
|
@ -107,7 +107,7 @@ return array(
|
|||
'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
|
||||
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
|
||||
'rsrc/css/application/uiexample/example.css' => '528b19de',
|
||||
'rsrc/css/core/core.css' => '76e8ee93',
|
||||
'rsrc/css/core/core.css' => '8971b2d1',
|
||||
'rsrc/css/core/remarkup.css' => '0037bdbf',
|
||||
'rsrc/css/core/syntax.css' => '6b7b24d9',
|
||||
'rsrc/css/core/z-index.css' => '3b612549',
|
||||
|
@ -341,7 +341,7 @@ return array(
|
|||
'rsrc/image/texture/table_header_hover.png' => '038ec3b9',
|
||||
'rsrc/image/texture/table_header_tall.png' => 'd56b434f',
|
||||
'rsrc/js/application/aphlict/Aphlict.js' => '30a6303c',
|
||||
'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '0323afdd',
|
||||
'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '6e1f0cba',
|
||||
'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'b1a59974',
|
||||
'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
|
||||
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
|
||||
|
@ -541,7 +541,7 @@ return array(
|
|||
'inline-comment-summary-css' => 'eb5f8e8c',
|
||||
'javelin-aphlict' => '30a6303c',
|
||||
'javelin-behavior' => '61cbc29a',
|
||||
'javelin-behavior-aphlict-dropdown' => '0323afdd',
|
||||
'javelin-behavior-aphlict-dropdown' => '6e1f0cba',
|
||||
'javelin-behavior-aphlict-listen' => 'b1a59974',
|
||||
'javelin-behavior-aphlict-status' => 'ea681761',
|
||||
'javelin-behavior-aphront-basic-tokenizer' => 'b3a4b884',
|
||||
|
@ -714,7 +714,7 @@ return array(
|
|||
'phabricator-busy' => '59a7976a',
|
||||
'phabricator-chatlog-css' => '852140ff',
|
||||
'phabricator-content-source-view-css' => '4b8b05d4',
|
||||
'phabricator-core-css' => '76e8ee93',
|
||||
'phabricator-core-css' => '8971b2d1',
|
||||
'phabricator-countdown-css' => '86b7b0a0',
|
||||
'phabricator-dashboard-css' => '17937d22',
|
||||
'phabricator-drag-and-drop-file-upload' => '07de8873',
|
||||
|
@ -728,7 +728,7 @@ return array(
|
|||
'phabricator-hovercard-view-css' => '44394670',
|
||||
'phabricator-keyboard-shortcut' => '1ae869f2',
|
||||
'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
|
||||
'phabricator-main-menu-view' => '663e3810',
|
||||
'phabricator-main-menu-view' => '0275c7b0',
|
||||
'phabricator-nav-view-css' => '7aeaf435',
|
||||
'phabricator-notification' => '0c6946e7',
|
||||
'phabricator-notification-css' => '9c279160',
|
||||
|
@ -743,7 +743,7 @@ return array(
|
|||
'phabricator-side-menu-view-css' => 'c1db9e9c',
|
||||
'phabricator-slowvote-css' => '266df6a1',
|
||||
'phabricator-source-code-view-css' => '2ceee894',
|
||||
'phabricator-standard-page-view' => 'd3e1abe9',
|
||||
'phabricator-standard-page-view' => 'dc14c671',
|
||||
'phabricator-textareautils' => '5c93c52c',
|
||||
'phabricator-title' => 'df5e11d2',
|
||||
'phabricator-tooltip' => '1d298e3a',
|
||||
|
@ -836,16 +836,6 @@ return array(
|
|||
'029a133d' => array(
|
||||
'aphront-dialog-view-css',
|
||||
),
|
||||
'0323afdd' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-request',
|
||||
'javelin-stratcom',
|
||||
'javelin-vector',
|
||||
'javelin-dom',
|
||||
'javelin-uri',
|
||||
'javelin-behavior-device',
|
||||
'phabricator-title',
|
||||
),
|
||||
'048330fa' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-typeahead-ondemand-source',
|
||||
|
@ -1347,6 +1337,16 @@ return array(
|
|||
'phabricator-drag-and-drop-file-upload',
|
||||
'phabricator-textareautils',
|
||||
),
|
||||
'6e1f0cba' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-request',
|
||||
'javelin-stratcom',
|
||||
'javelin-vector',
|
||||
'javelin-dom',
|
||||
'javelin-uri',
|
||||
'javelin-behavior-device',
|
||||
'phabricator-title',
|
||||
),
|
||||
'6eff08aa' => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
|
|
|
@ -27,7 +27,6 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
$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();
|
||||
|
@ -82,8 +81,6 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
$application_menu = $this->renderApplicationMenu();
|
||||
$classes = array();
|
||||
$classes[] = 'phabricator-main-menu';
|
||||
$classes[] = 'sprite-main-header';
|
||||
$classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color');
|
||||
|
||||
return phutil_tag(
|
||||
'div',
|
||||
|
@ -161,7 +158,7 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
'meta' => array(
|
||||
'map' => array(
|
||||
$header_id => 'phabricator-application-menu-expanded',
|
||||
$button_id => 'white',
|
||||
$button_id => 'sky',
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -224,7 +221,7 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
'meta' => array(
|
||||
'map' => array(
|
||||
$header_id => 'phabricator-search-menu-expanded',
|
||||
$button_id => 'white',
|
||||
$button_id => 'sky',
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -13,11 +13,13 @@
|
|||
.phabricator-main-menu {
|
||||
background-repeat: repeat-x;
|
||||
position: relative;
|
||||
min-height: 44px;
|
||||
min-height: 43px;
|
||||
background: #ebecee;
|
||||
border-bottom: 1px solid {$hovergrey};
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-main-menu {
|
||||
height: 44px;
|
||||
height: 43px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
|
@ -84,7 +86,7 @@
|
|||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: rgba(255,255,255,.8);
|
||||
color: {$bluetext};
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 24px;
|
||||
|
@ -147,28 +149,22 @@
|
|||
box-shadow: none;
|
||||
transition: none;
|
||||
|
||||
color: {$lightgreytext};
|
||||
color: {$bluetext};
|
||||
width: 100%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
border-width: 2px;
|
||||
border-color: rgba(0,0,0,.6);
|
||||
border-width: 1px;
|
||||
border-color: {$blueborder};
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
background-color: #fff;
|
||||
opacity: .8;
|
||||
height: 28px;
|
||||
box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
|
||||
padding: 3px 30px 3px 6px;
|
||||
float: left;
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu.main-header-dark .phabricator-main-menu-search input {
|
||||
background-color: rgba(150,150,150,.5);
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.device .phabricator-main-menu-search input {
|
||||
height: 32px;
|
||||
font-size: 15px;
|
||||
|
@ -185,13 +181,13 @@
|
|||
}
|
||||
|
||||
.phabricator-main-menu-search input.jx-typeahead-placeholder {
|
||||
color: #fff;
|
||||
color: {$bluetext};
|
||||
}
|
||||
|
||||
.phabricator-main-menu-search button {
|
||||
color: rgba(255,255,255,.8);
|
||||
color: {$bluetext};
|
||||
position: absolute;
|
||||
background: #000;
|
||||
background: {$lightgreybackground};
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
@ -216,7 +212,7 @@
|
|||
|
||||
.device-desktop .phabricator-main-menu-search
|
||||
button.phabricator-main-menu-search-dropdown:hover .phui-icon-view {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.device .phabricator-main-menu-search
|
||||
|
@ -238,11 +234,12 @@
|
|||
button.phabricator-main-menu-search-dropdown .caret:before {
|
||||
content: "\f107";
|
||||
font-family: FontAwesome;
|
||||
color: {$bluetext};
|
||||
}
|
||||
|
||||
.phabricator-main-menu-search button.phabricator-main-menu-search-dropdown
|
||||
.phui-icon-view {
|
||||
color: rgba(255,255,255,.8);
|
||||
color: {$bluetext};
|
||||
}
|
||||
|
||||
.phabricator-main-menu-search-dropdown .caret {
|
||||
|
@ -254,7 +251,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
}
|
||||
|
||||
.phabricator-main-menu-search button:hover {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.device .phabricator-main-menu-search button {
|
||||
|
@ -346,8 +343,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
}
|
||||
|
||||
.alert-notifications .phui-icon-view {
|
||||
color: rgba(200,200,200, .4);
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
|
||||
color: {$lightbluetext};
|
||||
}
|
||||
|
||||
.device-desktop .alert-notifications:hover {
|
||||
|
@ -356,7 +352,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
}
|
||||
|
||||
.device-desktop .alert-notifications:hover .phui-icon-view {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-icon,
|
||||
|
@ -365,7 +361,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
height: 18px;
|
||||
float: left;
|
||||
padding: 8px 6px 8px 4px;
|
||||
color: white;
|
||||
color: {$sky};
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
|
@ -378,7 +374,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
|
||||
.phabricator-main-menu-alert-count,
|
||||
.phabricator-main-menu-message-count {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
text-align: center;
|
||||
display: none;
|
||||
float: left;
|
||||
|
@ -393,7 +389,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
|
||||
.alert-unread .phabricator-main-menu-alert-icon,
|
||||
.message-unread .phabricator-main-menu-message-icon {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.alert-unread .phabricator-main-menu-alert-count,
|
||||
|
@ -486,7 +482,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: rgba(255,255,255,.8);
|
||||
color: {$bluetext};
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
@ -503,7 +499,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
.device-desktop .phabricator-application-menu
|
||||
.core-menu-item.phui-list-item-view:hover
|
||||
.phui-list-item-icon.phui-font-fa {
|
||||
color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-application-menu
|
||||
|
@ -513,7 +509,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
|
|||
|
||||
.device-desktop .phabricator-application-menu
|
||||
.core-menu-item.phui-list-item-view:hover {
|
||||
background-color: rgba(0,0,0,.33);
|
||||
background-color: rgba(0,0,0,.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
|
@ -9,8 +9,8 @@
|
|||
}
|
||||
|
||||
.phabricator-chromeless-page .phabricator-standard-page {
|
||||
background: transparent;
|
||||
border-width: 0px;
|
||||
background: transparent;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.phabricator-standard-page-footer {
|
||||
|
@ -58,18 +58,6 @@
|
|||
border: 1px solid #999900;
|
||||
}
|
||||
|
||||
.workflow-header {
|
||||
background: #efefef;
|
||||
padding: 6px 2em;
|
||||
text-align: right;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.workflow-header button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
a.handle-status-closed {
|
||||
text-decoration: line-through;
|
||||
color: #676767;
|
||||
|
|
|
@ -47,7 +47,7 @@ body {
|
|||
direction: ltr;
|
||||
text-align: left;
|
||||
unicode-bidi: embed;
|
||||
background: #ebecee;
|
||||
background: #fff;
|
||||
|
||||
/* By default, the iPhone zooms all text on the page by some percentage when
|
||||
you rotate from portrait mode to landscape mode. Disable this, since it
|
||||
|
|
|
@ -114,13 +114,13 @@ JX.behavior('aphlict-dropdown', function(config, statics) {
|
|||
if (menu) {
|
||||
statics.visible = {menu: menu, icon: icon};
|
||||
if (icon) {
|
||||
JX.DOM.alterClass(icon, 'white', true);
|
||||
JX.DOM.alterClass(icon, 'sky', true);
|
||||
}
|
||||
} else {
|
||||
if (statics.visible) {
|
||||
JX.DOM.hide(statics.visible.menu);
|
||||
if (statics.visible.icon) {
|
||||
JX.DOM.alterClass(statics.visible.icon, 'white', false);
|
||||
JX.DOM.alterClass(statics.visible.icon, 'sky', false);
|
||||
}
|
||||
}
|
||||
statics.visible = null;
|
||||
|
|
Loading…
Reference in a new issue