Add one-line feed story.

Summary: It turns out not everything is interesting. This adds a oneline story with less vertical space.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3830,7 +3830,7 @@ celerity_register_resource_map(array(
   ),
   'phui-feed-story-css' =>
   array(
-    'uri' => '/res/6afac7dd/rsrc/css/phui/phui-feed-story.css',
+    'uri' => '/res/e5d6825b/rsrc/css/phui/phui-feed-story.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/uiexample/examples/PHUIFeedStoryExample.php

@@ -15,8 +15,9 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    /* Basic "One Line" Story */
+    /* Basic Story */
-    $text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> closed <a>'.
+    $text = hsprintf(
+      '<strong><a>harding (Tom Harding)</a></strong> closed <a>'.
       'D12: New spacer classes for blog views</a>.');
     $story1 = id(new PHUIFeedStoryView())
       ->setTitle($text)
@@ -118,11 +119,22 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
       ->setPontification('If we ever create a lightweight status app '.
       'this story would be how that would be displayed.');
 
-
+    /* Basic "One Line" Story */
+    $text = hsprintf(
+      '<strong><a>harding (Tom Harding)</a></strong> updated <a>'.
+      'D12: New spacer classes for blog views</a>.');
+    $story6 = id(new PHUIFeedStoryView())
+      ->setTitle($text)
+      ->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
+      ->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
+      ->setEpoch(1)
+      ->setOneLine(true)
+      ->setAppIcon('differential-dark')
+      ->setUser($user);
 
 
     $head1 = id(new PhabricatorHeaderView())
-      ->setHeader(pht('Basic "one-line" Story'));
+      ->setHeader(pht('Basic Story'));
 
     $head2 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Title / Text Story'));
@@ -136,6 +148,9 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
     $head5 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Status Story'));
 
+    $head6 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('One Line Story'));
+
     $wrap1 =
       array(
         id(new PHUIBoxView())
@@ -171,6 +186,13 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
           ->addMargin(PHUI::MARGIN_MEDIUM)
           ->addPadding(PHUI::PADDING_SMALL));
 
+    $wrap6 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story6)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
     return phutil_tag(
       'div',
         array(),
@@ -184,7 +206,9 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
           $head4,
           $wrap4,
           $head5,
-          $wrap5
+          $wrap5,
+          $head6,
+          $wrap6
         ));
   }
 }

src/view/phui/PHUIFeedStoryView.php

