PHUIFeedStoryView, Update Profile

Summary: This moves Feed's rendering over to a PHUI class. I want to build it out and have it power Ponder, Phame, Feed, as well as Profiles and Projects in some fashion. It also provides some more data depth over ObjectItemView. Also updated Profile for mobile and fixed some other display issues there.

Test Plan: Tested Feed, Profile. Used iOS and Chrome.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

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

src/__celerity_resource_map__.php

@@ -2980,7 +2980,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-feed-css' =>
   array(
-    'uri' => '/res/bb92244a/rsrc/css/application/feed/feed.css',
+    'uri' => '/res/e337f54b/rsrc/css/application/feed/feed.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3212,7 +3212,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-profile-css' =>
   array(
-    'uri' => '/res/9869d10b/rsrc/css/application/profile/profile-view.css',
+    'uri' => '/res/a54f47a7/rsrc/css/application/profile/profile-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3221,7 +3221,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-profile-header-css' =>
   array(
-    'uri' => '/res/4b1cb23b/rsrc/css/application/profile/profile-header-view.css',
+    'uri' => '/res/1ccc6f0b/rsrc/css/application/profile/profile-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3594,6 +3594,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/phriction/phriction-document-css.css',
   ),
+  'phui-feed-story-css' =>
+  array(
+    'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-feed-story.css',
+  ),
   'ponder-comment-table-css' =>
   array(
     'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css',

src/__phutil_library_map__.php

@@ -663,6 +663,7 @@ phutil_register_library_map(array(
     'MetaMTANotificationType' => 'applications/metamta/constants/MetaMTANotificationType.php',
     'ObjectHandleLoader' => 'applications/phid/handle/ObjectHandleLoader.php',
     'OwnersPackageReplyHandler' => 'applications/owners/OwnersPackageReplyHandler.php',
+    'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
     'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
     'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
     'PackageMail' => 'applications/owners/mail/PackageMail.php',
@@ -2361,6 +2362,7 @@ phutil_register_library_map(array(
     'ManiphestView' => 'AphrontView',
     'MetaMTANotificationType' => 'MetaMTAConstants',
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
+    'PHUIFeedStoryView' => 'AphrontView',
     'PackageCreateMail' => 'PackageMail',
     'PackageDeleteMail' => 'PackageMail',
     'PackageMail' => 'PhabricatorMail',
@@ -2987,6 +2989,7 @@ phutil_register_library_map(array(
     'PhabricatorRepositoryTestCase' => 'PhabricatorTestCase',
     'PhabricatorS3FileStorageEngine' => 'PhabricatorFileStorageEngine',
     'PhabricatorSSHWorkflow' => 'PhutilArgumentWorkflow',
+    'PhabricatorSavedQuery' => 'PhabricatorSearchDAO',
     'PhabricatorSearchAttachController' => 'PhabricatorSearchBaseController',
     'PhabricatorSearchBaseController' => 'PhabricatorController',
     'PhabricatorSearchConfigOptions' => 'PhabricatorApplicationConfigOptions',

src/applications/feed/story/PhabricatorFeedStoryAudit.php

@@ -10,7 +10,7 @@ final class PhabricatorFeedStoryAudit extends PhabricatorFeedStory {
     $author_phid = $this->getAuthorPHID();
     $commit_phid = $this->getPrimaryObjectPHID();
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('audit-dark');
 
     $action = $this->getValue('action');

src/applications/feed/story/PhabricatorFeedStoryCommit.php

@@ -49,7 +49,7 @@ final class PhabricatorFeedStoryCommit extends PhabricatorFeedStory {
         $commit);
     }
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('differential-dark');
 
     $view->setTitle($title);

src/applications/feed/story/PhabricatorFeedStoryDifferential.php

@@ -9,7 +9,7 @@ final class PhabricatorFeedStoryDifferential extends PhabricatorFeedStory {
   public function renderView() {
     $data = $this->getStoryData();
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('differential-dark');
     $view->setViewed($this->getHasViewed());
 

src/applications/feed/story/PhabricatorFeedStoryDifferentialAggregate.php

@@ -54,7 +54,7 @@ final class PhabricatorFeedStoryDifferentialAggregate
         break;
     }
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('differential-dark');
     $view->setEpoch($this->getEpoch());
     $view->setViewed($this->getHasViewed());

src/applications/feed/story/PhabricatorFeedStoryManiphest.php

@@ -16,7 +16,7 @@ final class PhabricatorFeedStoryManiphest
   public function renderView() {
     $data = $this->getStoryData();
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('maniphest-dark');
     $view->setViewed($this->getHasViewed());
 

src/applications/feed/story/PhabricatorFeedStoryManiphestAggregate.php

@@ -54,7 +54,7 @@ final class PhabricatorFeedStoryManiphestAggregate
         break;
     }
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('maniphest-dark');
     $view->setEpoch($this->getEpoch());
     $view->setViewed($this->getHasViewed());

src/applications/feed/story/PhabricatorFeedStoryPhriction.php

@@ -21,7 +21,7 @@ final class PhabricatorFeedStoryPhriction extends PhabricatorFeedStory {
     $author_phid = $data->getAuthorPHID();
     $document_phid = $data->getValue('phid');
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('phriction-dark');
 
     $action = $data->getValue('action');

src/applications/feed/story/PhabricatorFeedStoryProject.php

@@ -24,7 +24,7 @@ final class PhabricatorFeedStoryProject extends PhabricatorFeedStory {
   public function renderView() {
     $data = $this->getStoryData();
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('projects-dark');
 
     $type = $data->getValue('type');

src/applications/feed/story/PhabricatorFeedStoryStatus.php

@@ -11,7 +11,7 @@ final class PhabricatorFeedStoryStatus extends PhabricatorFeedStory {
 
     $author_phid = $data->getAuthorPHID();
 
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('calendar-dark');
 
     $view->setTitle($this->linkTo($author_phid));

src/applications/people/controller/PhabricatorPeopleProfileController.php

@@ -141,8 +141,6 @@ final class PhabricatorPeopleProfileController
     }
 
     $nav->appendChild($header);
-
-    $content = hsprintf('<div style="padding: 1em;">%s</div>', $content);
     $header->appendChild($content);
 
     if ($user->getPHID() == $viewer->getPHID()) {
@@ -163,6 +161,8 @@ final class PhabricatorPeopleProfileController
       $nav,
       array(
         'title' => $user->getUsername(),
+        'device' => true,
+        'dust' => true,
       ));
   }
 
@@ -179,7 +179,7 @@ final class PhabricatorPeopleProfileController
     $blurb = $engine->markupText($blurb);
 
     $content = hsprintf(
-      '<div class="phabricator-profile-info-group">
+      '<div class="phabricator-profile-info-group ml">
         <h1 class="phabricator-profile-info-header">%s</h1>
         <div class="phabricator-profile-info-pane">
           <table class="phabricator-profile-info-table">
@@ -194,7 +194,7 @@ final class PhabricatorPeopleProfileController
           </table>
         </div>
       </div>'.
-      '<div class="phabricator-profile-info-group">
+      '<div class="phabricator-profile-info-group ml">
         <h1 class="phabricator-profile-info-header">%s</h1>
         <div class="phabricator-profile-info-pane">
           <table class="phabricator-profile-info-table">
@@ -235,10 +235,8 @@ final class PhabricatorPeopleProfileController
 
     return hsprintf(
       '<div class="phabricator-profile-info-group">
-        <h1 class="phabricator-profile-info-header">%s</h1>
+        %s
-        <div class="phabricator-profile-info-pane">%s</div>
       </div>',
-      pht('Activity Feed'),
       $view->render());
   }
 }

src/applications/tokens/feed/PhabricatorTokenGivenFeedStory.php

@@ -15,7 +15,7 @@ final class PhabricatorTokenGivenFeedStory
   }
 
   public function renderView() {
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setAppIcon('token-dark');
     $view->setViewed($this->getHasViewed());
     $author_phid = $this->getValue('authorPHID');

src/applications/transactions/feed/PhabricatorApplicationTransactionFeedStory.php

@@ -32,7 +32,7 @@ class PhabricatorApplicationTransactionFeedStory
   }
 
   public function renderView() {
-    $view = new PhabricatorFeedStoryView();
+    $view = new PHUIFeedStoryView();
     $view->setViewed($this->getHasViewed());
 
     $href = $this->getHandle($this->getPrimaryObjectPHID())->getURI();

src/view/phui/PHUIFeedStoryView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorFeedStoryView extends PhabricatorFeedView {
+final class PHUIFeedStoryView extends AphrontView {
 
   private $title;
   private $image;
@@ -90,7 +90,7 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
     $head = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-feed-story-head',
+        'class' => 'phui-feed-story-head',
       ),
       array(
         $actor,
@@ -104,7 +104,7 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
     $body = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-feed-story-body',
+        'class' => 'phui-feed-story-body',
       ),
       $this->renderChildren());
 
@@ -124,18 +124,18 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
     $foot = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-feed-story-foot',
+        'class' => 'phui-feed-story-foot',
       ),
       array(
         $icon,
         $foot));
 
-    require_celerity_resource('phabricator-feed-css');
+    require_celerity_resource('phui-feed-story-css');
 
     $story = phutil_tag(
       'div',
         array(
-          'class' => 'phabricator-feed-story',
+          'class' => 'phui-feed-story',
           'style' => $image_style,
         ),
         array(
@@ -146,7 +146,7 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
     return phutil_tag(
       'div',
         array(
-          'class' => 'phabricator-feed-wrap'
+          'class' => 'phui-feed-wrap'
         ),
         $story);
   }

webroot/rsrc/css/application/feed/feed.css

@@ -16,52 +16,6 @@
   margin: 20px auto;
 }
 
-.phabricator-feed-wrap {
-  border-left: 1px solid #e7e7e7;
-  border-right: 1px solid #e7e7e7;
-  border-bottom: 1px solid #c0c5d1;
-  margin-bottom: 15px;
-}
-
-.phabricator-feed-story {
-  background: 5px 2px no-repeat;
-  min-height: 50px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-}
-
-.phabricator-feed-story-head .phabricator-action-icon-item-link {
-  width: 35px;
-  height: 35px;
-  background-size: 35px;
-  float: left;
-  margin-right: 10px;
-}
-
-.phabricator-feed-story-head {
- padding: 10px;
- overflow: hidden;
- color: #333;
-}
-
-.phabricator-feed-story-body {
-  padding: 0 10px 10px;
-  color: #444444;
-}
-
-.phabricator-feed-story-foot {
-  color: #777;
-  font-size: 11px;
-  background: #f7f7f7;
-  padding: 10px;
-}
-
-.phabricator-feed-story-foot .phabricator-action-icon-item-link {
-  float: left;
-  display: inline-block;
-  margin-right: 5px;
-}
-
 .phabricator-feed-story-date-separator {
   margin-top: 2em;
 }

webroot/rsrc/css/application/profile/profile-header-view.css

@@ -3,13 +3,17 @@
  */
 
 .phabricator-profile-header {
-  background: #efefef;
+  background: #e0e3ec;
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: #c0c5d1;
   width: 100%;
-  border-bottom: 1px solid #cccccc;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
 .phabricator-profile-header .profile-header-name {
-  font-size: 22px;
+  font-size: 24px;
+  color: #333;
   font-weight: bold;
   padding: 12px 12px 6px;
   width: 100%;
@@ -31,6 +35,6 @@
 
 .phabricator-profile-header .profile-header-description {
   padding: 0 12px 12px;
-  color: #444444;
+  color: #555;
-  font-size: 11px;
+  font-size: 13px;
 }

webroot/rsrc/css/application/profile/profile-view.css

@@ -69,17 +69,18 @@ td.phabricator-profile-content {
 }
 
 .phabricator-profile-info-group {
-  margin-bottom: 2em;
+  box-shadow: 0 1px 1px rgba(0,0,0,.4);
 }
 
 .phabricator-profile-info-header {
   padding: 8px;
-  background: #f0f0f0;
+  background: #e7e7e7;
-  border-top: 1px solid #d9d9d9;
+  border-bottom: 1px solid #d9d9d9;
 }
 
 .phabricator-profile-info-pane {
   padding: 8px .5em;
+  background: #fff;
 }
 
 .phabricator-profile-info-table {

webroot/rsrc/css/phui/phui-feed-story.css

@@ -0,0 +1,49 @@
+/**
+ * @provides phui-feed-story-css
+ */
+
+.phui-feed-wrap {
+  border-left: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
+  border-bottom: 1px solid #c0c5d1;
+  margin-bottom: 15px;
+}
+
+.phui-feed-story {
+  background: 5px 2px no-repeat;
+  min-height: 50px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.phui-feed-story-head .phabricator-action-icon-item-link {
+  width: 35px;
+  height: 35px;
+  background-size: 35px;
+  float: left;
+  margin-right: 10px;
+}
+
+.phui-feed-story-head {
+ padding: 10px;
+ overflow: hidden;
+ color: #333;
+}
+
+.phui-feed-story-body {
+  padding: 0 10px 10px;
+  color: #444444;
+}
+
+.phui-feed-story-foot {
+  color: #777;
+  font-size: 11px;
+  background: #f7f7f7;
+  padding: 10px;
+}
+
+.phui-feed-story-foot .phabricator-action-icon-item-link {
+  float: left;
+  display: inline-block;
+  margin-right: 5px;
+}