From 76880916d005781d81b1945c5120d4234543e4c8 Mon Sep 17 00:00:00 2001 From: Lauri-Henrik Jalonen Date: Thu, 7 Mar 2013 08:23:40 -0800 Subject: [PATCH] Pholio mocks embed in a fancy way Summary: Pholio mocks are now embed in a fancy way Test Plan: {F34804} Reviewers: epriestley Reviewed By: epriestley CC: chad, aran, Korvin, AnhNhan Maniphest Tasks: T2626 Differential Revision: https://secure.phabricator.com/D5249 --- src/__celerity_resource_map__.php | 2 +- src/__phutil_library_map__.php | 2 + .../pholio/remarkup/PholioRemarkupRule.php | 9 ++ .../pholio/view/PholioMockEmbedView.php | 106 ++++++++++++++++++ .../rsrc/css/application/pholio/pholio.css | 36 ++++++ 5 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 src/applications/pholio/view/PholioMockEmbedView.php diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 2850a12160..b413bd5b84 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3283,7 +3283,7 @@ celerity_register_resource_map(array( ), 'pholio-css' => array( - 'uri' => '/res/3d3cc404/rsrc/css/application/pholio/pholio.css', + 'uri' => '/res/4535277b/rsrc/css/application/pholio/pholio.css', 'type' => 'css', 'requires' => array( diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index cac6e83c72..89f3484930 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1467,6 +1467,7 @@ phutil_register_library_map(array( 'PholioMockCommentController' => 'applications/pholio/controller/PholioMockCommentController.php', 'PholioMockEditController' => 'applications/pholio/controller/PholioMockEditController.php', 'PholioMockEditor' => 'applications/pholio/editor/PholioMockEditor.php', + 'PholioMockEmbedView' => 'applications/pholio/view/PholioMockEmbedView.php', 'PholioMockImagesView' => 'applications/pholio/view/PholioMockImagesView.php', 'PholioMockListController' => 'applications/pholio/controller/PholioMockListController.php', 'PholioMockQuery' => 'applications/pholio/query/PholioMockQuery.php', @@ -2969,6 +2970,7 @@ phutil_register_library_map(array( 'PholioMockCommentController' => 'PholioController', 'PholioMockEditController' => 'PholioController', 'PholioMockEditor' => 'PhabricatorApplicationTransactionEditor', + 'PholioMockEmbedView' => 'AphrontView', 'PholioMockImagesView' => 'AphrontView', 'PholioMockListController' => 'PholioController', 'PholioMockQuery' => 'PhabricatorCursorPagedPolicyAwareQuery', diff --git a/src/applications/pholio/remarkup/PholioRemarkupRule.php b/src/applications/pholio/remarkup/PholioRemarkupRule.php index 85204eff16..13cdd0333b 100644 --- a/src/applications/pholio/remarkup/PholioRemarkupRule.php +++ b/src/applications/pholio/remarkup/PholioRemarkupRule.php @@ -11,8 +11,17 @@ final class PholioRemarkupRule $viewer = $this->getEngine()->getConfig('viewer'); return id(new PholioMockQuery()) ->setViewer($viewer) + ->needImages(true) + ->needTokenCounts(true) ->withIDs($ids) ->execute(); } + protected function renderObjectEmbed($object, $handle, $options) { + $embed_mock = id(new PholioMockEmbedView()) + ->setMock($object); + + return $embed_mock->render(); + } + } diff --git a/src/applications/pholio/view/PholioMockEmbedView.php b/src/applications/pholio/view/PholioMockEmbedView.php new file mode 100644 index 0000000000..27f7674725 --- /dev/null +++ b/src/applications/pholio/view/PholioMockEmbedView.php @@ -0,0 +1,106 @@ +mock = $mock; + return $this; + } + + public function render() { + if (!$this->mock) { + throw new Exception("Call setMock() before render()!"); + } + + require_celerity_resource('pholio-css'); + + + $mock_link = phutil_tag( + 'a', + array( + 'href' => '/M'.$this->mock->getID(), + ), + 'M'.$this->mock->getID().' '.$this->mock->getName()); + + $mock_header = phutil_tag( + 'div', + array( + 'class' => 'pholio-mock-embed-head', + ), + $mock_link); + + $thumbnails = array(); + foreach (array_slice($this->mock->getImages(), 0, 4) as $image) { + $thumbfile = $image->getFile(); + + $dimensions = PhabricatorImageTransformer::getPreviewDimensions( + $thumbfile, + 140); + + $tag = phutil_tag( + 'img', + array( + 'width' => $dimensions['sdx'], + 'height' => $dimensions['sdy'], + 'class' => 'pholio-mock-carousel-thumbnail', + 'src' => $thumbfile->getPreview140URI(), + 'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px', + )); + + $thumbnails[] = javelin_tag( + 'a', + array( + 'class' => 'pholio-mock-carousel-thumb-item', + 'href' => '/M'.$this->mock->getID().'/'.$image->getID().'/', + ), + $tag); + } + + $mock_body = phutil_tag( + 'div', + array(), + $thumbnails); + + $icons_data = array( + 'image' => count($this->mock->getImages()), + 'like' => $this->mock->getTokenCount()); + + $icon_list = array(); + foreach ($icons_data as $icon_name => $icon_value) { + $icon = phutil_tag( + 'span', + array( + 'class' => + 'pholio-mock-embed-icon sprite-icon action-'.$icon_name.'-grey', + ), + ' '); + $count = phutil_tag('span', array(), $icon_value); + + $icon_list[] = phutil_tag( + 'span', + array( + 'class' => 'pholio-mock-embed-icons' + ), + array($icon, $count)); + } + + $mock_footer = phutil_tag( + 'div', + array( + 'class' => 'pholio-mock-embed-footer', + ), + $icon_list); + + + $mock_view = phutil_tag( + 'div', + array( + 'class' => 'pholio-mock-embed' + ), + array($mock_header, $mock_body, $mock_footer)); + + return $this->renderSingleView($mock_view); + } +} diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index f605508b87..03f7f94297 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -126,3 +126,39 @@ .pholio-device-lightbox-loading { background: url(/rsrc/image/darkload.gif) no-repeat center; } + +.pholio-mock-embed { + display: inline-block; + background-color: #282828; + padding: 5px; + color: #fff; +} + +.pholio-mock-embed-head { + border-bottom: 1px solid #3d3d3d; + padding: 2px; + margin:2px; +} + +.pholio-mock-embed-footer { + margin: 2px; + color: #aaa; +} + +.pholio-mock-embed-icons { + float: left; + margin-left: 10px; +} + +.pholio-mock-embed-icon { + height: 14px; + width: 14px; + float: left; + padding-left: 2px; + margin-right: 2px; +} + +.pholio-mock-embed-head a { + color: #fff; + font-weight: bold; +}