[Redesign] Update Feed

Summary: Ref T8099, minor spacing improvements and more icons for feed.

Test Plan:
Test feed in Feed, in a Dashboard, Profile, and Project

{F443366}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '99b01d05',
+    'core.pkg.css' => '55901d68',
     'core.pkg.js' => 'e4f47dfd',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -69,7 +69,7 @@ return array(
     'rsrc/css/application/diffusion/diffusion-icons.css' => '4ba18923',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
     'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
-    'rsrc/css/application/feed/feed.css' => 'b490a135',
+    'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
     'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
     'rsrc/css/application/flag/flag.css' => '5337623f',
     'rsrc/css/application/harbormaster/harbormaster.css' => '49d64eb4',
@@ -98,7 +98,7 @@ return array(
     'rsrc/css/application/ponder/feed.css' => 'e62615b6',
     'rsrc/css/application/ponder/post.css' => '9d415218',
     'rsrc/css/application/ponder/vote.css' => '8ed6ed8b',
-    'rsrc/css/application/profile/profile-view.css' => '1a20dcbf',
+    'rsrc/css/application/profile/profile-view.css' => 'cb6f56b7',
     'rsrc/css/application/projects/project-icon.css' => 'c2ecb7f1',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@@ -130,7 +130,7 @@ return array(
     'rsrc/css/phui/phui-button.css' => 'b995182d',
     'rsrc/css/phui/phui-crumbs-view.css' => '3840dc4c',
     'rsrc/css/phui/phui-document.css' => '8be7a5e3',
-    'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
+    'rsrc/css/phui/phui-feed-story.css' => 'e5682f4c',
     'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
     'rsrc/css/phui/phui-form-view.css' => '87263b05',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
@@ -705,7 +705,7 @@ return array(
     'phabricator-drag-and-drop-file-upload' => '07de8873',
     'phabricator-draggable-list' => 'a16ec1c6',
     'phabricator-fatal-config-template-css' => '8e6c6fcd',
-    'phabricator-feed-css' => 'b490a135',
+    'phabricator-feed-css' => 'ecd4ec57',
     'phabricator-file-upload' => '477359c8',
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
@@ -721,7 +721,7 @@ return array(
     'phabricator-object-selector-css' => '029a133d',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '6920d200',
-    'phabricator-profile-css' => '1a20dcbf',
+    'phabricator-profile-css' => 'cb6f56b7',
     'phabricator-remarkup-css' => 'ea91b3ee',
     'phabricator-search-results-css' => '15c71110',
     'phabricator-shaped-request' => '7cbe244b',
@@ -762,7 +762,7 @@ return array(
     'phui-calendar-month-css' => '476be7e0',
     'phui-crumbs-view-css' => '3840dc4c',
     'phui-document-view-css' => '8be7a5e3',
-    'phui-feed-story-css' => 'c9f3a0b5',
+    'phui-feed-story-css' => 'e5682f4c',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => 'b664ac96',
     'phui-form-css' => 'f535f938',

src/applications/feed/builder/PhabricatorFeedBuilder.php

@@ -59,6 +59,7 @@ final class PhabricatorFeedBuilder {
         $last_date = $date;
         $header = new PHUIHeaderView();
         $header->setHeader($date);
+        $header->setHeaderIcon('fa-calendar blue msr');
 
         $null_view->appendChild($header);
       }
@@ -94,10 +95,9 @@ final class PhabricatorFeedBuilder {
       $null_view->appendChild($view);
     }
 
+    return id(new PHUIObjectBoxView())
+      ->appendChild($null_view);
 
-
-    return id(new AphrontNullView())
-      ->appendChild($null_view->render());
   }
 
 }

src/view/phui/PHUIFeedStoryView.php

@@ -157,16 +157,12 @@ final class PHUIFeedStoryView extends AphrontView {
 
     $body = null;
     $foot = null;
-    $image_style = null;
-    $actor = '';
 
-    if ($this->image) {
+    $actor = new PHUIIconView();
-      $actor = new PHUIIconView();
+    $actor->setImage($this->image);
-      $actor->setImage($this->image);
+    $actor->addClass('phui-feed-story-actor-image');
-      $actor->addClass('phui-feed-story-actor-image');
+    if ($this->imageHref) {
-      if ($this->imageHref) {
+      $actor->setHref($this->imageHref);
-        $actor->setHref($this->imageHref);
-      }
     }
 
     if ($this->epoch) {

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

@@ -2,25 +2,6 @@
  * @provides phabricator-feed-css
  */
 
-.phabricator-feed-frame {
-  margin: 20px 10px;
-}
-
-.phabricator-public-feed-frame {
-  margin: 10px;
-  max-width: 600px;
-  overflow-x: auto;
-}
-
-.device-desktop .phabricator-feed-frame {
-  max-width: 600px;
-  margin: 16px;
-}
-
-.phabricator-feed-story-date-separator {
-  margin-top: 16px;
-}
-
 .phabricator-feed-newer-link {
   float: left;
   font-weight: bold;
@@ -42,47 +23,3 @@
 .phabricator-public-feed-frame .phui-feed-wrap {
   border: none;
 }
-
-/* - Dashboards ------------------------------------------------------------ */
-
-.dashboard-pane div.phabricator-feed-frame {
-  margin: 0;
-  max-width: none;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-header-shell {
-  padding: 0;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-header-view {
-  font-size: 13px;
-  margin-left: 4px;
-  padding: 8px 0;
-  margin-bottom: 0;
-  color: {$bluetext};
-  font-weight: 500;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-feed-story {
-  border: none;
-  border-bottom: 1px solid {$thinblueborder};
-  margin: 0;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-feed-story-head {
-  padding: 12px 4px;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-feed-story-body {
-  margin: 12px 4px;
-}
-
-.dashboard-pane .phabricator-feed-frame .phui-feed-story-foot {
-  background: #fff;
-  padding: 12px 4px;
-}
-
-.dashboard-pane .phabricator-feed-frame
-  .phabricator-feed-story-date-separator {
-  margin-top: 0;
-}

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

@@ -43,11 +43,6 @@
   padding: 16px;
 }
 
-.phabricator-project-feed {
-  padding: 4px 0 12px 12px;
-  max-width: 640px;
-}
-
 .phabricator-project-feed .phui-info-view {
   margin: 12px 0;
 }

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

@@ -1,11 +1,8 @@
 /**
  * @provides phui-feed-story-css
  */
-
+.phui-object-box .phabricator-feed-frame .phui-header-shell h1 {
-.phui-feed-story {
+  color: {$blue};
-  background: 5px 2px no-repeat;
-  min-height: 44px;
-  background-color: #fff;
 }
 
 .phui-feed-story-head .phui-feed-story-actor-image {
@@ -14,12 +11,15 @@
   background-size: 35px;
   float: left;
   margin-right: 8px;
+  border: 1px solid rgba(55,55,55,.2);
+  border-radius: 3px;
 }
 
 .phui-feed-story-head {
-  padding: 8px;
+  padding: 12px 8px;
   overflow: hidden;
   color: {$greytext};
+  line-height: 16px;
 }
 
 .phui-feed-story-head .phui-link-person {
@@ -28,11 +28,12 @@
 }
 
 .phui-feed-story-body {
-  margin: 0 8px 8px;
+  margin: 4px 8px 8px;
   color: {$darkgreytext};
   word-break: break-word;
   max-height: 300px;
   overflow: hidden;
+  line-height: 18px;
 }
 
 .phui-feed-story-body.phabricator-remarkup {
@@ -40,10 +41,8 @@
 }
 
 .phui-feed-story-foot {
-  font-size: 11px;
+  font-size: 12px;
-  background: {$lightgreybackground};
+  padding: 8px 8px 12px 8px;
-  padding: 8px;
-  line-height: 14px;
 }
 
 .phui-feed-story-foot,