@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+303
-30
+1
-1
src/__celerity_resource_map__.php
+1
-1
src/__celerity_resource_map__.php
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
666
666
'PHUI' => 'view/phui/PHUI.php',
667
667
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
668
668
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
669
+
'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
669
670
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
670
671
'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
671
672
'PHUIIconView' => 'view/phui/PHUIIconView.php',
···
2374
2375
'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
2375
2376
'PHUIBoxExample' => 'PhabricatorUIExample',
2376
2377
'PHUIBoxView' => 'AphrontTagView',
2378
+
'PHUIFeedStoryExample' => 'PhabricatorUIExample',
2377
2379
'PHUIFeedStoryView' => 'AphrontView',
2378
2380
'PHUIIconExample' => 'PhabricatorUIExample',
2379
2381
'PHUIIconView' => 'AphrontTagView',
+190
src/applications/uiexample/examples/PHUIFeedStoryExample.php
+190
src/applications/uiexample/examples/PHUIFeedStoryExample.php
···
1
+
<?php
2
+
3
+
final class PHUIFeedStoryExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return 'Feed Story';
7
+
}
8
+
9
+
public function getDescription() {
10
+
return 'An outlandish exaggeration of intricate tales from '.
11
+
'around the realm';
12
+
}
13
+
14
+
public function renderExample() {
15
+
$request = $this->getRequest();
16
+
$user = $request->getUser();
17
+
18
+
/* Basic "One Line" Story */
19
+
$text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> closed <a>'.
20
+
'D12: New spacer classes for blog views</a>.');
21
+
$story1 = id(new PHUIFeedStoryView())
22
+
->setTitle($text)
23
+
->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
24
+
->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
25
+
->setEpoch(1)
26
+
->setAppIcon('differential-dark')
27
+
->setUser($user);
28
+
29
+
/* Text Story, useful in Blogs, Ponders, Status */
30
+
$tokens = array(
31
+
'like-1',
32
+
'like-2',
33
+
'heart-1',
34
+
'heart-2');
35
+
$tokenview = array();
36
+
foreach ($tokens as $token) {
37
+
$tokenview[] =
38
+
id(new PHUIIconView())
39
+
->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
40
+
->setSpriteIcon($token);
41
+
}
42
+
$text = hsprintf('<strong><a>lincoln (Honest Abe)</a></strong> wrote a '.
43
+
'new blog post.');
44
+
$story2 = id(new PHUIFeedStoryView())
45
+
->setTitle($text)
46
+
->setImage(celerity_get_resource_uri('/rsrc/image/people/lincoln.png'))
47
+
->setImageHref('http://en.wikipedia.org/wiki/Abraham_Lincoln')
48
+
->setEpoch(strtotime('November 19, 1863'))
49
+
->setAppIcon('phame-dark')
50
+
->setUser($user)
51
+
->setTokenBar($tokenview)
52
+
->setPontification('Four score and seven years ago our fathers brought '.
53
+
'forth on this continent, a new nation, conceived in Liberty, and '.
54
+
'dedicated to the proposition that all men are created equal. '.
55
+
'Now we are engaged in a great civil war, testing whether that '.
56
+
'nation, or any nation so conceived and so dedicated, can long '.
57
+
'endure. We are met on a great battle-field of that war. We have '.
58
+
'come to dedicate a portion of that field, as a final resting '.
59
+
'place for those who here gave their lives that that nation might '.
60
+
'live. It is altogether fitting and proper that we should do this.',
61
+
'Gettysburg Address');
62
+
63
+
/* Action Story, let's give people tokens! */
64
+
65
+
$text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> awarded '.
66
+
'<a>M10: Workboards</a> a token.');
67
+
$action1 = id(new PHUIIconView())
68
+
->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
69
+
->setSpriteIcon('token-grey')
70
+
->setHref('#');
71
+
$token =
72
+
id(new PHUIIconView())
73
+
->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
74
+
->setSpriteIcon('like-1');
75
+
$story3 = id(new PHUIFeedStoryView())
76
+
->setTitle($text)
77
+
->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
78
+
->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
79
+
->appendChild($token)
80
+
->setEpoch(1)
81
+
->addAction($action1)
82
+
->setAppIcon('token-dark')
83
+
->setUser($user);
84
+
85
+
/* Image Story, used in Pholio, Macro */
86
+
$text = hsprintf('<strong><a>wgharding (Warren Harding)</a></strong> '.
87
+
'asked a new question.');
88
+
$action1 = id(new PHUIIconView())
89
+
->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
90
+
->setSpriteIcon('up-grey')
91
+
->setHref('#');
92
+
$action2 = id(new PHUIIconView())
93
+
->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
94
+
->setSpriteIcon('down-grey')
95
+
->setHref('#');
96
+
$story4 = id(new PHUIFeedStoryView())
97
+
->setTitle($text)
98
+
->setImage(celerity_get_resource_uri('/rsrc/image/people/harding.png'))
99
+
->setImageHref('http://en.wikipedia.org/wiki/Warren_G._Harding')
100
+
->setEpoch(1)
101
+
->setAppIcon('ponder-dark')
102
+
->setPontification('Why does inline-block add space under my spans and '.
103
+
'anchors?')
104
+
->addAction($action1)
105
+
->addAction($action2)
106
+
->setUser($user);
107
+
108
+
/* Text Story, useful in Blogs, Ponders, Status */
109
+
$text = hsprintf('<strong><a>lincoln (Honest Abe)</a></strong> updated '.
110
+
'his status.');
111
+
$story5 = id(new PHUIFeedStoryView())
112
+
->setTitle($text)
113
+
->setImage(celerity_get_resource_uri('/rsrc/image/people/lincoln.png'))
114
+
->setImageHref('http://en.wikipedia.org/wiki/Abraham_Lincoln')
115
+
->setEpoch(strtotime('November 19, 1863'))
116
+
->setAppIcon('phame-dark')
117
+
->setUser($user)
118
+
->setPontification('If we ever create a lightweight status app '.
119
+
'this story would be how that would be displayed.');
120
+
121
+
122
+
123
+
124
+
$head1 = id(new PhabricatorHeaderView())
125
+
->setHeader(pht('Basic "one-line" Story'));
126
+
127
+
$head2 = id(new PhabricatorHeaderView())
128
+
->setHeader(pht('Title / Text Story'));
129
+
130
+
$head3 = id(new PhabricatorHeaderView())
131
+
->setHeader(pht('Token Story'));
132
+
133
+
$head4 = id(new PhabricatorHeaderView())
134
+
->setHeader(pht('Action Story'));
135
+
136
+
$head5 = id(new PhabricatorHeaderView())
137
+
->setHeader(pht('Status Story'));
138
+
139
+
$wrap1 =
140
+
array(
141
+
id(new PHUIBoxView())
142
+
->appendChild($story1)
143
+
->addMargin(PHUI::MARGIN_MEDIUM)
144
+
->addPadding(PHUI::PADDING_SMALL));
145
+
146
+
$wrap2 =
147
+
array(
148
+
id(new PHUIBoxView())
149
+
->appendChild($story2)
150
+
->addMargin(PHUI::MARGIN_MEDIUM)
151
+
->addPadding(PHUI::PADDING_SMALL));
152
+
153
+
$wrap3 =
154
+
array(
155
+
id(new PHUIBoxView())
156
+
->appendChild($story3)
157
+
->addMargin(PHUI::MARGIN_MEDIUM)
158
+
->addPadding(PHUI::PADDING_SMALL));
159
+
160
+
$wrap4 =
161
+
array(
162
+
id(new PHUIBoxView())
163
+
->appendChild($story4)
164
+
->addMargin(PHUI::MARGIN_MEDIUM)
165
+
->addPadding(PHUI::PADDING_SMALL));
166
+
167
+
$wrap5 =
168
+
array(
169
+
id(new PHUIBoxView())
170
+
->appendChild($story5)
171
+
->addMargin(PHUI::MARGIN_MEDIUM)
172
+
->addPadding(PHUI::PADDING_SMALL));
173
+
174
+
return phutil_tag(
175
+
'div',
176
+
array(),
177
+
array(
178
+
$head1,
179
+
$wrap1,
180
+
$head2,
181
+
$wrap2,
182
+
$head3,
183
+
$wrap3,
184
+
$head4,
185
+
$wrap4,
186
+
$head5,
187
+
$wrap5
188
+
));
189
+
}
190
+
}
+1
-1
src/applications/uiexample/examples/PhabricatorTagExample.php
+1
-1
src/applications/uiexample/examples/PhabricatorTagExample.php
+73
-19
src/view/phui/PHUIFeedStoryView.php
+73
-19
src/view/phui/PHUIFeedStoryView.php
···
10
10
private $epoch;
11
11
private $viewed;
12
12
private $href;
13
+
private $pontification = null;
14
+
private $tokenBar = array();
15
+
private $projects = array();
16
+
private $actions = array();
13
17
14
18
public function setTitle($title) {
15
19
$this->title = $title;
···
50
54
return $this;
51
55
}
52
56
57
+
public function setTokenBar(array $tokens) {
58
+
$this->tokenBar = $tokens;
59
+
return $this;
60
+
}
61
+
62
+
public function addProject($project) {
63
+
$this->projects[] = $project;
64
+
return $this;
65
+
}
66
+
67
+
public function addAction(PHUIIconView $action) {
68
+
$this->actions[] = $action;
69
+
return $this;
70
+
}
71
+
72
+
public function setPontification($text, $title = null) {
73
+
if ($title) {
74
+
$title = phutil_tag('h3', array(), $title);
75
+
}
76
+
$copy = phutil_tag(
77
+
'div',
78
+
array(
79
+
'class' => 'phui-feed-story-bigtext-post',
80
+
),
81
+
array(
82
+
$title,
83
+
$text));
84
+
$this->appendChild($copy);
85
+
return $this;
86
+
}
87
+
53
88
public function getHref() {
54
89
return $this->href;
55
90
}
···
77
112
78
113
public function render() {
79
114
115
+
require_celerity_resource('phui-feed-story-css');
80
116
81
117
$actor = '';
82
118
if ($this->image) {
83
119
$actor = new PHUIIconView();
84
120
$actor->setImage($this->image);
121
+
$actor->addClass('phui-feed-story-actor-image');
85
122
if ($this->imageHref) {
86
123
$actor->setHref($this->imageHref);
87
124
}
88
125
}
89
126
127
+
$action_list = array();
128
+
$icons = null;
129
+
foreach ($this->actions as $action) {
130
+
$action_list[] = phutil_tag(
131
+
'li',
132
+
array(
133
+
'class' => 'phui-feed-story-action-item'
134
+
),
135
+
$action);
136
+
}
137
+
if (!empty($action_list)) {
138
+
$icons = phutil_tag(
139
+
'ul',
140
+
array(
141
+
'class' => 'phui-feed-story-action-list'
142
+
),
143
+
$action_list);
144
+
}
145
+
90
146
$head = phutil_tag(
91
147
'div',
92
148
array(
···
95
151
array(
96
152
$actor,
97
153
nonempty($this->title, pht('Untitled Story')),
154
+
$icons
98
155
));
99
156
100
157
$body = null;
101
158
$foot = null;
102
159
$image_style = null;
160
+
161
+
if (!empty($this->tokenBar)) {
162
+
$tokenview = phutil_tag(
163
+
'div',
164
+
array(
165
+
'class' => 'phui-feed-token-bar'
166
+
),
167
+
$this->tokenBar);
168
+
$this->appendChild($tokenview);
169
+
}
170
+
103
171
$body_content = $this->renderChildren();
104
172
if ($body_content) {
105
173
$body = phutil_tag(
···
132
200
$icon,
133
201
$foot));
134
202
135
-
require_celerity_resource('phui-feed-story-css');
136
-
137
-
$story = phutil_tag(
138
-
'div',
139
-
array(
140
-
'class' => 'phui-feed-story',
141
-
'style' => $image_style,
142
-
),
143
-
array(
144
-
$head,
145
-
$body,
146
-
$foot));
147
-
148
-
return phutil_tag(
149
-
'div',
150
-
array(
151
-
'class' => 'phui-feed-wrap'
152
-
),
153
-
$story);
203
+
return id(new PHUIBoxView())
204
+
->addClass('phui-feed-story')
205
+
->setShadow(true)
206
+
->addMargin(PHUI::MARGIN_MEDIUM_BOTTOM)
207
+
->appendChild(array($head, $body, $foot));
154
208
}
155
209
}
+36
-9
webroot/rsrc/css/phui/phui-feed-story.css
+36
-9
webroot/rsrc/css/phui/phui-feed-story.css
···
2
2
* @provides phui-feed-story-css
3
3
*/
4
4
5
-
.phui-feed-wrap {
6
-
border-left: 1px solid #e7e7e7;
7
-
border-right: 1px solid #e7e7e7;
8
-
border-bottom: 1px solid #c0c5d1;
9
-
margin-bottom: 15px;
10
-
}
11
-
12
5
.phui-feed-story {
13
6
background: 5px 2px no-repeat;
14
7
min-height: 50px;
15
8
background-color: #fff;
16
-
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
17
9
}
18
10
19
-
.phui-feed-story-head .phui-icon-item-link {
11
+
.phui-feed-story-head .phui-feed-story-actor-image {
20
12
width: 35px;
21
13
height: 35px;
22
14
background-size: 35px;
···
47
39
display: inline-block;
48
40
margin-right: 5px;
49
41
}
42
+
43
+
.phui-feed-story-bigtext-post {
44
+
font-size: 15px;
45
+
font-weight: 200;
46
+
line-height: 18px;
47
+
color: #444;
48
+
}
49
+
50
+
.phui-feed-story-bigtext-post h3 {
51
+
font-size: 24px;
52
+
font-weight: 100;
53
+
line-height: 18px;
54
+
color: #444;
55
+
margin: 10px 0;
56
+
}
57
+
58
+
.phui-feed-token-bar {
59
+
margin-top: 10px;
60
+
border-top: 1px solid #e7e7e7;
61
+
padding-top: 10px;
62
+
}
63
+
64
+
.phui-feed-token-bar .phui-icon-item-link {
65
+
margin-right: 2px;
66
+
}
67
+
68
+
.phui-feed-story-action-list {
69
+
float: right;
70
+
padding-top: 4px;
71
+
}
72
+
73
+
.phui-feed-story-action-item {
74
+
float: right;
75
+
padding-left: 2px;
76
+
}