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; +}