@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
Use PHUIPinboard UI for embedding Pholio Mocks
Summary: Changes the old dark embed to match the PinboardView. Retains ability to target individual files. Removes "carousel" of files (not super useful?)
Test Plan:
Tested embedding Mocks, with and without targeting specific files. Tested Pholio Pinboard, Macro Pinboard.
{F166451}
{F166452}
{F166453}
{F166454}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9531
+59
-145
+4
-4
resources/celerity/map.php
+4
-4
resources/celerity/map.php
···
81
81
'rsrc/css/application/phame/phame.css' => '19ecc703',
82
82
'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
83
83
'rsrc/css/application/pholio/pholio-inline-comments.css' => '52be33f0',
84
-
'rsrc/css/application/pholio/pholio.css' => 'e059f955',
84
+
'rsrc/css/application/pholio/pholio.css' => '005be8e1',
85
85
'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
86
86
'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
87
87
'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
···
135
135
'rsrc/css/phui/phui-list.css' => '43ed2d93',
136
136
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
137
137
'rsrc/css/phui/phui-object-item-list-view.css' => '46e12abc',
138
-
'rsrc/css/phui/phui-pinboard-view.css' => '32e8e1a9',
138
+
'rsrc/css/phui/phui-pinboard-view.css' => '2c8abb19',
139
139
'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8',
140
140
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
141
141
'rsrc/css/phui/phui-spacing.css' => '042804d6',
···
739
739
'phabricator-uiexample-reactor-sendproperties' => '551add57',
740
740
'phabricator-zindex-css' => 'efb673ac',
741
741
'phame-css' => '19ecc703',
742
-
'pholio-css' => 'e059f955',
742
+
'pholio-css' => '005be8e1',
743
743
'pholio-edit-css' => 'b9e59b6d',
744
744
'pholio-inline-comments-css' => '52be33f0',
745
745
'phortune-credit-card-form' => '2290aeef',
···
764
764
'phui-list-view-css' => '43ed2d93',
765
765
'phui-object-box-css' => 'ce92d8ec',
766
766
'phui-object-item-list-view-css' => '46e12abc',
767
-
'phui-pinboard-view-css' => '32e8e1a9',
767
+
'phui-pinboard-view-css' => '2c8abb19',
768
768
'phui-property-list-view-css' => '2f7199e8',
769
769
'phui-remarkup-preview-css' => '19ad512b',
770
770
'phui-spacing-css' => '042804d6',
+1
src/applications/pholio/remarkup/PholioRemarkupRule.php
+1
src/applications/pholio/remarkup/PholioRemarkupRule.php
+22
-85
src/applications/pholio/view/PholioMockEmbedView.php
+22
-85
src/applications/pholio/view/PholioMockEmbedView.php
···
22
22
if (!$this->mock) {
23
23
throw new Exception('Call setMock() before render()!');
24
24
}
25
-
26
-
require_celerity_resource('pholio-css');
27
-
28
-
$mock_link = phutil_tag(
29
-
'a',
30
-
array(
31
-
'href' => '/M'.$this->mock->getID(),
32
-
),
33
-
'M'.$this->mock->getID().' '.$this->mock->getName());
34
-
35
-
$mock_header = phutil_tag(
36
-
'div',
37
-
array(
38
-
'class' => 'pholio-mock-embed-head',
39
-
),
40
-
$mock_link);
25
+
$mock = $this->mock;
41
26
42
27
$images_to_show = array();
28
+
$thumbnail = null;
43
29
if (!empty($this->images)) {
44
30
$images_to_show = array_intersect_key(
45
31
$this->mock->getImages(), array_flip($this->images));
46
-
}
47
-
48
-
if (empty($images_to_show)) {
49
-
$images_to_show = array_slice($this->mock->getImages(), 0, 4);
32
+
foreach ($images_to_show as $image) {
33
+
$thumbfile = $image->getFile();
34
+
$thumbnail = $thumbfile->getThumb280x210URI();
35
+
}
36
+
$header = 'M'.$mock->getID().' '.$mock->getName().
37
+
' (#'.$image->getID().')';
38
+
$uri = '/M'.$this->mock->getID().'/'.$image->getID().'/';
39
+
} else {
40
+
$thumbnail = $mock->getCoverFile()->getThumb280x210URI();
41
+
$header = 'M'.$mock->getID().' '.$mock->getName();
42
+
$uri = '/M'.$this->mock->getID();
50
43
}
51
44
52
-
$thumbnails = array();
53
-
foreach ($images_to_show as $image) {
54
-
$thumbfile = $image->getFile();
45
+
$item = id(new PHUIPinboardItemView())
46
+
->setHeader($header)
47
+
->setURI($uri)
48
+
->setImageURI($thumbnail)
49
+
->setImageSize(280, 210)
50
+
->setDisabled($mock->isClosed())
51
+
->addIconCount('fa-picture-o', count($mock->getImages()))
52
+
->addIconCount('fa-trophy', $mock->getTokenCount());
55
53
56
-
$dimensions = PhabricatorImageTransformer::getPreviewDimensions(
57
-
$thumbfile,
58
-
140);
59
-
60
-
$tag = phutil_tag(
61
-
'img',
62
-
array(
63
-
'width' => $dimensions['sdx'],
64
-
'height' => $dimensions['sdy'],
65
-
'class' => 'pholio-mock-carousel-thumbnail',
66
-
'src' => $thumbfile->getPreview140URI(),
67
-
'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px',
68
-
));
69
-
70
-
$thumbnails[] = javelin_tag(
71
-
'a',
72
-
array(
73
-
'class' => 'pholio-mock-carousel-thumb-item',
74
-
'href' => '/M'.$this->mock->getID().'/'.$image->getID().'/',
75
-
),
76
-
$tag);
77
-
}
78
-
79
-
$mock_body = phutil_tag(
80
-
'div',
81
-
array(),
82
-
$thumbnails);
83
-
84
-
$icons_data = array(
85
-
'fa-picture-o' => count($this->mock->getImages()),
86
-
'fa-trophy' => $this->mock->getTokenCount());
87
-
88
-
$icon_list = array();
89
-
foreach ($icons_data as $icon_name => $icon_value) {
90
-
$icon = id(new PHUIIconView())
91
-
->setIconFont($icon_name.' white')
92
-
->addClass('pholio-mock-embed-icon');
93
-
94
-
$count = phutil_tag('span', array(), $icon_value);
95
-
96
-
$icon_list[] = phutil_tag(
97
-
'span',
98
-
array(
99
-
'class' => 'pholio-mock-embed-icons'
100
-
),
101
-
array($icon, $count));
102
-
}
103
-
104
-
$mock_footer = phutil_tag(
105
-
'div',
106
-
array(
107
-
'class' => 'pholio-mock-embed-footer',
108
-
),
109
-
$icon_list);
110
-
111
-
112
-
return phutil_tag(
113
-
'div',
114
-
array(
115
-
'class' => 'pholio-mock-embed'
116
-
),
117
-
array($mock_header, $mock_body, $mock_footer));
54
+
return $item;
118
55
}
119
56
}
+17
-13
src/view/phui/PHUIPinboardItemView.php
+17
-13
src/view/phui/PHUIPinboardItemView.php
···
43
43
}
44
44
45
45
public function render() {
46
+
require_celerity_resource('phui-pinboard-view-css');
46
47
$header = null;
47
48
if ($this->header) {
48
49
if ($this->disabled) {
···
59
60
phutil_tag('a', array('href' => $this->uri), $this->header));
60
61
}
61
62
62
-
$image = phutil_tag(
63
-
'a',
64
-
array(
65
-
'href' => $this->uri,
66
-
'class' => 'phui-pinboard-item-image-link',
67
-
),
68
-
phutil_tag(
69
-
'img',
63
+
$image = null;
64
+
if ($this->imageWidth) {
65
+
$image = phutil_tag(
66
+
'a',
70
67
array(
71
-
'src' => $this->imageURI,
72
-
'width' => $this->imageWidth,
73
-
'height' => $this->imageHeight,
74
-
)));
68
+
'href' => $this->uri,
69
+
'class' => 'phui-pinboard-item-image-link',
70
+
),
71
+
phutil_tag(
72
+
'img',
73
+
array(
74
+
'src' => $this->imageURI,
75
+
'width' => $this->imageWidth,
76
+
'height' => $this->imageHeight,
77
+
)));
78
+
}
75
79
76
80
$icons = array();
77
81
if ($this->iconBlock) {
···
121
125
array(
122
126
$header,
123
127
$image,
124
-
$icons,
125
128
$content,
129
+
$icons,
126
130
));
127
131
}
128
132
-34
webroot/rsrc/css/application/pholio/pholio.css
-34
webroot/rsrc/css/application/pholio/pholio.css
···
146
146
background: url(/rsrc/image/darkload.gif) no-repeat center;
147
147
}
148
148
149
-
.pholio-mock-embed {
150
-
display: inline-block;
151
-
background-color: #282828;
152
-
padding: 5px;
153
-
color: #fff;
154
-
margin: 2px;
155
-
}
156
-
157
-
.pholio-mock-embed-head {
158
-
border-bottom: 1px solid #3d3d3d;
159
-
padding: 2px;
160
-
margin:2px;
161
-
}
162
-
163
-
.pholio-mock-embed-footer {
164
-
margin: 2px 0;
165
-
}
166
-
167
-
.pholio-mock-embed-icons {
168
-
float: left;
169
-
margin-left: 10px;
170
-
}
171
-
172
-
.pholio-mock-embed-icon {
173
-
height: 14px;
174
-
width: 14px;
175
-
padding: 2px 4px 0 0;
176
-
}
177
-
178
-
.pholio-mock-embed-head a {
179
-
color: #fff;
180
-
font-weight: bold;
181
-
}
182
-
183
149
.pholio-transaction-inline-comment {
184
150
display: table-row;
185
151
}
+15
-9
webroot/rsrc/css/phui/phui-pinboard-view.css
+15
-9
webroot/rsrc/css/phui/phui-pinboard-view.css
···
18
18
border-radius: 3px;
19
19
border: 1px solid {$lightblueborder};
20
20
border-bottom: 1px solid {$blueborder};
21
-
float: left;
21
+
text-align: left;
22
22
width: 288px;
23
-
text-align: left;
23
+
}
24
+
25
+
.phui-pinboard-view .phui-pinboard-item-view {
26
+
float: left;
24
27
}
25
28
26
29
.device-desktop .phui-pinboard-item-view:hover {
···
34
37
}
35
38
36
39
.phui-pinboard-item-header {
37
-
padding: 4px 8px;
40
+
padding: 6px 8px;
38
41
display: block;
39
42
font-weight: bold;
40
43
border-top-left-radius: 3px;
···
54
57
}
55
58
56
59
.phui-pinboard-item-content {
57
-
padding: 0 8px 4px;
60
+
padding: 8px;
58
61
overflow: hidden;
59
-
color: {$greytext};
60
-
font-size: 11px;
62
+
color: {$bluetext};
63
+
font-size: 12px;
64
+
}
65
+
66
+
.phui-pinboard-item-content + .phui-pinboard-icons,
67
+
.phui-pinboard-item-image-link + .phui-pinboard-icons {
68
+
border-top: 1px solid {$thinblueborder};
61
69
}
62
70
63
71
.phui-pinboard-item-count {
···
66
74
}
67
75
68
76
.phui-pinboard-icons {
69
-
padding: 0 8px 8px 0;
77
+
padding: 4px 8px 4px 0;
70
78
color: {$darkbluetext};
71
-
border-bottom: 1px solid {$lightblueborder};
72
-
margin-bottom: 5px;
73
79
overflow: hidden;
74
80
}
75
81