From 468031d1fd77711a4edca23cb8a1889ea2ba131b Mon Sep 17 00:00:00 2001 From: epriestley Date: Wed, 13 Jan 2016 16:07:04 -0800 Subject: [PATCH] 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 | 9 ++- resources/celerity/packages.php | 1 + .../CelerityDefaultPostprocessor.php | 6 ++ .../PhabricatorProjectDetailsProfilePanel.php | 4 +- .../PhabricatorProjectMembersProfilePanel.php | 4 +- ...habricatorProjectWorkboardProfilePanel.php | 4 +- .../engine/PhabricatorProfilePanelEngine.php | 5 +- .../PhabricatorLinkProfilePanel.php | 4 +- .../profilepanel/PhabricatorProfilePanel.php | 4 + .../PhabricatorProfilePanelIconSet.php | 15 ++++ src/view/layout/AphrontSideNavFilterView.php | 19 ++++- .../css/layout/phabricator-side-menu-view.css | 17 +++-- webroot/rsrc/css/phui/phui-profile-menu.css | 76 +++++++++++++++++++ 13 files changed, 142 insertions(+), 26 deletions(-) create mode 100644 webroot/rsrc/css/phui/phui-profile-menu.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index e64383cd6c..18ba9fcbc8 100644 --- 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', diff --git a/resources/celerity/packages.php b/resources/celerity/packages.php index bb97cb889e..5a3e296a8c 100644 --- 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', diff --git a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php index 7c230d9869..527318f7f9 100644 --- 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', + ); } diff --git a/src/applications/project/profilepanel/PhabricatorProjectDetailsProfilePanel.php b/src/applications/project/profilepanel/PhabricatorProjectDetailsProfilePanel.php index 5a8bacf9dd..97ba3a1aaa 100644 --- 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); diff --git a/src/applications/project/profilepanel/PhabricatorProjectMembersProfilePanel.php b/src/applications/project/profilepanel/PhabricatorProjectMembersProfilePanel.php index 0db2a03773..b5374416aa 100644 --- 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); diff --git a/src/applications/project/profilepanel/PhabricatorProjectWorkboardProfilePanel.php b/src/applications/project/profilepanel/PhabricatorProjectWorkboardProfilePanel.php index 91f2f553f5..02b54537e5 100644 --- 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); diff --git a/src/applications/search/engine/PhabricatorProfilePanelEngine.php b/src/applications/search/engine/PhabricatorProfilePanelEngine.php index 760665e5b2..40e95a4acc 100644 --- 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() { diff --git a/src/applications/search/profilepanel/PhabricatorLinkProfilePanel.php b/src/applications/search/profilepanel/PhabricatorLinkProfilePanel.php index d2b19ad368..5b4c404635 100644 --- 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); diff --git a/src/applications/search/profilepanel/PhabricatorProfilePanel.php b/src/applications/search/profilepanel/PhabricatorProfilePanel.php index 6f029927d8..54985bfc43 100644 --- 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(); + } + } diff --git a/src/applications/search/profilepanel/PhabricatorProfilePanelIconSet.php b/src/applications/search/profilepanel/PhabricatorProfilePanelIconSet.php index 19b164e932..50efc217e0 100644 --- 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(); diff --git a/src/view/layout/AphrontSideNavFilterView.php b/src/view/layout/AphrontSideNavFilterView.php index 45e49f43fe..d3688ce93a 100644 --- 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(); diff --git a/webroot/rsrc/css/layout/phabricator-side-menu-view.css b/webroot/rsrc/css/layout/phabricator-side-menu-view.css index 7f0d2bc720..fe8ad588fc 100644 --- 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); } diff --git a/webroot/rsrc/css/phui/phui-profile-menu.css b/webroot/rsrc/css/phui/phui-profile-menu.css new file mode 100644 index 0000000000..c1ec040b17 --- /dev/null +++ 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}; +}