diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 0169161cf1..6453ac6181 100644
--- a/src/__celerity_resource_map__.php
+++ b/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(
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
index 90c7cb483d..f8c3833025 100644
--- a/src/__phutil_library_map__.php
+++ b/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',
diff --git a/src/applications/uiexample/examples/PHUIFeedStoryExample.php b/src/applications/uiexample/examples/PHUIFeedStoryExample.php
new file mode 100644
index 0000000000..2c995e87d3
--- /dev/null
+++ b/src/applications/uiexample/examples/PHUIFeedStoryExample.php
@@ -0,0 +1,190 @@
+getRequest();
+ $user = $request->getUser();
+
+ /* Basic "One Line" Story */
+ $text = hsprintf('harding (Tom Harding) closed '.
+ 'D12: New spacer classes for blog views.');
+ $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('lincoln (Honest Abe) 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('harding (Tom Harding) awarded '.
+ 'M10: Workboards 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('wgharding (Warren Harding) '.
+ '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('lincoln (Honest Abe) 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
+ ));
+ }
+}
diff --git a/src/applications/uiexample/examples/PhabricatorTagExample.php b/src/applications/uiexample/examples/PhabricatorTagExample.php
index 80518363ae..f8eac66917 100644
--- a/src/applications/uiexample/examples/PhabricatorTagExample.php
+++ b/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);
}
}
diff --git a/src/view/phui/PHUIFeedStoryView.php b/src/view/phui/PHUIFeedStoryView.php
index cfbbd5369c..2df3fcfe86 100644
--- a/src/view/phui/PHUIFeedStoryView.php
+++ b/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');
-
- $story = phutil_tag(
- 'div',
- array(
- 'class' => 'phui-feed-story',
- 'style' => $image_style,
- ),
- array(
- $head,
- $body,
- $foot));
-
- return phutil_tag(
- 'div',
- array(
- 'class' => 'phui-feed-wrap'
- ),
- $story);
+ return id(new PHUIBoxView())
+ ->addClass('phui-feed-story')
+ ->setShadow(true)
+ ->addMargin(PHUI::MARGIN_MEDIUM_BOTTOM)
+ ->appendChild(array($head, $body, $foot));
}
}
diff --git a/webroot/rsrc/css/phui/phui-feed-story.css b/webroot/rsrc/css/phui/phui-feed-story.css
index 27b04b2fa0..483a8964ed 100644
--- a/webroot/rsrc/css/phui/phui-feed-story.css
+++ b/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;
+}