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

@@ -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',

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',

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)"))

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'));

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);

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,

src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php

@@ -0,0 +1,76 @@
+<?php
+
+final class PhabricatorPeoplePictureProfileMenuItem
+  extends PhabricatorProfileMenuItem {
+
+  const MENUITEMKEY = 'people.picture';
+
+  public function getMenuItemTypeName() {
+    return pht('User Picture');
+  }
+
+  private function getDefaultName() {
+    return pht('User Picture');
+  }
+
+  public function canHideMenuItem(
+    PhabricatorProfileMenuItemConfiguration $config) {
+    return false;
+  }
+
+  public function getDisplayName(
+    PhabricatorProfileMenuItemConfiguration $config) {
+    return $this->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,
+    );
+  }
+
+}

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;
+}

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;
+}