revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00
Code Issues Releases Wiki Activity

Show all photos in a Pholio mock and allow switching between them

Browse source 
Summary: Mock page now shows all images. Switching between images is done by clicking thumbnails.

Test Plan: Verified that all images are shown. Verified that by clicking thumbnail the image clicked will show.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2427

Differential Revision: https://secure.phabricator.com/D4698
This commit is contained in:
Lauri-Henrik Jalonen 2013-01-28 11:18:50 -08:00 committed by epriestley
parent 5dc48c2b4a
commit 8ac1afc81a
5 changed files with 90 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/__celerity_resource_map__.php
View file

@ -1834,6 +1834,17 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/phame/phame-post-preview.js',
),
'javelin-behavior-pholio-mock-view' =>
array(
'uri' => '/res/10fbdca1/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-behavior',
1 => 'javelin-stratcom',
),
'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
),
'javelin-behavior-phriction-document-preview' =>
array(
'uri' => '/res/f1665ecd/rsrc/js/application/phriction/phriction-document-preview.js',
@ -3165,7 +3176,7 @@ celerity_register_resource_map(array(
),
'pholio-css' =>
array(
'uri' => '/res/e454c33f/rsrc/css/application/pholio/pholio.css',
'uri' => '/res/8d8d99c1/rsrc/css/application/pholio/pholio.css',
'type' => 'css',
'requires' =>
array(

5
src/applications/pholio/controller/PholioMockViewController.php
View file

@ -67,8 +67,6 @@ final class PholioMockViewController extends PholioController {
$output = new PholioMockImagesView();
$output->setMock($mock);
$carousel = $output->render();
$xaction_view = id(new PhabricatorApplicationTransactionView())
->setUser($this->getRequest()->getUser())
->setTransactions($xactions)
@ -80,11 +78,12 @@ final class PholioMockViewController extends PholioController {
$header,
$actions,
$properties,
$carousel,
$output->render(),
$xaction_view,
$add_comment,
);
return $this->buildApplicationPage(
$content,
array(

47
src/applications/pholio/view/PholioMockImagesView.php
View file

@ -13,22 +13,59 @@ final class PholioMockImagesView extends AphrontView {
throw new Exception("Call setMock() before render()!");
}
$mockview = "";
$file = head($this->mock->getImages())->getFile();
$image_tag = phutil_render_tag(
$main_image_id = celerity_generate_unique_node_id();
$main_image_tag = phutil_render_tag(
'img',
array(
'src' => $file->getBestURI(),
'class' => 'pholio-mock-image',
),
'');
'id' => $main_image_id,
));
return phutil_render_tag(
$mockview .= phutil_render_tag(
'div',
array(
'class' => 'pholio-mock-image-container',
),
$image_tag);
$main_image_tag);
if (count($this->mock->getImages()) > 1) {
require_celerity_resource('javelin-behavior-pholio-mock-view');
$config = array('mainID' => $main_image_id);
Javelin::initBehavior('pholio-mock-view', $config);
$thumbnails = array();
foreach ($this->mock->getImages() as $image) {
$thumbfile = $image->getFile();
$tag = javelin_render_tag(
'img',
array(
'src' => $thumbfile->getThumb160x120URI(),
'sigil' => 'mock-thumbnail',
'class' => 'pholio-mock-carousel-thumbnail',
'meta' => array(
'fullSizeURI' => $thumbfile->getBestURI(),
'imageID' => $image->getID(),
),
));
$thumbnails[] = $tag;
}
$mockview .= phutil_render_tag(
'div',
array(
'class' => 'pholio-mock-carousel',
),
implode($thumbnails));
}
return $mockview;
}
}

10
webroot/rsrc/css/application/pholio/pholio.css
View file

@ -6,6 +6,16 @@
text-align: center;
}
.pholio-mock-carousel {
background-color: #282828;
text-align: center;
}
.pholio-mock-carousel-thumbnail {
margin-right: 5px;
display: inline-block;
}
.pholio-mock-image {
margin: 10px 0px;
display: inline-block;

17
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js Normal file
View file

@ -0,0 +1,17 @@
/**
* @provides javelin-behavior-pholio-mock-view
* @requires javelin-behavior
* javelin-stratcom
*/
JX.behavior('pholio-mock-view', function(config) {
JX.Stratcom.listen(
'click', // Listen for clicks...
'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
function(e) {
var data = e.getNodeData('mock-thumbnail');
var main = JX.$(config.mainID);
main.src = data.fullSizeURI;
});
});