mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-09 16:32:39 +01:00
Redesign Crumbs
Summary: Slimmer crumbs, less complex, no sprites, less visual disruption. Test Plan: Test Conpherence, Objects, Application Search pages. {F275026} {F275027} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11486
This commit is contained in:
parent
96edc9d2bc
commit
64f145ef46
14 changed files with 58 additions and 82 deletions
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'core.pkg.css' => 'bfa98093',
|
||||
'core.pkg.css' => 'a793698c',
|
||||
'core.pkg.js' => '63963771',
|
||||
'darkconsole.pkg.js' => '8ab24e01',
|
||||
'differential.pkg.css' => '8af45893',
|
||||
|
@ -47,7 +47,7 @@ return array(
|
|||
'rsrc/css/application/config/setup-issue.css' => '8f852bc0',
|
||||
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
|
||||
'rsrc/css/application/conpherence/menu.css' => 'e1e0fdf1',
|
||||
'rsrc/css/application/conpherence/message-pane.css' => '042886d1',
|
||||
'rsrc/css/application/conpherence/message-pane.css' => '684d1b80',
|
||||
'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
|
||||
'rsrc/css/application/conpherence/update.css' => '1099a660',
|
||||
'rsrc/css/application/conpherence/widget-pane.css' => '3d575438',
|
||||
|
@ -124,7 +124,7 @@ return array(
|
|||
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
|
||||
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
|
||||
'rsrc/css/phui/phui-button.css' => '008ba5e2',
|
||||
'rsrc/css/phui/phui-crumbs-view.css' => 'cd08e0bf',
|
||||
'rsrc/css/phui/phui-crumbs-view.css' => '8d3bc4a6',
|
||||
'rsrc/css/phui/phui-document.css' => 'bbeb1890',
|
||||
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
|
||||
'rsrc/css/phui/phui-fontkit.css' => '9c3d2dce',
|
||||
|
@ -150,7 +150,7 @@ return array(
|
|||
'rsrc/css/sprite-gradient.css' => '4bdb98a7',
|
||||
'rsrc/css/sprite-login.css' => 'a355d921',
|
||||
'rsrc/css/sprite-main-header.css' => '92720ee2',
|
||||
'rsrc/css/sprite-menu.css' => '661b879f',
|
||||
'rsrc/css/sprite-menu.css' => '9457345d',
|
||||
'rsrc/css/sprite-projects.css' => 'b0d9e24f',
|
||||
'rsrc/css/sprite-tokens.css' => '1706b943',
|
||||
'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
|
||||
|
@ -320,8 +320,8 @@ return array(
|
|||
'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
|
||||
'rsrc/image/sprite-login.png' => '07f2c67c',
|
||||
'rsrc/image/sprite-main-header.png' => '83521873',
|
||||
'rsrc/image/sprite-menu-X2.png' => '89ae35f1',
|
||||
'rsrc/image/sprite-menu.png' => 'b912a047',
|
||||
'rsrc/image/sprite-menu-X2.png' => 'acea7012',
|
||||
'rsrc/image/sprite-menu.png' => '24e76f8a',
|
||||
'rsrc/image/sprite-projects-X2.png' => '8c91c839',
|
||||
'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
|
||||
'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
|
||||
|
@ -506,7 +506,7 @@ return array(
|
|||
'config-options-css' => '7fedf08b',
|
||||
'config-welcome-css' => 'b0d16200',
|
||||
'conpherence-menu-css' => 'e1e0fdf1',
|
||||
'conpherence-message-pane-css' => '042886d1',
|
||||
'conpherence-message-pane-css' => '684d1b80',
|
||||
'conpherence-notification-css' => '04a6e10a',
|
||||
'conpherence-update-css' => '1099a660',
|
||||
'conpherence-widget-pane-css' => '3d575438',
|
||||
|
@ -764,7 +764,7 @@ return array(
|
|||
'phui-calendar-day-css' => 'de035c8a',
|
||||
'phui-calendar-list-css' => 'c1d0ca59',
|
||||
'phui-calendar-month-css' => 'a92e47d2',
|
||||
'phui-crumbs-view-css' => 'cd08e0bf',
|
||||
'phui-crumbs-view-css' => '8d3bc4a6',
|
||||
'phui-document-view-css' => 'bbeb1890',
|
||||
'phui-feed-story-css' => 'c9f3a0b5',
|
||||
'phui-font-icon-base-css' => '3dad2ae3',
|
||||
|
@ -810,7 +810,7 @@ return array(
|
|||
'sprite-gradient-css' => '4bdb98a7',
|
||||
'sprite-login-css' => 'a355d921',
|
||||
'sprite-main-header-css' => '92720ee2',
|
||||
'sprite-menu-css' => '661b879f',
|
||||
'sprite-menu-css' => '9457345d',
|
||||
'sprite-projects-css' => 'b0d9e24f',
|
||||
'sprite-tokens-css' => '1706b943',
|
||||
'syntax-highlighting-css' => '56c1ba38',
|
||||
|
|
|
@ -1,26 +1,21 @@
|
|||
{
|
||||
"version" : 1,
|
||||
"sprites" : {
|
||||
"arrow-right" : {
|
||||
"name" : "arrow-right",
|
||||
"rule" : ".phabricator-crumb-divider",
|
||||
"hash" : "87affa58adbe8da437a1cea6ffc5d8a4"
|
||||
"version": 1,
|
||||
"sprites": {
|
||||
"eye": {
|
||||
"name": "eye",
|
||||
"rule": ".phabricator-main-menu-eye",
|
||||
"hash": "35f24014f23142275574136a63dcb73f"
|
||||
},
|
||||
"eye" : {
|
||||
"name" : "eye",
|
||||
"rule" : ".phabricator-main-menu-eye",
|
||||
"hash" : "35f24014f23142275574136a63dcb73f"
|
||||
},
|
||||
"logo" : {
|
||||
"name" : "logo",
|
||||
"rule" : ".phabricator-main-menu-logo",
|
||||
"hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
|
||||
"logo": {
|
||||
"name": "logo",
|
||||
"rule": ".phabricator-main-menu-logo",
|
||||
"hash": "668b04729a4b9460b0c89cb6ef6db4d4"
|
||||
}
|
||||
},
|
||||
"scales" : [
|
||||
"scales": [
|
||||
1,
|
||||
2
|
||||
],
|
||||
"header" : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n background-size: {X}px {Y}px;\n }\n}\n",
|
||||
"type" : "standard"
|
||||
"header": "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n background-size: {X}px {Y}px;\n }\n}\n",
|
||||
"type": "standard"
|
||||
}
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 551 B |
Binary file not shown.
Before Width: | Height: | Size: 988 B |
|
@ -441,7 +441,7 @@ abstract class PhabricatorController extends AphrontController {
|
|||
|
||||
$crumbs[] = id(new PHUICrumbView())
|
||||
->setHref($this->getApplicationURI())
|
||||
->setAural($application->getName())
|
||||
->setName($application->getName())
|
||||
->setIcon($icon);
|
||||
}
|
||||
|
||||
|
|
|
@ -6,11 +6,6 @@ final class CeleritySpriteGenerator {
|
|||
$sprites = array();
|
||||
|
||||
$sources = array(
|
||||
'arrow-right' => array(
|
||||
'x' => 9,
|
||||
'y' => 31,
|
||||
'css' => '.phui-crumb-divider',
|
||||
),
|
||||
'logo' => array(
|
||||
'x' => 96,
|
||||
'y' => 26,
|
||||
|
|
|
@ -254,7 +254,7 @@ final class PhabricatorApplicationSearchController
|
|||
}
|
||||
|
||||
if ($named_query) {
|
||||
$title = pht('Query: %s', $named_query->getQueryName());
|
||||
$title = $named_query->getQueryName();
|
||||
} else {
|
||||
$title = pht('Advanced Search');
|
||||
}
|
||||
|
|
|
@ -69,12 +69,8 @@ final class PHUICrumbView extends AphrontView {
|
|||
$icon = null;
|
||||
if ($this->icon) {
|
||||
$classes[] = 'phui-crumb-has-icon';
|
||||
$icon = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-crumb-icon phui-icon-view phui-font-fa '.$this->icon,
|
||||
),
|
||||
'');
|
||||
$icon = id(new PHUIIconView())
|
||||
->setIconFont($this->icon);
|
||||
}
|
||||
|
||||
$name = phutil_tag(
|
||||
|
@ -86,23 +82,23 @@ final class PHUICrumbView extends AphrontView {
|
|||
|
||||
$divider = null;
|
||||
if (!$this->isLastCrumb) {
|
||||
$divider = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'sprite-menu phui-crumb-divider',
|
||||
),
|
||||
'');
|
||||
$divider = id(new PHUIIconView())
|
||||
->setIconFont('fa-angle-right')
|
||||
->addClass('phui-crumb-divider')
|
||||
->addClass('phui-crumb-view');
|
||||
} else {
|
||||
$classes[] = 'phabricator-last-crumb';
|
||||
}
|
||||
|
||||
return javelin_tag(
|
||||
$tag = javelin_tag(
|
||||
$this->href ? 'a' : 'span',
|
||||
array(
|
||||
'sigil' => $this->workflow ? 'workflow' : null,
|
||||
'href' => $this->href,
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
array($aural, $icon, $name, $divider));
|
||||
array($aural, $icon, $name));
|
||||
|
||||
return array($tag, $divider);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -97,11 +97,13 @@ final class PHUICrumbsView extends AphrontView {
|
|||
last($this->crumbs)->setIsLastCrumb(true);
|
||||
}
|
||||
|
||||
$classes = array();
|
||||
$classes[] = 'phui-crumbs-view';
|
||||
|
||||
return phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phui-crumbs-view '.
|
||||
'sprite-gradient gradient-breadcrumbs',
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
array(
|
||||
$action_view,
|
||||
|
|
|
@ -32,6 +32,11 @@
|
|||
margin: 16px 0px 16px 0px;
|
||||
}
|
||||
|
||||
.conpherence-layout .phui-crumbs-view {
|
||||
padding: 0 0 0 8px;
|
||||
background: #EBECEE;
|
||||
}
|
||||
|
||||
.conpherence-show-older-messages {
|
||||
display: block;
|
||||
background: #e0e3ec;
|
||||
|
|
|
@ -3,16 +3,14 @@
|
|||
*/
|
||||
|
||||
.phui-crumbs-view {
|
||||
background-color: #ebecee;
|
||||
background-image: none !important;
|
||||
height: 31px;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid rgba(205, 207, 211, 1);
|
||||
padding: 0 8px 0 16px;
|
||||
/* TODO: Position this over the slider for Differential's file tree view.
|
||||
Remove this once that gets sorted out. */
|
||||
position: relative;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
border-bottom: 1px solid rgba(205, 207, 211, 1);
|
||||
}
|
||||
|
||||
.phui-crumbs-view,
|
||||
|
@ -38,12 +36,7 @@
|
|||
|
||||
.phui-crumb-view {
|
||||
float: left;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.device-phone .phui-crumb-view {
|
||||
display: none;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.device-phone .phui-crumb-view.phabricator-last-crumb,
|
||||
|
@ -51,14 +44,12 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.phui-crumb-icon {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 6px 2px 2px 10px;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
.device-phone .phui-crumb-has-icon .phui-crumb-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phui-crumb-has-icon .phui-icon-view {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.device-phone .phui-crumb-icon {
|
||||
|
@ -79,11 +70,11 @@
|
|||
|
||||
.device-phone a.phui-crumbs-action {
|
||||
padding: 7px;
|
||||
border-left: 1px solid {$hovergrey};
|
||||
}
|
||||
|
||||
.device-desktop a.phui-crumbs-action:hover {
|
||||
background: rgba(205, 207, 211, .5);
|
||||
.device-desktop .phui-crumbs-view a:hover,
|
||||
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
|
||||
color: {$sky};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -101,9 +92,5 @@ a.phui-crumbs-action .phui-icon-view {
|
|||
}
|
||||
|
||||
.phui-crumb-divider {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 31px;
|
||||
vertical-align: top;
|
||||
margin: 0 8px 0 4px;
|
||||
margin: 2px 8px;
|
||||
}
|
||||
|
|
|
@ -13,19 +13,15 @@ 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 100px;
|
||||
background-size: 97px 68px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.phui-crumb-divider {
|
||||
background-position: 0px -27px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-logo {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-eye {
|
||||
background-position: 0px -59px;
|
||||
background-position: 0px -27px;
|
||||
}
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in a new issue