revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 23:02:42 +01:00
Code Issues Releases Wiki Activity

Feed Story UI Examples.

Browse source 
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
This commit is contained in:
Chad Little 2013-04-24 15:18:58 -07:00
parent 3f7ae27b58
commit 76ec31cebf
6 changed files with 303 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/__celerity_resource_map__.php
View file

@ -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(

2
src/__phutil_library_map__.php
View file

@ -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',

190
src/applications/uiexample/examples/PHUIFeedStoryExample.php Normal file
View file

@ -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
));
}
}

2
src/applications/uiexample/examples/PhabricatorTagExample.php
View file

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

92
src/view/phui/PHUIFeedStoryView.php
View file

@ -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));
}
}

45
webroot/rsrc/css/phui/phui-feed-story.css
View file

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