@@ -10,6 +10,7 @@ final class PHUIFeedStoryView extends AphrontView {
   private $epoch;
   private $viewed;
   private $href;
+  private $oneline = false;
   private $pontification = null;
   private $tokenBar = array();
   private $projects = array();
@@ -35,6 +36,11 @@ final class PHUIFeedStoryView extends AphrontView {
     return $this;
   }
 
+  public function setOneLine($oneline) {
+    $this->oneline = $oneline;
+    return $this;
+  }
+
   public function setImage($image) {
     $this->image = $image;
     return $this;
@@ -80,6 +86,7 @@ final class PHUIFeedStoryView extends AphrontView {
   }
 
   public function setPontification($text, $title = null) {
+    $this->setOneLine(false);
     if ($title) {
       $title = phutil_tag('h3', array(), $title);
     }
@@ -124,7 +131,11 @@ final class PHUIFeedStoryView extends AphrontView {
 
     require_celerity_resource('phui-feed-story-css');
 
+    $body = null;
+    $foot = null;
+    $image_style = null;
     $actor = '';
+
     if ($this->image) {
       $actor = new PHUIIconView();
       $actor->setImage($this->image);
@@ -134,60 +145,6 @@ final class PHUIFeedStoryView extends AphrontView {
       }
     }
 
-    $action_list = array();
-    $icons = null;
-    foreach ($this->actions as $action) {
-      $action_list[] = phutil_tag(
-        'li',
-          array(
-          'class' => 'phui-feed-story-action-item'
-        ),
-        $action);
-    }
-    if (!empty($action_list)) {
-      $icons = phutil_tag(
-        'ul',
-          array(
-            'class' => 'phui-feed-story-action-list'
-          ),
-          $action_list);
-    }
-
-    $head = phutil_tag(
-      'div',
-      array(
-        'class' => 'phui-feed-story-head',
-      ),
-      array(
-        $actor,
-        nonempty($this->title, pht('Untitled Story')),
-        $icons
-      ));
-
-    $body = null;
-    $foot = null;
-    $image_style = null;
-
-    if (!empty($this->tokenBar)) {
-      $tokenview = phutil_tag(
-        'div',
-          array(
-            'class' => 'phui-feed-token-bar'
-          ),
-        $this->tokenBar);
-      $this->appendChild($tokenview);
-    }
-
-    $body_content = $this->renderChildren();
-    if ($body_content) {
-      $body = phutil_tag(
-        'div',
-        array(
-          'class' => 'phui-feed-story-body',
-        ),
-        $body_content);
-    }
-
     if ($this->epoch) {
       // TODO: This is really bad; when rendering through Conduit and via
       // renderText() we don't have a user.
@@ -216,6 +173,72 @@ final class PHUIFeedStoryView extends AphrontView {
       $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS);
     }
 
+    $ol_foot = null;
+    if ($this->oneline) {
+      $ol_foot = phutil_tag(
+        'div',
+          array(
+            'class' => 'phui-feed-story-oneline-foot'
+          ),
+          array(
+            $icon,
+            $foot));
+    }
+
+    $action_list = array();
+    $icons = null;
+    foreach ($this->actions as $action) {
+      $action_list[] = phutil_tag(
+        'li',
+          array(
+          'class' => 'phui-feed-story-action-item'
+        ),
+        $action);
+    }
+    if (!empty($action_list)) {
+      $icons = phutil_tag(
+        'ul',
+          array(
+            'class' => 'phui-feed-story-action-list'
+          ),
+          $action_list);
+    }
+
+    $head = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-feed-story-head',
+      ),
+      array(
+        $actor,
+        nonempty($this->title, pht('Untitled Story')),
+        $icons,
+        $ol_foot
+      ));
+
+    if (!empty($this->tokenBar)) {
+      $tokenview = phutil_tag(
+        'div',
+          array(
+            'class' => 'phui-feed-token-bar'
+          ),
+        $this->tokenBar);
+      $this->appendChild($tokenview);
+    }
+
+    $body_content = $this->renderChildren();
+    if ($body_content) {
+      $body = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-feed-story-body',
+        ),
+        $body_content);
+    }
+
+    if ($this->oneline) {
+      $foot = null;
+    } else {
       $foot = phutil_tag(
         'div',
         array(
@@ -224,9 +247,15 @@ final class PHUIFeedStoryView extends AphrontView {
         array(
           $icon,
           $foot));
+    }
+
+    $classes = array('phui-feed-story');
+    if ($this->oneline) {
+      $classes[] = 'phui-feed-story-oneline';
+    }
 
     return id(new PHUIBoxView())
-      ->addClass('phui-feed-story')
+      ->addClass(implode(' ', $classes))
       ->setShadow(true)
       ->addMargin(PHUI::MARGIN_MEDIUM_BOTTOM)
       ->appendChild(array($head, $body, $foot));

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

@@ -4,7 +4,7 @@
 
 .phui-feed-story {
   background: 5px 2px no-repeat;
-  min-height: 50px;
+  min-height: 44px;
   background-color: #fff;
 }
 
@@ -13,17 +13,17 @@
   height: 35px;
   background-size: 35px;
   float: left;
-  margin-right: 10px;
+  margin-right: 8px;
 }
 
 .phui-feed-story-head {
- padding: 10px;
+ padding: 8px;
  overflow: hidden;
  color: #333;
 }
 
 .phui-feed-story-body {
-  padding: 0 10px 10px;
+  padding: 0 8px 8px;
   color: #444444;
   word-break: break-word;
 }
@@ -31,7 +31,7 @@
 .phui-feed-story-foot {
   font-size: 11px;
   background: #f7f7f7;
-  padding: 10px;
+  padding: 8px;
   line-height: 14px;
 }
 
@@ -40,7 +40,8 @@
   color: #777;
 }
 
-.phui-feed-story-foot .phui-icon-view {
+.phui-feed-story-foot .phui-icon-view,
+.phui-feed-story-oneline-foot .phui-icon-view {
   float: left;
   display: inline-block;
   margin-right: 5px;
@@ -60,9 +61,9 @@
 }
 
 .phui-feed-token-bar {
-  margin-top: 10px;
+  margin-top: 8px;
   border-top: 1px solid #e7e7e7;
-  padding-top: 10px;
+  padding-top: 8px;
 }
 
 .phui-feed-token-bar .phui-icon-view {
@@ -83,3 +84,20 @@
 .phui-feed-story-action-list .phui-icon-view {
   display: block;
 }
+
+.phui-feed-story-oneline .phui-feed-story-head {
+  padding: 4px;
+}
+
+.phui-feed-story-oneline .phui-feed-story-body {
+  padding: 0;
+}
+
+.phui-feed-story-oneline-foot,
+.phui-feed-story-oneline-foot a {
+  font-size: 11px;
+  color: #777;
+  margin-top: 2px;
+  line-height: 14px;
+}
+