1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Add transparency to Pholio Edit thumbs

Summary: Makes the background transparent for uploaded thumbs. This page in general needs lots of work, but here's the minimum. Fixes T10986

Test Plan: Edit a Mock with a transparent jeff.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T10986

Differential Revision: https://secure.phabricator.com/D15957
This commit is contained in:
Chad Little 2016-05-20 13:36:11 -07:00
parent 969d3be035
commit 804a5db41a
3 changed files with 20 additions and 13 deletions

View file

@ -82,7 +82,7 @@ return array(
'rsrc/css/application/paste/paste.css' => '1898e534',
'rsrc/css/application/people/people-profile.css' => '2473d929',
'rsrc/css/application/phame/phame.css' => '737792d6',
'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
'rsrc/css/application/pholio/pholio-edit.css' => 'b15fec4a',
'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
'rsrc/css/application/pholio/pholio.css' => 'ca89d380',
'rsrc/css/application/phortune/phortune-credit-card-form.css' => '8391eb02',
@ -804,7 +804,7 @@ return array(
'phabricator-zindex-css' => '5b6fcf3f',
'phame-css' => '737792d6',
'pholio-css' => 'ca89d380',
'pholio-edit-css' => '3ad9d1ee',
'pholio-edit-css' => 'b15fec4a',
'pholio-inline-comments-css' => '8e545e49',
'phortune-credit-card-form' => '2290aeef',
'phortune-credit-card-form-css' => '8391eb02',

View file

@ -42,12 +42,19 @@ final class PholioUploadedImageView extends AphrontView {
PhabricatorFileThumbnailTransform::TRANSFORM_PINBOARD);
$thumbnail_uri = $file->getURIForTransform($xform);
$thumb_img = phutil_tag(
'img',
array(
'class' => 'pholio-thumb-img',
'src' => $thumbnail_uri,
));
$thumb_frame = phutil_tag(
'div',
array(
'class' => 'pholio-thumb-frame',
'style' => 'background-image: url('.$thumbnail_uri.');',
));
),
$thumb_img);
$handle = javelin_tag(
'div',

View file

@ -17,8 +17,8 @@
.pholio-thumb-box {
margin: 2px 0;
float: left;
background: #f7f7f7;
border: 1px solid #D5D9DF;
background: {$lightgreybackground};
border: 1px solid {$lightgreyborder};
border-radius: 3px;
width: 296px;
overflow: hidden;
@ -38,16 +38,16 @@
margin: 0 auto;
}
.pholio-thumb-frame {
background-color: #ffffff;
background-position: center center;
background-repeat: no-repeat;
background-size: 280px 210px;
width: 280px;
height: 210px;
.pholio-thumb-img {
max-width: 280px;
max-height: 210px;
padding: 8px;
}
.pholio-thumb-frame {
background: url('/rsrc/image/checker_lighter.png');
}
.device .pholio-thumb-frame {
width: 100%;
}