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

Author: chadlittle

src/__celerity_resource_map__.php

@@ -3830,7 +3830,7 @@
   ),
   '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 @@ public function renderExample() {
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    /* Basic "One Line" Story */
-    $text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> closed <a>'.
+    /* Basic Story */
+    $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 @@ public function renderExample() {
       ->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 @@ public function renderExample() {
     $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 @@ public function renderExample() {
           ->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 @@ public function renderExample() {
           $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 @@ public function setEpoch($epoch) {
     return $this;
   }
 
+  public function setOneLine($oneline) {
+    $this->oneline = $oneline;
+    return $this;
+  }
+
   public function setImage($image) {
     $this->image = $image;
     return $this;
@@ -80,6 +86,7 @@ public function addAction(PHUIIconView $action) {
   }
 
   public function setPontification($text, $title = null) {
+    $this->setOneLine(false);
     if ($title) {
       $title = phutil_tag('h3', array(), $title);
     }
@@ -124,7 +131,11 @@ public function render() {
 
     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,6 +145,46 @@ public function render() {
       }
     }
 
+    if ($this->epoch) {
+      // TODO: This is really bad; when rendering through Conduit and via
+      // renderText() we don't have a user.
+      if ($this->user) {
+        $foot = phabricator_datetime($this->epoch, $this->user);
+      } else {
+        $foot = null;
+      }
+    } else {
+      $foot = pht('No time specified.');
+    }
+
+    if ($this->chronologicalKey) {
+      $foot = phutil_tag(
+        'a',
+        array(
+          'href' => '/feed/'.$this->chronologicalKey.'/',
+        ),
+        $foot);
+    }
+
+    $icon = null;
+    if ($this->appIcon) {
+      $icon = new PHUIIconView();
+      $icon->setSpriteIcon($this->appIcon);
+      $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) {
@@ -161,13 +212,10 @@ public function render() {
       array(
         $actor,
         nonempty($this->title, pht('Untitled Story')),
-        $icons
+        $icons,
+        $ol_foot
       ));
 
-    $body = null;
-    $foot = null;
-    $image_style = null;
-
     if (!empty($this->tokenBar)) {
       $tokenview = phutil_tag(
         'div',
@@ -188,45 +236,26 @@ public function render() {
         $body_content);
     }
 
-    if ($this->epoch) {
-      // TODO: This is really bad; when rendering through Conduit and via
-      // renderText() we don't have a user.
-      if ($this->user) {
-        $foot = phabricator_datetime($this->epoch, $this->user);
-      } else {
-        $foot = null;
-      }
+    if ($this->oneline) {
+      $foot = null;
     } else {
-      $foot = pht('No time specified.');
-    }
-
-    if ($this->chronologicalKey) {
       $foot = phutil_tag(
-        'a',
+        'div',
         array(
-          'href' => '/feed/'.$this->chronologicalKey.'/',
+          'class' => 'phui-feed-story-foot',
         ),
-        $foot);
+        array(
+          $icon,
+          $foot));
     }
 
-    $icon = null;
-    if ($this->appIcon) {
-      $icon = new PHUIIconView();
-      $icon->setSpriteIcon($this->appIcon);
-      $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS);
+    $classes = array('phui-feed-story');
+    if ($this->oneline) {
+      $classes[] = 'phui-feed-story-oneline';
     }
 
-    $foot = phutil_tag(
-      'div',
-      array(
-        'class' => 'phui-feed-story-foot',
-      ),
-      array(
-        $icon,
-        $foot));
-
     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,25 +13,25 @@
   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;
 }
 
 .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;
+}
+