From e980b94a2f6e64f710e6bc03b84ee184a61f79a7 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 1 Feb 2017 21:21:08 -0800 Subject: [PATCH] Add a Picture Menu Item for Profiles Summary: Just making profiles a little nicer, adds a big picture, easier mechanism for updating photos. Also larger profile pictures... need to re-thumb? Test Plan: View my profile, edit my picture, view a stranger, see profile. Check mobile, tablet, desktop. Check action menu on mobile. {F2559394} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17295 --- resources/celerity/map.php | 6 +- src/__phutil_library_map__.php | 2 + .../PhabricatorFileThumbnailTransform.php | 4 +- .../PhabricatorPeopleProfileController.php | 3 +- .../PhabricatorPeopleProfileMenuEngine.php | 5 ++ ...habricatorPeopleDetailsProfileMenuItem.php | 7 +- ...habricatorPeoplePictureProfileMenuItem.php | 76 +++++++++++++++++++ .../people/people-picture-menu-item.css | 18 +++++ .../css/application/project/project-view.css | 8 ++ 9 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php create mode 100644 webroot/rsrc/css/application/people/people-picture-menu-item.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 83a1db4fb2..e72d411649 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -81,6 +81,7 @@ return array( 'rsrc/css/application/objectselector/object-selector.css' => '85ee8ce6', 'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b', 'rsrc/css/application/paste/paste.css' => '1898e534', + 'rsrc/css/application/people/people-picture-menu-item.css' => '1ac65ef7', 'rsrc/css/application/people/people-profile.css' => '2473d929', 'rsrc/css/application/phame/phame.css' => '53fa6236', 'rsrc/css/application/pholio/pholio-edit.css' => '07676f51', @@ -96,7 +97,7 @@ return array( 'rsrc/css/application/policy/policy.css' => '957ea14c', 'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96', 'rsrc/css/application/project/project-card-view.css' => 'f25746f5', - 'rsrc/css/application/project/project-view.css' => '6936dc6e', + 'rsrc/css/application/project/project-view.css' => 'ceabdbaa', 'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733', 'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5', 'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd', @@ -777,6 +778,7 @@ return array( 'owners-path-editor-css' => '2f00933b', 'paste-css' => '1898e534', 'path-typeahead' => 'f7fc67ec', + 'people-picture-menu-item-css' => '1ac65ef7', 'people-profile-css' => '2473d929', 'phabricator-action-list-view-css' => '5679229f', 'phabricator-busy' => '59a7976a', @@ -904,7 +906,7 @@ return array( 'policy-transaction-detail-css' => '82100a43', 'ponder-view-css' => 'fbd45f96', 'project-card-view-css' => 'f25746f5', - 'project-view-css' => '6936dc6e', + 'project-view-css' => 'ceabdbaa', 'releeph-core' => '9b3c5733', 'releeph-preview-branch' => 'b7a6f4a5', 'releeph-request-differential-create-dialog' => '8d8b92cd', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index cd063471a8..8743fc205b 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -3323,6 +3323,7 @@ phutil_register_library_map(array( 'PhabricatorPeopleNewController' => 'applications/people/controller/PhabricatorPeopleNewController.php', 'PhabricatorPeopleNoOwnerDatasource' => 'applications/people/typeahead/PhabricatorPeopleNoOwnerDatasource.php', 'PhabricatorPeopleOwnerDatasource' => 'applications/people/typeahead/PhabricatorPeopleOwnerDatasource.php', + 'PhabricatorPeoplePictureProfileMenuItem' => 'applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php', 'PhabricatorPeopleProfileController' => 'applications/people/controller/PhabricatorPeopleProfileController.php', 'PhabricatorPeopleProfileEditController' => 'applications/people/controller/PhabricatorPeopleProfileEditController.php', 'PhabricatorPeopleProfileManageController' => 'applications/people/controller/PhabricatorPeopleProfileManageController.php', @@ -8455,6 +8456,7 @@ phutil_register_library_map(array( 'PhabricatorPeopleNewController' => 'PhabricatorPeopleController', 'PhabricatorPeopleNoOwnerDatasource' => 'PhabricatorTypeaheadDatasource', 'PhabricatorPeopleOwnerDatasource' => 'PhabricatorTypeaheadCompositeDatasource', + 'PhabricatorPeoplePictureProfileMenuItem' => 'PhabricatorProfileMenuItem', 'PhabricatorPeopleProfileController' => 'PhabricatorPeopleController', 'PhabricatorPeopleProfileEditController' => 'PhabricatorPeopleProfileController', 'PhabricatorPeopleProfileManageController' => 'PhabricatorPeopleProfileController', diff --git a/src/applications/files/transform/PhabricatorFileThumbnailTransform.php b/src/applications/files/transform/PhabricatorFileThumbnailTransform.php index 546021fc95..2c61743078 100644 --- a/src/applications/files/transform/PhabricatorFileThumbnailTransform.php +++ b/src/applications/files/transform/PhabricatorFileThumbnailTransform.php @@ -58,9 +58,9 @@ final class PhabricatorFileThumbnailTransform public function generateTransforms() { return array( id(new PhabricatorFileThumbnailTransform()) - ->setName(pht("Profile (200px \xC3\x97 200px)")) + ->setName(pht("Profile (400px \xC3\x97 400px)")) ->setKey(self::TRANSFORM_PROFILE) - ->setDimensions(200, 200) + ->setDimensions(400, 400) ->setScaleUp(true), id(new PhabricatorFileThumbnailTransform()) ->setName(pht("Pinboard (280px \xC3\x97 210px)")) diff --git a/src/applications/people/controller/PhabricatorPeopleProfileController.php b/src/applications/people/controller/PhabricatorPeopleProfileController.php index b33bf9c863..bd44169ef7 100644 --- a/src/applications/people/controller/PhabricatorPeopleProfileController.php +++ b/src/applications/people/controller/PhabricatorPeopleProfileController.php @@ -98,7 +98,8 @@ abstract class PhabricatorPeopleProfileController $header = id(new PHUIHeaderView()) ->setHeader(array($user->getFullName(), $tag)) ->setImage($picture) - ->setProfileHeader(true); + ->setProfileHeader(true) + ->addClass('people-profile-header'); if ($user->getIsDisabled()) { $header->setStatus('fa-ban', 'red', pht('Disabled')); diff --git a/src/applications/people/engine/PhabricatorPeopleProfileMenuEngine.php b/src/applications/people/engine/PhabricatorPeopleProfileMenuEngine.php index 3d67872772..2fd2ec3bd2 100644 --- a/src/applications/people/engine/PhabricatorPeopleProfileMenuEngine.php +++ b/src/applications/people/engine/PhabricatorPeopleProfileMenuEngine.php @@ -5,6 +5,7 @@ final class PhabricatorPeopleProfileMenuEngine const ITEM_PROFILE = 'people.profile'; const ITEM_MANAGE = 'people.manage'; + const ITEM_PICTURE = 'people.picture'; protected function isMenuEngineConfigurable() { return false; @@ -22,6 +23,10 @@ final class PhabricatorPeopleProfileMenuEngine $items = array(); + $items[] = $this->newItem() + ->setBuiltinKey(self::ITEM_PICTURE) + ->setMenuItemKey(PhabricatorPeoplePictureProfileMenuItem::MENUITEMKEY); + $items[] = $this->newItem() ->setBuiltinKey(self::ITEM_PROFILE) ->setMenuItemKey(PhabricatorPeopleDetailsProfileMenuItem::MENUITEMKEY); diff --git a/src/applications/people/menuitem/PhabricatorPeopleDetailsProfileMenuItem.php b/src/applications/people/menuitem/PhabricatorPeopleDetailsProfileMenuItem.php index 0f5cb6c1fa..d7d36b4ed5 100644 --- a/src/applications/people/menuitem/PhabricatorPeopleDetailsProfileMenuItem.php +++ b/src/applications/people/menuitem/PhabricatorPeopleDetailsProfileMenuItem.php @@ -39,17 +39,14 @@ final class PhabricatorPeopleDetailsProfileMenuItem PhabricatorProfileMenuItemConfiguration $config) { $user = $config->getProfileObject(); - - $picture = $user->getProfileImageURI(); - $name = $user->getUsername(); $href = urisprintf( '/p/%s/', $user->getUsername()); $item = $this->newItem() ->setHref($href) - ->setName($name) - ->setProfileImage($picture); + ->setName(pht('Profile')) + ->setIcon('fa-user'); return array( $item, diff --git a/src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php b/src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php new file mode 100644 index 0000000000..89fb7b9681 --- /dev/null +++ b/src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php @@ -0,0 +1,76 @@ +getDefaultName(); + } + + public function buildEditEngineFields( + PhabricatorProfileMenuItemConfiguration $config) { + return array(); + } + + protected function newNavigationMenuItems( + PhabricatorProfileMenuItemConfiguration $config) { + + $user = $config->getProfileObject(); + require_celerity_resource('people-picture-menu-item-css'); + + $picture = $user->getProfileImageURI(); + $name = $user->getUsername(); + $href = urisprintf( + '/p/%s/', + $user->getUsername()); + + $photo = phutil_tag( + 'img', + array( + 'src' => $picture, + 'class' => 'people-menu-image', + )); + + $can_edit = PhabricatorPolicyFilter::hasCapability( + $this->getViewer(), + $user, + PhabricatorPolicyCapability::CAN_EDIT); + + if ($can_edit) { + $id = $user->getID(); + $href = "/people/picture/{$id}/"; + } + + $view = phutil_tag_div('people-menu-image-container', $photo); + $view = phutil_tag( + 'a', + array( + 'href' => $href, + ), + $view); + + $item = $this->newItem() + ->appendChild($view); + + return array( + $item, + ); + } + +} diff --git a/webroot/rsrc/css/application/people/people-picture-menu-item.css b/webroot/rsrc/css/application/people/people-picture-menu-item.css new file mode 100644 index 0000000000..4f3d36fa9d --- /dev/null +++ b/webroot/rsrc/css/application/people/people-picture-menu-item.css @@ -0,0 +1,18 @@ +/** + * @provides people-picture-menu-item-css + */ + +.people-menu-image { + width: 160px; + height: 160px; + border: 1px solid {$thinblueborder}; +} + +.people-menu-image-container { + background: #fff; + padding: 4px; + border-radius: 3px; + border: 1px solid {$lightblueborder}; + margin: 4px 0px 16px 20px; + display: inline-block; +} diff --git a/webroot/rsrc/css/application/project/project-view.css b/webroot/rsrc/css/application/project/project-view.css index 5b72e1c9eb..9ba6a9f7e5 100644 --- a/webroot/rsrc/css/application/project/project-view.css +++ b/webroot/rsrc/css/application/project/project-view.css @@ -87,3 +87,11 @@ .profile-no-badges { padding: 24px 0; } + +.people-profile-header.phui-profile-header .phui-header-col1 { + display: none; +} + +.device .people-profile-header.phui-profile-header .phui-header-col1 { + display: table-cell; +}