From 3aec1b11599677da893a321f067996f5f944a7b5 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 24 May 2014 21:56:45 -0700 Subject: [PATCH] Redesign sidenav, crumbs --- .../sprite/gradients/dark-menu-label.png | Bin 999 -> 0 bytes resources/sprite/gradients/menu-label.png | Bin 1065 -> 0 bytes resources/sprite/manifest/gradient.json | 12 +--- .../controller/PhabricatorHomeController.php | 4 -- .../view/PhabricatorApplicationLaunchView.php | 32 +++------- .../celerity/CeleritySpriteGenerator.php | 15 +---- .../rsrc/css/aphront/phabricator-nav-view.css | 17 +----- .../css/application/base/main-menu-view.css | 1 - .../phabricator-application-launch-view.css | 55 ++++++------------ .../css/layout/phabricator-crumbs-view.css | 8 +-- .../css/layout/phabricator-side-menu-view.css | 38 ++++-------- webroot/rsrc/css/sprite-gradient.css | 48 +++++++-------- webroot/rsrc/image/sprite-gradient.png | Bin 574 -> 503 bytes 13 files changed, 65 insertions(+), 165 deletions(-) delete mode 100644 resources/sprite/gradients/dark-menu-label.png delete mode 100644 resources/sprite/gradients/menu-label.png diff --git a/resources/sprite/gradients/dark-menu-label.png b/resources/sprite/gradients/dark-menu-label.png deleted file mode 100644 index 30f94c868ad460dd1d994f3e6f29cebb43104fbe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 999 zcmaJ=O=#3W6b>v(TiTPos0c$^u!5Upvb)(PG?q2lwF^yIwhLVa!8Dn6Lz_%Yrf#+c zksgF9h~mkEh~f`k#2+Y#2l1vS4%lc7lX;K#eecbC->j9U zjt%tf>th&Zpg5tI>3(uY?YnK7=qzzsOC&8 z2WWbEs$wlKShCHI9|2>LLJ3?%Oc1$?UZ_MW+vHW~K6djgXoiplmEA6?YLtM60|YW$ zDrpH20!iXvIwMK&Fc1YO@&bLOBupzANfEQ4^{_NsV9zOKz0k@UjzTMNeBxja#Ej-FULq<>E8RYV>vw3qu+=8o zFg`MU9&$o_q;{ZT{6ExnJJBI2qn&#HNgP%hKH|$L#7lui2RAnqr}7moKqkRK1>?nb z7fUrva9G1W(559YVwjfW#g0QwgkdN}FC?aCp`xy`l!J2|TalqGiTP|Ql}$ki^Wvx= z<_a22Yok(L(?z+B)v>kYB9FAO_6|1P6&s7e^=W1u1@~GYeD(stIKYgH=;&@TdRicgCmtPE=6Z#Vu zU*0>(^sZeSNj&^LxW1J=tFy1)$XA{m_`#g$fC*}I8`l8vleWVq}RGfH}4qQju0&W-*%vSrJGwgt92+4ImqmoRU+TBzHKD!=@lKvMC^E#Iy)u zK^)KOnVf7CG$4U=KC5@IMK2_#XQ7T=huUppvnOH|EkGv0K?UQbP6tfaFu`FB`>Zx2 zvBM?Pa=chD5*O$oUL6I_9b_8;cG*^j73UZaG%=mi$MZTU97SFLnOt6%McIImYh&&I z$(lf&5#sjvr(HTC+Jo`-u=(lXaD0$QXC|P-F>t2)938CLqMolr-yS`_-n#>OwED*9 zL|^yTpP{oKhS&F3!FHeU@W)>L`=$M#@cnDdHE*tb8WLYVxcbg`_GXQF>TeC)Pck>U nUUc8PJNQL-{$zb)bMtFrhncLX_;-5bZ9Kfi!j%4M{MO1}R>Mvw diff --git a/resources/sprite/manifest/gradient.json b/resources/sprite/manifest/gradient.json index 4e66b3aa3b..f787402ac7 100644 --- a/resources/sprite/manifest/gradient.json +++ b/resources/sprite/manifest/gradient.json @@ -16,11 +16,6 @@ "rule" : ".gradient-dark-grey-header", "hash" : "e8762dd2849410a7e4fba8f972f946ff" }, - "gradient-dark-menu-label" : { - "name" : "gradient-dark-menu-label", - "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label", - "hash" : "8a11efa454f788aa2419ed8c745dece2" - }, "gradient-green-header" : { "name" : "gradient-green-header", "rule" : ".gradient-green-header", @@ -36,11 +31,6 @@ "rule" : ".gradient-lightblue-header", "hash" : "e7753a6ce63c6822a559266eef9e255b" }, - "gradient-menu-label" : { - "name" : "gradient-menu-label", - "rule" : ".gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label", - "hash" : "e2aa8e74c3b2c0b18de34d336d318b5c" - }, "gradient-red-header" : { "name" : "gradient-red-header", "rule" : ".gradient-red-header", @@ -55,6 +45,6 @@ "scales" : [ 1 ], - "header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n", + "header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n", "type" : "repeat-x" } diff --git a/src/applications/home/controller/PhabricatorHomeController.php b/src/applications/home/controller/PhabricatorHomeController.php index 561c673fa8..00f8bc386a 100644 --- a/src/applications/home/controller/PhabricatorHomeController.php +++ b/src/applications/home/controller/PhabricatorHomeController.php @@ -111,10 +111,6 @@ abstract class PhabricatorHomeController extends PhabricatorController { idx($status, get_class($application), array())) ->setUser($user); - if ($tile_display == PhabricatorApplication::TILE_FULL) { - $tile->setFullWidth(true); - } - $tiles[] = $tile; } diff --git a/src/applications/meta/view/PhabricatorApplicationLaunchView.php b/src/applications/meta/view/PhabricatorApplicationLaunchView.php index d40e9b482c..3c3f95c339 100644 --- a/src/applications/meta/view/PhabricatorApplicationLaunchView.php +++ b/src/applications/meta/view/PhabricatorApplicationLaunchView.php @@ -4,12 +4,6 @@ final class PhabricatorApplicationLaunchView extends AphrontView { private $application; private $status; - private $fullWidth; - - public function setFullWidth($full_width) { - $this->fullWidth = $full_width; - return $this; - } public function setApplication(PhabricatorApplication $application) { $this->application = $application; @@ -48,14 +42,12 @@ final class PhabricatorApplicationLaunchView extends AphrontView { "\xCE\xB2"); } - if ($this->fullWidth) { - $content[] = phutil_tag( - 'span', - array( - 'class' => 'phabricator-application-launch-description', - ), - $application->getShortDescription()); - } + $content[] = phutil_tag( + 'span', + array( + 'class' => 'phabricator-application-launch-description', + ), + $application->getShortDescription()); $counts = array(); $text = array(); @@ -116,7 +108,7 @@ final class PhabricatorApplicationLaunchView extends AphrontView { } else { $icon = $application->getIconName(); $classes[] = 'sprite-apps-large'; - $classes[] = 'apps-'.$icon.'-light-large'; + $classes[] = 'apps-'.$icon.'-dark-large'; } $icon = phutil_tag( @@ -130,21 +122,13 @@ final class PhabricatorApplicationLaunchView extends AphrontView { $classes = array(); $classes[] = 'phabricator-application-launch-container'; - if ($this->fullWidth) { - $classes[] = 'application-tile-full'; - } - - $title = null; - if ($application && !$this->fullWidth) { - $title = $application->getShortDescription(); - } + $classes[] = 'application-tile-full'; $app_button = phutil_tag( $application ? 'a' : 'div', array( 'class' => implode(' ', $classes), 'href' => $application ? $application->getBaseURI() : null, - 'title' => $title, ), array( $icon, diff --git a/src/infrastructure/celerity/CeleritySpriteGenerator.php b/src/infrastructure/celerity/CeleritySpriteGenerator.php index 24f875337d..9c62ae28ba 100644 --- a/src/infrastructure/celerity/CeleritySpriteGenerator.php +++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -453,9 +453,7 @@ final class CeleritySpriteGenerator { $template = new PhutilSprite(); $unusual_heights = array( - 'dark-menu-label' => 25, 'breadcrumbs' => 31, - 'menu-label' => 24, 'red-header' => 70, 'blue-header' => 70, 'green-header' => 70, @@ -465,20 +463,13 @@ final class CeleritySpriteGenerator { 'lightblue-header' => 240, ); - $extra_css = array( - 'dark-menu-label' => - ', .phabricator-dark-menu .phui-list-item-type-label', - 'menu-label' => - ', .phabricator-side-menu .phui-list-item-type-label', - ); - $sprites = array(); foreach ($gradients as $gradient) { $path = $this->getPath('gradients/'.$gradient.'.png'); $sprite = id(clone $template) ->setName('gradient-'.$gradient) ->setSourceFile($path) - ->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient)); + ->setTargetCSS('.gradient-'.$gradient); $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26)); @@ -488,9 +479,7 @@ final class CeleritySpriteGenerator { $sheet = $this->buildSheet( 'gradient', false, - PhutilSpriteSheet::TYPE_REPEAT_X, - ', .phabricator-dark-menu .phui-list-item-type-label, '. - '.phabricator-side-menu .phui-list-item-type-label'); + PhutilSpriteSheet::TYPE_REPEAT_X); foreach ($sprites as $sprite) { $sheet->addSprite($sprite); } diff --git a/webroot/rsrc/css/aphront/phabricator-nav-view.css b/webroot/rsrc/css/aphront/phabricator-nav-view.css index b6682c6f44..6aeb7bd00a 100644 --- a/webroot/rsrc/css/aphront/phabricator-nav-view.css +++ b/webroot/rsrc/css/aphront/phabricator-nav-view.css @@ -22,9 +22,9 @@ then draw with the texture after the action completes. Just make the element extend off the bottom of the screen to prevent this. */ bottom: -480px; - width: 205px; - background: #303539; - box-shadow: inset -3px 0 3px rgba(0, 0, 0, 0.5); + width: 204px; + background: rgba(205, 207, 211, 0.5); + border-right: 1px solid rgba(205, 207, 211, 1); } .phabricator-nav-column-background, @@ -49,7 +49,6 @@ position: absolute; left: 0; white-space: nowrap; - overflow-x: hidden; overflow-y: auto; } @@ -82,16 +81,6 @@ margin-left: 205px; } -.phabricator-side-menu-home .phabricator-nav-column-background, -.phabricator-side-menu-home .phabricator-nav-local { - width: 240px; -} - -.device-desktop .phabricator-side-menu-home .phabricator-nav-content, -.device-tablet .phabricator-side-menu-home .phabricator-nav-content { - margin-left: 240px; -} - .device-phone .phabricator-side-menu-home .phabricator-nav-content { display: none; } diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css index 26a1db6812..ec53df1f28 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -14,7 +14,6 @@ background: #2d3236; background-repeat: repeat-x; position: relative; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); min-height: 44px; } diff --git a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css index 39843d4eb2..28d82b1a86 100644 --- a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css +++ b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css @@ -25,21 +25,12 @@ a.phabricator-application-launch-container, div.phabricator-application-launch-container { display: block; float: left; - width: 78px; - height: 66px; overflow: hidden; position: relative; - border: 1px solid #1c1e22; text-decoration: none; -webkit-font-smoothing: antialiased; -} - -a.application-tile-full { width: 100%; - height: 48px; - border-bottom: none; - border-left: none; - border-right: none; + height: 46px; } .device-phone div.phabricator-application-launch-container { @@ -49,52 +40,40 @@ a.application-tile-full { .phabricator-application-launch-icon { display: block; position: absolute; - left: 25px; - top: 10px; width: 28px; height: 28px; -} - -.application-tile-full .phabricator-application-launch-icon { - top: 10px; - left: 10px; + top: 8px; + left: 8px; } .device-desktop a.phabricator-application-launch-container:hover { - background-color: #1e2225; + background-color: #C5C8CF; text-decoration: none; } .phabricator-application-launch-name { display: block; - margin-top: 42px; font-weight: bold; - font-size: 11px; - text-align: center; - color: #ffffff; - text-shadow: 0px 1px 1px #000000; -} - -.application-tile-full .phabricator-application-launch-name { + color: {$darkbluetext}; font-size: 13px; - margin-top: 9px; - text-align: left; - margin-left: 48px; - + margin-top: 7px; + margin-left: 44px; + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); } -.application-tile-full .phabricator-application-launch-description { - color: #bfbfbf; +.phabricator-application-launch-description { + color: {$darkbluetext}; font-size: 11px; margin-top: 24px; - margin-left: 48px; + margin-left: 44px; + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); } .phabricator-application-beta { position: absolute; top: 4px; left: 4px; - color: #fff; + color: {$bluetext}; font-size: 11px; } @@ -102,20 +81,20 @@ a.application-tile-full { position: absolute; top: 6px; right: 4px; - color: white; + color: {$darkbluetext}; font-weight: bold; font-size: 11px; } .phabricator-application-attention-count { - background-color: #1e2225; - color: {$yellow}; + background-color: rgba(0,0,0,.1); + color: {$orange}; border-radius: 2px; padding: 1px 6px 2px; } .phabricator-application-warning-count { - background-color: #1e2225; + background-color: rgba(0,0,0,.1); border-radius: 2px; padding: 1px 6px 2px; } diff --git a/webroot/rsrc/css/layout/phabricator-crumbs-view.css b/webroot/rsrc/css/layout/phabricator-crumbs-view.css index 6ed17806b2..4b8a6d7faf 100644 --- a/webroot/rsrc/css/layout/phabricator-crumbs-view.css +++ b/webroot/rsrc/css/layout/phabricator-crumbs-view.css @@ -3,14 +3,12 @@ */ .phabricator-crumbs-view { - background-color: #d8dce2; + background-color: #ebecee; + background-image: none !important; height: 31px; overflow: hidden; vertical-align: top; - border-bottom: 1px solid #aaa; - - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); - + border-bottom: 1px solid rgba(205, 207, 211, 1); /* TODO: Position this over the slider for Differential's file tree view. Remove this once that gets sorted out. */ position: relative; diff --git a/webroot/rsrc/css/layout/phabricator-side-menu-view.css b/webroot/rsrc/css/layout/phabricator-side-menu-view.css index 77fa77a2b4..d369d7abde 100644 --- a/webroot/rsrc/css/layout/phabricator-side-menu-view.css +++ b/webroot/rsrc/css/layout/phabricator-side-menu-view.css @@ -7,52 +7,36 @@ white-space: nowrap; text-decoration: none; font-size: 13px; + -webkit-font-smoothing: antialiased; } .phabricator-side-menu .phui-list-item-href { display: block; padding: 6px 8px 6px 24px; - color: #e1e2e5; - text-shadow: rgba(0, 0, 0, 1) 0px 1px 1px; + color: {$darkbluetext}; } .phabricator-side-menu .phui-list-item-selected, .device-desktop .phui-side-menu .phui-list-item-selected.phui-list-item-href:hover { - background-color: #305c85; - color: #fff; + background-color: #C5C8CF; + border-left: 4px solid {$blue}; +} + +.phabricator-side-menu .phui-list-item-selected .phui-list-item-href { + padding-left: 20px; } .phabricator-side-menu .phui-list-item-type-label { padding: 6px 8px 4px 12px; - color: #f7f7f7; + color: {$darkbluetext}; text-transform: uppercase; - font-size: 11px; + font-size: 12px; font-weight: bold; border-style: solid; - background-color: #000; -} - -.phabricator-dark-menu .phui-list-item-type-button, -.phabricator-side-menu .phui-list-item-type-button { - width: 50%; - padding: 5px 8px; - display: block; - border-radius: 4px; - border: 2px solid #000; - margin: 10px auto; - color: #fff; - font-size: 14px; - text-shadow: 0px 1px 1px #000000; - font-weight: bold; - text-align: center; -} - -.phabricator-side-menu .phui-list-item-type-button:hover { - background-color: #1e2225; } .device-desktop .phabricator-side-menu a.phui-list-item-href:hover { text-decoration: none; - background-color: #1e2225; + background-color: #C5C8CF; } diff --git a/webroot/rsrc/css/sprite-gradient.css b/webroot/rsrc/css/sprite-gradient.css index d89ad9a890..39a3b28d96 100644 --- a/webroot/rsrc/css/sprite-gradient.css +++ b/webroot/rsrc/css/sprite-gradient.css @@ -3,7 +3,7 @@ * @generated */ -.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label { +.sprite-gradient { background-image: url(/rsrc/image/sprite-gradient.png); background-repeat: repeat-x; } @@ -12,41 +12,33 @@ .gradient-blue-header { - background-position: 0px -83px; + background-position: 0px -32px; } .gradient-breadcrumbs { - background-position: 0px -51px; -} - -.gradient-dark-grey-header { - background-position: 0px -154px; -} - -.gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label { - background-position: 0px -25px; -} - -.gradient-green-header { - background-position: 0px -225px; -} - -.gradient-grey-header { - background-position: 0px -296px; -} - -.gradient-lightblue-header { - background-position: 0px -509px; -} - -.gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label { background-position: 0px 0px; } +.gradient-dark-grey-header { + background-position: 0px -103px; +} + +.gradient-green-header { + background-position: 0px -174px; +} + +.gradient-grey-header { + background-position: 0px -245px; +} + +.gradient-lightblue-header { + background-position: 0px -458px; +} + .gradient-red-header { - background-position: 0px -367px; + background-position: 0px -316px; } .gradient-yellow-header { - background-position: 0px -438px; + background-position: 0px -387px; } diff --git a/webroot/rsrc/image/sprite-gradient.png b/webroot/rsrc/image/sprite-gradient.png index a102ae794e89446b067eddc0695acf56618bf355..c37f1eeb4584801702f7f7236e7780e12d66e899 100644 GIT binary patch delta 490 zcmVSvv{m_YV~b@)M`u7a}5^iq3(# z&QhpRfJLoEz`_Cc!K!2=&1jvME$%~T6&x`>rdAQ7N(dr$(tj@zZXcg#p2W@3QBRCV zTti`i#_}B20*VR?Z;V@@3MQ=>G3X=X2gIsaa1s*^94rhVLf`k7WvHss4a4wv4tT)w zva47Qt=PuWN*~vCw})1&Vu1*EPdD@37T+hs%te8nfmOiX!B&~9BGMcQ#Z;=8s3oC@ zRPjYyhd!WFv409FRm^LorV^76G2?1L(*@EoYvC+R9VmQeV+EeBfzi179@e=4QU zgcd{!;ABB9sDK=k1?5Q*(4-kv%5#9FqV<{~ET1_#`(v#vZ3o8%5O_%Z9LOQDl|umE z7bYwgz&CNex3rd275MtbEDN+=bGNqBL}UNAEOED~DrBN6R#43pF delta 562 zcmV-20?qyR1HJ^17k};u1^@s6iLtk{00067Nkl=)(j=#l%PZbDQN~94+SJ+noy)H+J7{0Zlt*Tq8XFvboCOb z<_X8A=M|H9v{+O6Fxq_WId}Bo#H5@Ox1fMh6$Za z_DOpP@_?o_9+Yj`AauzO9mPSE?Lm~yU=|AD&vi`{uAW{5bPkSs&3JGh3?^fwIynciDg;#zn``MM*ArkOXWC_WPhOP;J`s|TW=5dl6$3w3+L?8 zx`Bi{Xa#$4{$*${roDJ{!SK5+2ZrCa-d{=3nNR}^0dul|62=~Bds7RfY>9N>VI(a= zZ!?7XnS6IN*Q-4mjX|0}eRgz#ta@zi0KxuX0dlhX4Qo07*qoM6N<$f=Frj A)c^nh