Rough initial cut of profile new profile menu

Summary:
Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think.

Major missing stuff:

  - No "collapse" state or action yet.
  - Menu is not full-height (requires changes to the rendering pipeline).

Test Plan: {F1060941}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10054

Differential Revision: https://secure.phabricator.com/D15016

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'f30d5cbd',
+    'core.pkg.css' => 'e9eca0fd',
     'core.pkg.js' => '1f5f365a',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/font/phui-font-icon-base.css' => 'ecbbb4c2',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-hovercard-view.css' => '1239cd52',
-    'rsrc/css/layout/phabricator-side-menu-view.css' => '91b7a42c',
+    'rsrc/css/layout/phabricator-side-menu-view.css' => '1ddcb82f',
     'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1c7f338',
@@ -143,6 +143,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
+    'rsrc/css/phui/phui-profile-menu.css' => '5a1644af',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -763,7 +764,7 @@ return array(
     'phabricator-remarkup-css' => 'b748dc17',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
-    'phabricator-side-menu-view-css' => '91b7a42c',
+    'phabricator-side-menu-view-css' => '1ddcb82f',
     'phabricator-slowvote-css' => 'da0afb1b',
     'phabricator-source-code-view-css' => 'cbeef983',
     'phabricator-standard-page-view' => '3c99cdf4',
@@ -821,6 +822,7 @@ return array(
     'phui-object-item-list-view-css' => '26c30d3f',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
+    'phui-profile-menu-css' => '5a1644af',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-spacing-css' => '042804d6',
@@ -2136,6 +2138,7 @@ return array(
       'phui-spacing-css',
       'phui-form-css',
       'phui-icon-view-css',
+      'phui-profile-menu-css',
       'phabricator-application-launch-view-css',
       'phabricator-action-list-view-css',
       'phui-property-list-view-css',

resources/celerity/packages.php

@@ -116,6 +116,7 @@ return array(
     'phui-spacing-css',
     'phui-form-css',
     'phui-icon-view-css',
+    'phui-profile-menu-css',
 
     'phabricator-application-launch-view-css',
     'phabricator-action-list-view-css',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -191,6 +191,12 @@ final class CelerityDefaultPostprocessor
       // Background color for "dark" themes.
       'page.background.dark' => '#ebecee',
 
+      'menu.profile.background' => '#525868',
+      'menu.profile.text' => '#c6c7cb',
+      'menu.profile.text.selected' => '#ffffff',
+      'menu.profile.icon' => '#ffffff',
+      'menu.profile.icon.disabled' => '#b9bcc2',
+
     );
   }
 

src/applications/project/profilepanel/PhabricatorProjectDetailsProfilePanel.php

@@ -46,9 +46,7 @@ final class PhabricatorProjectDetailsProfilePanel
 
     $href = "/project/profile/{$id}/";
 
-    $item = id(new PHUIListItemView())
+    $item = $this->newItem()
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
       ->setHref($href)
       ->setName($name)
       ->setProfileImage($picture);

src/applications/project/profilepanel/PhabricatorProjectMembersProfilePanel.php

@@ -46,9 +46,7 @@ final class PhabricatorProjectMembersProfilePanel
     $icon = 'fa-group';
     $href = "/project/members/{$id}/";
 
-    $item = id(new PHUIListItemView())
+    $item = $this->newItem()
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
       ->setHref($href)
       ->setName($name)
       ->setIcon($icon);

src/applications/project/profilepanel/PhabricatorProjectWorkboardProfilePanel.php

@@ -61,9 +61,7 @@ final class PhabricatorProjectWorkboardProfilePanel
     $href = "/project/board/{$id}/";
     $name = $this->getDisplayName($config);
 
-    $item = id(new PHUIListItemView())
+    $item = $this->newItem()
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
       ->setHref($href)
       ->setName($name)
       ->setIcon($icon);

src/applications/search/engine/PhabricatorProfilePanelEngine.php

@@ -131,7 +131,7 @@ final class PhabricatorProfilePanelEngine extends Phobject {
 
   public function buildNavigation() {
     $nav = id(new AphrontSideNavFilterView())
-      ->setIconNav(true)
+      ->setIsProfileMenu(true)
       ->setBaseURI(new PhutilURI('/project/'));
 
     $panels = $this->getPanels();
@@ -303,8 +303,7 @@ final class PhabricatorProfilePanelEngine extends Phobject {
       ->setIcon('fa-gear')
       ->setHref($this->getPanelURI('configure/'))
       ->setDisabled(!$can_edit)
-      ->setWorkflow(!$can_edit)
+      ->setWorkflow(!$can_edit);
-      ->setRenderNameAsTooltip(true);
   }
 
   public function getConfigureURI() {

src/applications/search/profilepanel/PhabricatorLinkProfilePanel.php

@@ -82,9 +82,7 @@ final class PhabricatorLinkProfilePanel
       $icon_class = 'fa-link';
     }
 
-    $item = id(new PHUIListItemView())
+    $item = $this->newItem()
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
       ->setHref($href)
       ->setName($name)
       ->setIcon($icon_class);

src/applications/search/profilepanel/PhabricatorProfilePanel.php

@@ -51,4 +51,8 @@ abstract class PhabricatorProfilePanel extends Phobject {
       ->execute();
   }
 
+  protected function newItem() {
+    return new PHUIListItemView();
+  }
+
 }

src/applications/search/profilepanel/PhabricatorProfilePanelIconSet.php

@@ -26,6 +26,21 @@ final class PhabricatorProfilePanelIconSet
         'icon' => 'fa-newspaper-o',
         'name' => pht('Feed'),
       ),
+      array(
+        'key' => 'phriction',
+        'icon' => 'fa-book',
+        'name' => pht('Phriction'),
+      ),
+      array(
+        'key' => 'conpherence',
+        'icon' => 'fa-comments',
+        'name' => pht('Conpherence'),
+      ),
+      array(
+        'key' => 'create',
+        'icon' => 'fa-plus',
+        'name' => pht('Create'),
+      ),
     );
 
     $icons = array();

src/view/layout/AphrontSideNavFilterView.php

@@ -28,6 +28,7 @@ final class AphrontSideNavFilterView extends AphrontView {
   private $classes = array();
   private $menuID;
   private $iconNav;
+  private $isProfileMenu;
 
   public function setMenuID($menu_id) {
     $this->menuID = $menu_id;
@@ -55,6 +56,15 @@ final class AphrontSideNavFilterView extends AphrontView {
     return $this->crumbs;
   }
 
+  public function setIsProfileMenu($is_profile) {
+    $this->isProfileMenu = $is_profile;
+    return $this;
+  }
+
+  public function getIsProfileMenu() {
+    return $this->isProfileMenu;
+  }
+
   public function setIconNav($nav) {
     $this->iconNav = $nav;
     return $this;
@@ -207,10 +217,17 @@ final class AphrontSideNavFilterView extends AphrontView {
 
     $nav_classes = array();
     $nav_classes[] = 'phabricator-nav';
-    if ($this->iconNav) {
+
+    if ($this->getIsProfileMenu()) {
+      require_celerity_resource('phui-profile-menu-css');
+      $nav_classes[] = 'phui-profile-menu';
+    } else if ($this->iconNav) {
       $nav_classes[] = 'phabricator-icon-nav';
+    } else {
+      $nav_classes[] = 'phabricator-basic-nav';
     }
 
+
     $nav_id = null;
     $drag_id = null;
     $content_id = celerity_generate_unique_node_id();

webroot/rsrc/css/layout/phabricator-side-menu-view.css

@@ -2,7 +2,7 @@
  * @provides phabricator-side-menu-view-css
  */
 
-.phabricator-side-menu .phui-list-item-view {
+.phabricator-basic-nav .phabricator-side-menu .phui-list-item-view {
   display: block;
   white-space: nowrap;
   text-decoration: none;
@@ -10,7 +10,7 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.phabricator-side-menu .phui-list-item-href {
+.phabricator-basic-nav .phabricator-side-menu .phui-list-item-href {
   display: block;
   padding: 6px 8px 6px 24px;
   color: {$darkbluetext};
@@ -18,7 +18,7 @@
   border-bottom-right-radius: 3px;
 }
 
-.phabricator-side-menu .phui-list-item-selected {
+.phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected {
   background-color: rgba(0,0,0,.05);
   border-left: 4px solid {$sky};
   border-top-right-radius: 3px;
@@ -30,16 +30,18 @@
   background-color: rgba(0,0,0,.1);
 }
 
-.device-desktop .phabricator-side-menu .phui-list-item-selected
+.device-desktop .phabricator-basic-nav .phabricator-side-menu
+  .phui-list-item-selected
   a.phui-list-item-href:hover {
   background-color: rgba(0,0,0,.05);
 }
 
-.phabricator-side-menu .phui-list-item-selected .phui-list-item-href {
+.phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected
+  .phui-list-item-href {
   padding-left: 20px;
 }
 
-.phabricator-side-menu .phui-list-item-type-label {
+.phabricator-basic-nav .phabricator-side-menu .phui-list-item-type-label {
   padding: 6px 8px 4px 12px;
   color: {$darkbluetext};
   text-transform: uppercase;
@@ -48,7 +50,8 @@
   border-style: solid;
 }
 
-.device-desktop .phabricator-side-menu a.phui-list-item-href:hover {
+.device-desktop .phabricator-basic-nav .phabricator-side-menu
+  a.phui-list-item-href:hover {
   text-decoration: none;
   background-color: rgba(0,0,0,.07);
 }

webroot/rsrc/css/phui/phui-profile-menu.css

@@ -0,0 +1,76 @@
+/**
+ * @provides phui-profile-menu-css
+ */
+
+.phui-profile-menu .phabricator-side-menu {
+  background: {$menu.profile.background};
+  box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.150);
+  width: 240px;
+}
+
+.phui-profile-menu .phabricator-nav-local {
+  margin-top: 0;
+}
+
+.device-desktop .phui-profile-menu .phabricator-nav-content {
+  margin-left: 240px;
+}
+
+.device-desktop .phui-profile-menu + .phabricator-standard-page-footer {
+  margin-left: 256px;
+}
+
+.phui-profile-menu .phabricator-side-menu .phui-list-item-view {
+  position: relative;
+}
+
+.phui-profile-menu .phabricator-side-menu .phui-list-item-href {
+  display: block;
+  text-decoration: none;
+  padding: 12px 8px 12px 48px;
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+  color: {$menu.profile.text};
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.phui-profile-menu .phabricator-side-menu .phui-list-item-icon,
+.phui-profile-menu .phabricator-side-menu .phui-icon-view {
+  position: absolute;
+  left: 13px;
+  top: 12px;
+  font-size: 20px;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  color: {$menu.profile.icon};
+  background-size: 100%;
+}
+
+.phui-profile-menu .phabricator-side-menu
+  .phui-list-item-disabled
+  .phui-list-item-icon {
+  color: {$menu.profile.icon.disabled};
+}
+
+.phui-profile-menu .phabricator-side-menu .phui-icon-view {
+  border-radius: 3px;
+}
+
+.device-desktop .phui-profile-menu .phabricator-side-menu
+  .phui-list-item-href:hover {
+  background-color: rgba(0, 0, 0, 0.075);
+  color: {$menu.profile.text.selected};
+}
+
+.phui-profile-menu .phabricator-side-menu .phui-list-item-selected
+  .phui-list-item-href,
+.device-desktop .phui-profile-menu .phabricator-side-menu
+  .phui-list-item-selected
+  .phui-list-item-href:hover {
+  background-color: rgba(0, 0, 0, 0.150);
+  color: {$menu.profile.text.selected};
+}