From 53f527f71fb320375768e0564c392dceee06557b Mon Sep 17 00:00:00 2001 From: epriestley Date: Fri, 22 Feb 2013 06:53:54 -0800 Subject: [PATCH] Improve thumbnails in pholio mock view Summary: - Use "preview" instead of "thumb" so we don't get a white background. - Give this element a darker gutter to separate it a little bit visually. - Put every thumb on a square hit target. - Add some color/border/hover stuff. - Ship down image dimensions. - Reduce thumb size to 140 so we can fit 2-up on mobile when we get there. Test Plan: Before: {F33545} After: {F33546} Reviewers: chad, ljalonen Reviewed By: ljalonen CC: aran Differential Revision: https://secure.phabricator.com/D5070 --- .../files/PhabricatorImageTransformer.php | 14 +++++++--- .../PhabricatorFileTransformController.php | 3 +++ .../files/storage/PhabricatorFile.php | 6 +++++ .../pholio/view/PholioMockImagesView.php | 27 ++++++++++++++----- .../rsrc/css/application/pholio/pholio.css | 26 +++++++++++++++--- 5 files changed, 61 insertions(+), 15 deletions(-) diff --git a/src/applications/files/PhabricatorImageTransformer.php b/src/applications/files/PhabricatorImageTransformer.php index c3a10e4816..0ec46960cb 100644 --- a/src/applications/files/PhabricatorImageTransformer.php +++ b/src/applications/files/PhabricatorImageTransformer.php @@ -181,11 +181,17 @@ final class PhabricatorImageTransformer { } public static function getPreviewDimensions(PhabricatorFile $file, $size) { - $data = $file->loadFileData(); - $src = imagecreatefromstring($data); + $metadata = $file->getMetadata(); + $x = idx($metadata, PhabricatorFile::METADATA_IMAGE_WIDTH); + $y = idx($metadata, PhabricatorFile::METADATA_IMAGE_HEIGHT); - $x = imagesx($src); - $y = imagesy($src); + if (!$x || !$y) { + $data = $file->loadFileData(); + $src = imagecreatefromstring($data); + + $x = imagesx($src); + $y = imagesy($src); + } $scale = min($size / $x, $size / $y, 1); diff --git a/src/applications/files/controller/PhabricatorFileTransformController.php b/src/applications/files/controller/PhabricatorFileTransformController.php index 90f926439a..3cf5adeece 100644 --- a/src/applications/files/controller/PhabricatorFileTransformController.php +++ b/src/applications/files/controller/PhabricatorFileTransformController.php @@ -52,6 +52,9 @@ final class PhabricatorFileTransformController case 'thumb-220x165': $xformed_file = $this->executeThumbTransform($file, 220, 165); break; + case 'preview-140': + $xformed_file = $this->executePreviewTransform($file, 140); + break; case 'preview-220': $xformed_file = $this->executePreviewTransform($file, 220); break; diff --git a/src/applications/files/storage/PhabricatorFile.php b/src/applications/files/storage/PhabricatorFile.php index 1ddbb34c7a..1f3c46e20d 100644 --- a/src/applications/files/storage/PhabricatorFile.php +++ b/src/applications/files/storage/PhabricatorFile.php @@ -457,6 +457,12 @@ final class PhabricatorFile extends PhabricatorFileDAO return PhabricatorEnv::getCDNURI($path); } + public function getPreview140URI() { + $path = '/file/xform/preview-140/'.$this->getPHID().'/' + .$this->getSecretKey().'/'; + return PhabricatorEnv::getCDNURI($path); + } + public function getPreview220URI() { $path = '/file/xform/preview-220/'.$this->getPHID().'/' .$this->getSecretKey().'/'; diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index b473e351b7..efa3917d14 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -21,7 +21,7 @@ final class PholioMockImagesView extends AphrontView { 'mockID' => $this->mock->getID()); Javelin::initBehavior('pholio-mock-view', $config); - $mockview = ""; + $mockview = ''; $main_image = head($this->mock->getImages()); @@ -55,7 +55,7 @@ final class PholioMockImagesView extends AphrontView { 'sigil' => 'mock-inline-comments', 'class' => 'pholio-mock-inline-comments' ), - ""); + ''); $mockview[] = phutil_tag( 'div', @@ -70,18 +70,31 @@ final class PholioMockImagesView extends AphrontView { foreach ($this->mock->getImages() as $image) { $thumbfile = $image->getFile(); - $tag = javelin_tag( + $dimensions = PhabricatorImageTransformer::getPreviewDimensions( + $thumbfile, + 140); + + $tag = phutil_tag( 'img', array( - 'src' => $thumbfile->getThumb160x120URI(), - 'sigil' => 'mock-thumbnail', + 'width' => $dimensions['sdx'], + 'height' => $dimensions['sdy'], + 'src' => $thumbfile->getPreview140URI(), 'class' => 'pholio-mock-carousel-thumbnail', + 'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px', + )); + + $thumbnails[] = javelin_tag( + 'div', + array( + 'sigil' => 'mock-thumbnail', + 'class' => 'pholio-mock-carousel-thumb-item', 'meta' => array( 'fullSizeURI' => $thumbfile->getBestURI(), 'imageID' => $image->getID() ), - )); - $thumbnails[] = $tag; + ), + $tag); } $mockview[] = phutil_tag( diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index c9438de7b4..9e851b2cd2 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -8,14 +8,32 @@ } .pholio-mock-carousel { - background-color: #282828; + background-color: #202020; text-align: center; + border-top: 1px solid #101010; +} + +.pholio-mock-carousel-thumb-item { + display: inline-block; + cursor: pointer; + width: 140px; + height: 140px; + padding: 5px; + margin: 3px; + background: #282828; + vertical-align: middle; + border: 1px solid #383838; + position: relative; +} + +.device-desktop .pholio-mock-carousel-thumb-item:hover { + background: #383838; + border-color: #686868; } .pholio-mock-carousel-thumbnail { - margin-right: 5px; - display: inline-block; - cursor: pointer; + margin: auto; + position: relative; } .pholio-mock-image {