diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 41bcc5d75d..30cdffe911 100644 --- a/src/__celerity_resource_map__.php +++ b/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( diff --git a/src/applications/uiexample/examples/PHUIFeedStoryExample.php b/src/applications/uiexample/examples/PHUIFeedStoryExample.php index 2c995e87d3..1dde6cdeda 100644 --- a/src/applications/uiexample/examples/PHUIFeedStoryExample.php +++ b/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 */ - $text = hsprintf('harding (Tom Harding) closed '. + /* Basic Story */ + $text = hsprintf( + 'harding (Tom Harding) closed '. 'D12: New spacer classes for blog views.'); $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( + 'harding (Tom Harding) updated '. + 'D12: New spacer classes for blog views.'); + $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 )); } } diff --git a/src/view/phui/PHUIFeedStoryView.php b/src/view/phui/PHUIFeedStoryView.php index 1ed6f67e33..892fa3fd1e 100644 --- a/src/view/phui/PHUIFeedStoryView.php +++ b/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,17 +173,89 @@ final class PHUIFeedStoryView extends AphrontView { $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS); } - $foot = phutil_tag( + $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-foot', + 'class' => 'phui-feed-story-head', ), array( - $icon, - $foot)); + $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( + 'class' => 'phui-feed-story-foot', + ), + 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)); diff --git a/webroot/rsrc/css/phui/phui-feed-story.css b/webroot/rsrc/css/phui/phui-feed-story.css index a64b244d24..edb1e23e18 100644 --- a/webroot/rsrc/css/phui/phui-feed-story.css +++ b/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; +} +