1
0
Fork 0
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:
Chad Little 2015-01-26 08:27:54 -08:00
parent 96edc9d2bc
commit 64f145ef46
14 changed files with 58 additions and 82 deletions

View file

@ -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',

View file

@ -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

View file

@ -441,7 +441,7 @@ abstract class PhabricatorController extends AphrontController {
$crumbs[] = id(new PHUICrumbView())
->setHref($this->getApplicationURI())
->setAural($application->getName())
->setName($application->getName())
->setIcon($icon);
}

View file

@ -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,

View file

@ -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');
}

View file

@ -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);
}
}

View file

@ -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,

View file

@ -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;

View file

@ -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;
}

View file

@ -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