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
2024-11-18 12:52:42 +01:00 · 2016-01-13 16:07:04 -08:00 · 2016-01-13 16:07:04 -08:00 · 468031d1fd
commit 468031d1fd
parent 5d6dd7df7d
13 changed files with 142 additions and 26 deletions
--- a/resources/celerity/map.php
+++ b/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',
--- a/resources/celerity/packages.php
+++ b/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',
--- a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+++ b/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',
+
    );
  }

--- a/src/applications/project/profilepanel/PhabricatorProjectDetailsProfilePanel.php
+++ b/src/applications/project/profilepanel/PhabricatorProjectDetailsProfilePanel.php
@ -46,9 +46,7 @@ final class PhabricatorProjectDetailsProfilePanel

    $href = "/project/profile/{$id}/";

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

-    $item = id(new PHUIListItemView())
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
+    $item = $this->newItem()
      ->setHref($href)
      ->setName($name)
      ->setIcon($icon);
--- a/src/applications/project/profilepanel/PhabricatorProjectWorkboardProfilePanel.php
+++ b/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())
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
+    $item = $this->newItem()
      ->setHref($href)
      ->setName($name)
      ->setIcon($icon);
--- a/src/applications/search/engine/PhabricatorProfilePanelEngine.php
+++ b/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)
-      ->setRenderNameAsTooltip(true);
+      ->setWorkflow(!$can_edit);
  }

  public function getConfigureURI() {
--- a/src/applications/search/profilepanel/PhabricatorLinkProfilePanel.php
+++ b/src/applications/search/profilepanel/PhabricatorLinkProfilePanel.php
@ -82,9 +82,7 @@ final class PhabricatorLinkProfilePanel
      $icon_class = 'fa-link';
    }

-    $item = id(new PHUIListItemView())
-      ->setRenderNameAsTooltip(true)
-      ->setType(PHUIListItemView::TYPE_ICON_NAV)
+    $item = $this->newItem()
      ->setHref($href)
      ->setName($name)
      ->setIcon($icon_class);
--- a/src/applications/search/profilepanel/PhabricatorProfilePanel.php
+++ b/src/applications/search/profilepanel/PhabricatorProfilePanel.php
@ -51,4 +51,8 @@ abstract class PhabricatorProfilePanel extends Phobject {
      ->execute();
  }

+  protected function newItem() {
+    return new PHUIListItemView();
+  }
+
 }
--- a/src/applications/search/profilepanel/PhabricatorProfilePanelIconSet.php
+++ b/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();
--- a/src/view/layout/AphrontSideNavFilterView.php
+++ b/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();
--- a/webroot/rsrc/css/layout/phabricator-side-menu-view.css
+++ b/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);
 }
--- a/webroot/rsrc/css/phui/phui-profile-menu.css
+++ b/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};
+}