Feed Story UI Examples.

Summary: This provides some new display methods and examples to PHUIFeedStory.

Test Plan: Tested UIExamples Page, mobile layouts, and existing Feed Pages (feed, profile, etc). I want to add a bit more but am stopping here since it's not a priority.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3618,7 +3618,7 @@ celerity_register_resource_map(array(
   ),
   'phui-feed-story-css' =>
   array(
-    'uri' => '/res/a2db2369/rsrc/css/phui/phui-feed-story.css',
+    'uri' => '/res/d6ccc638/rsrc/css/phui/phui-feed-story.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -666,6 +666,7 @@ phutil_register_library_map(array(
     'PHUI' => 'view/phui/PHUI.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
+    'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
     'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
     'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
     'PHUIIconView' => 'view/phui/PHUIIconView.php',
@@ -2374,6 +2375,7 @@ phutil_register_library_map(array(
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
+    'PHUIFeedStoryExample' => 'PhabricatorUIExample',
     'PHUIFeedStoryView' => 'AphrontView',
     'PHUIIconExample' => 'PhabricatorUIExample',
     'PHUIIconView' => 'AphrontTagView',

src/applications/uiexample/examples/PHUIFeedStoryExample.php

@@ -0,0 +1,190 @@
+<?php
+
+final class PHUIFeedStoryExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Feed Story';
+  }
+
+  public function getDescription() {
+    return 'An outlandish exaggeration of intricate tales from '.
+      'around the realm';
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    /* Basic "One Line" 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)
+      ->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
+      ->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
+      ->setEpoch(1)
+      ->setAppIcon('differential-dark')
+      ->setUser($user);
+
+    /* Text Story, useful in Blogs, Ponders, Status */
+    $tokens = array(
+      'like-1',
+      'like-2',
+      'heart-1',
+      'heart-2');
+    $tokenview = array();
+    foreach ($tokens as $token) {
+      $tokenview[] =
+        id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
+          ->setSpriteIcon($token);
+    }
+    $text = hsprintf('<strong><a>lincoln (Honest Abe)</a></strong> wrote a '.
+      'new blog post.');
+    $story2 = id(new PHUIFeedStoryView())
+      ->setTitle($text)
+      ->setImage(celerity_get_resource_uri('/rsrc/image/people/lincoln.png'))
+      ->setImageHref('http://en.wikipedia.org/wiki/Abraham_Lincoln')
+      ->setEpoch(strtotime('November 19, 1863'))
+      ->setAppIcon('phame-dark')
+      ->setUser($user)
+      ->setTokenBar($tokenview)
+      ->setPontification('Four score and seven years ago our fathers brought '.
+        'forth on this continent, a new nation, conceived in Liberty, and '.
+        'dedicated to the proposition that all men are created equal. '.
+        'Now we are engaged in a great civil war, testing whether that '.
+        'nation, or any nation so conceived and so dedicated, can long '.
+        'endure. We are met on a great battle-field of that war. We have '.
+        'come to dedicate a portion of that field, as a final resting '.
+        'place for those who here gave their lives that that nation might '.
+        'live. It is altogether fitting and proper that we should do this.',
+        'Gettysburg Address');
+
+    /* Action Story, let's give people tokens! */
+
+    $text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> awarded '.
+      '<a>M10: Workboards</a> a token.');
+    $action1 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setSpriteIcon('token-grey')
+      ->setHref('#');
+    $token =
+        id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
+          ->setSpriteIcon('like-1');
+    $story3 = id(new PHUIFeedStoryView())
+      ->setTitle($text)
+      ->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
+      ->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
+      ->appendChild($token)
+      ->setEpoch(1)
+      ->addAction($action1)
+      ->setAppIcon('token-dark')
+      ->setUser($user);
+
+    /* Image Story, used in Pholio, Macro */
+    $text = hsprintf('<strong><a>wgharding (Warren Harding)</a></strong> '.
+      'asked a new question.');
+    $action1 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setSpriteIcon('up-grey')
+      ->setHref('#');
+    $action2 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setSpriteIcon('down-grey')
+      ->setHref('#');
+    $story4 = 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)
+      ->setAppIcon('ponder-dark')
+      ->setPontification('Why does inline-block add space under my spans and '.
+        'anchors?')
+      ->addAction($action1)
+      ->addAction($action2)
+      ->setUser($user);
+
+    /* Text Story, useful in Blogs, Ponders, Status */
+    $text = hsprintf('<strong><a>lincoln (Honest Abe)</a></strong> updated '.
+      'his status.');
+    $story5 = id(new PHUIFeedStoryView())
+      ->setTitle($text)
+      ->setImage(celerity_get_resource_uri('/rsrc/image/people/lincoln.png'))
+      ->setImageHref('http://en.wikipedia.org/wiki/Abraham_Lincoln')
+      ->setEpoch(strtotime('November 19, 1863'))
+      ->setAppIcon('phame-dark')
+      ->setUser($user)
+      ->setPontification('If we ever create a lightweight status app '.
+      'this story would be how that would be displayed.');
+
+
+
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Basic "one-line" Story'));
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Title / Text Story'));
+
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Token Story'));
+
+    $head4 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Action Story'));
+
+    $head5 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Status Story'));
+
+    $wrap1 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story1)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
+    $wrap2 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story2)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
+    $wrap3 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story3)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
+    $wrap4 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story4)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
+    $wrap5 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($story5)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL));
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2,
+          $head3,
+          $wrap3,
+          $head4,
+          $wrap4,
+          $head5,
+          $wrap5
+        ));
+  }
+}

