From d85386488bf5419371dc4d608c65527d08b1ca1d Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 3 May 2016 13:53:12 -0700 Subject: [PATCH] Add "wide" remarkup image support for Documents Summary: Seems to work ok, if you give `size=wide` to an image file, we blow it out a bit in DocumentPro mode. Test Plan: Test in Phame and Maniphest. {F1256717} {F1256718} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15840 --- resources/celerity/map.php | 14 +++++++------- .../PhabricatorEmbedFileRemarkupRule.php | 8 ++++++++ webroot/rsrc/css/core/remarkup.css | 6 ++++-- webroot/rsrc/css/phui/phui-document-pro.css | 19 +++++++++++++++++++ webroot/rsrc/css/phui/phui-document.css | 1 - 5 files changed, 38 insertions(+), 10 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index e1e501b9d1..e31cea82c9 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '2bd78e9d', + 'core.pkg.css' => '5242a859', 'core.pkg.js' => '6972d365', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '7ba78475', @@ -104,7 +104,7 @@ return array( 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', 'rsrc/css/core/core.css' => 'd0801452', - 'rsrc/css/core/remarkup.css' => '6aae5360', + 'rsrc/css/core/remarkup.css' => '787105d6', 'rsrc/css/core/syntax.css' => '9fd11da8', 'rsrc/css/core/z-index.css' => '5b6fcf3f', 'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa', @@ -128,9 +128,9 @@ return array( 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 'rsrc/css/phui/phui-crumbs-view.css' => '1a1265d4', 'rsrc/css/phui/phui-curtain-view.css' => '7148ae25', - 'rsrc/css/phui/phui-document-pro.css' => '73e45fd2', + 'rsrc/css/phui/phui-document-pro.css' => '8419560b', 'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf', - 'rsrc/css/phui/phui-document.css' => '9c71d2bf', + 'rsrc/css/phui/phui-document.css' => '715aedfb', 'rsrc/css/phui/phui-feed-story.css' => 'aa49845d', 'rsrc/css/phui/phui-fontkit.css' => '9cda225e', 'rsrc/css/phui/phui-form-view.css' => '6a51768e', @@ -777,7 +777,7 @@ return array( 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => 'e67df814', - 'phabricator-remarkup-css' => '6aae5360', + 'phabricator-remarkup-css' => '787105d6', 'phabricator-search-results-css' => '7dea472c', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-side-menu-view-css' => 'dd849797', @@ -821,8 +821,8 @@ return array( 'phui-crumbs-view-css' => '1a1265d4', 'phui-curtain-view-css' => '7148ae25', 'phui-document-summary-view-css' => '9ca48bdf', - 'phui-document-view-css' => '9c71d2bf', - 'phui-document-view-pro-css' => '73e45fd2', + 'phui-document-view-css' => '715aedfb', + 'phui-document-view-pro-css' => '8419560b', 'phui-feed-story-css' => 'aa49845d', 'phui-font-icon-base-css' => '6449bce8', 'phui-fontkit-css' => '9cda225e', diff --git a/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php b/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php index ecb0e4fd09..22459a34ad 100644 --- a/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php +++ b/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php @@ -109,6 +109,14 @@ final class PhabricatorEmbedFileRemarkupRule ); $image_class = 'phabricator-remarkup-embed-image-full'; break; + // Displays "full" in normal Remarkup, "wide" in Documents + case 'wide': + $attrs += array( + 'src' => $file->getBestURI(), + 'width' => $file->getImageWidth(), + ); + $image_class = 'phabricator-remarkup-embed-image-wide'; + break; case 'thumb': default: $preview_key = PhabricatorFileThumbnailTransform::TRANSFORM_PREVIEW; diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 8f48d7228b..b4fa18ac8d 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -353,12 +353,14 @@ box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20); } -.phabricator-remarkup-embed-image-full { +.phabricator-remarkup-embed-image-full, +.phabricator-remarkup-embed-image-wide { display: inline-block; max-width: 100%; } -.phabricator-remarkup-embed-image-full img { +.phabricator-remarkup-embed-image-full img, +.phabricator-remarkup-embed-image-wide img { height: auto; max-width: 100%; } diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css index 85f8150015..0df18815d9 100644 --- a/webroot/rsrc/css/phui/phui-document-pro.css +++ b/webroot/rsrc/css/phui/phui-document-pro.css @@ -141,8 +141,27 @@ a.button.phui-document-toc { margin: 16px 0 0 0; } +.phui-document-view-pro .phabricator-remarkup-embed-image-wide { + margin-left: -200px; + margin-right: -200px; + width: auto; +} +.phui-document-view-pro .phabricator-remarkup-embed-image-wide img { + max-width: 1200px; +} +@media (max-width: 1200px) { + .phui-document-view-pro .phabricator-remarkup-embed-image-wide { + margin-left: 0; + margin-right: 0; + width: auto; + } + + .phui-document-view-pro .phabricator-remarkup-embed-image-wide img { + max-width: inherit; + } +} .phui-document-view-pro-box .phui-timeline-view { padding: 16px 0 0 0; diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css index fd1f057b88..2b75227c42 100644 --- a/webroot/rsrc/css/phui/phui-document.css +++ b/webroot/rsrc/css/phui/phui-document.css @@ -103,7 +103,6 @@ .phui-document-content { background: #fff; - overflow: hidden; } .phui-document-content .phabricator-remarkup {