src/applications/uiexample/examples/PhabricatorTagExample.php

@@ -118,7 +118,7 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
 
     return phutil_tag(
       'div',
-      array('style' => 'padding: 1em 2em;'),
+      array('class' => 'ml'),
       $tags);
   }
 }

src/view/phui/PHUIFeedStoryView.php

@@ -10,6 +10,10 @@ final class PHUIFeedStoryView extends AphrontView {
   private $epoch;
   private $viewed;
   private $href;
+  private $pontification = null;
+  private $tokenBar = array();
+  private $projects = array();
+  private $actions = array();
 
   public function setTitle($title) {
     $this->title = $title;
@@ -50,6 +54,37 @@ final class PHUIFeedStoryView extends AphrontView {
     return $this;
   }
 
+  public function setTokenBar(array $tokens) {
+    $this->tokenBar = $tokens;
+    return $this;
+  }
+
+  public function addProject($project) {
+    $this->projects[] = $project;
+    return $this;
+  }
+
+  public function addAction(PHUIIconView $action) {
+    $this->actions[] = $action;
+    return $this;
+  }
+
+  public function setPontification($text, $title = null) {
+    if ($title) {
+      $title = phutil_tag('h3', array(), $title);
+    }
+    $copy = phutil_tag(
+      'div',
+        array(
+          'class' => 'phui-feed-story-bigtext-post',
+        ),
+        array(
+          $title,
+          $text));
+    $this->appendChild($copy);
+    return $this;
+  }
+
   public function getHref() {
     return $this->href;
   }
@@ -77,16 +112,37 @@ final class PHUIFeedStoryView extends AphrontView {
 
   public function render() {
 
+    require_celerity_resource('phui-feed-story-css');
 
     $actor = '';
     if ($this->image) {
       $actor = new PHUIIconView();
       $actor->setImage($this->image);
+      $actor->addClass('phui-feed-story-actor-image');
       if ($this->imageHref) {
         $actor->setHref($this->imageHref);
       }
     }
 
+    $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(
@@ -95,11 +151,23 @@ final class PHUIFeedStoryView extends AphrontView {
       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(
@@ -132,24 +200,10 @@ final class PHUIFeedStoryView extends AphrontView {
         $icon,
         $foot));
 
-    require_celerity_resource('phui-feed-story-css');
+    return id(new PHUIBoxView())
-
+      ->addClass('phui-feed-story')
-    $story = phutil_tag(
+      ->setShadow(true)
-      'div',
+      ->addMargin(PHUI::MARGIN_MEDIUM_BOTTOM)
-        array(
+      ->appendChild(array($head, $body, $foot));
-          'class' => 'phui-feed-story',
-          'style' => $image_style,
-        ),
-        array(
-          $head,
-          $body,
-          $foot));
-
-    return phutil_tag(
-      'div',
-        array(
-          'class' => 'phui-feed-wrap'
-        ),
-        $story);
   }
 }

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

@@ -2,21 +2,13 @@
  * @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 .phui-icon-item-link {
+.phui-feed-story-head .phui-feed-story-actor-image {
   width: 35px;
   height: 35px;
   background-size: 35px;
@@ -47,3 +39,38 @@
   display: inline-block;
   margin-right: 5px;
 }
+
+.phui-feed-story-bigtext-post {
+  font-size: 15px;
+  font-weight: 200;
+  line-height: 18px;
+  color: #444;
+}
+
+.phui-feed-story-bigtext-post h3 {
+  font-size: 24px;
+  font-weight: 100;
+  line-height: 18px;
+  color: #444;
+  margin: 10px 0;
+}
+
+.phui-feed-token-bar {
+  margin-top: 10px;
+  border-top: 1px solid #e7e7e7;
+  padding-top: 10px;
+}
+
+.phui-feed-token-bar .phui-icon-item-link {
+  margin-right: 2px;
+}
+
+.phui-feed-story-action-list {
+  float: right;
+  padding-top: 4px;
+}
+
+.phui-feed-story-action-item {
+  float: right;
+  padding-left: 2px;
+}