From ff59f4f16bb3a2781e774f8ee45af1180fdcfa50 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 8 Apr 2015 09:41:56 -0700 Subject: [PATCH] Send Markdown in Diffusion through SourceSans Summary: This moves Markdown rendering from normal fonts to PHUIDocumentView with Source Sans improving readability of this longer form text. Test Plan: Test libphutil and Phabricator readmes in my sandbox. {F363483} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12330 --- resources/celerity/map.php | 2 ++ .../diffusion/view/DiffusionReadmeView.php | 30 ++++++++----------- .../diffusion/diffusion-readme.css | 14 +++++++++ 3 files changed, 29 insertions(+), 17 deletions(-) create mode 100644 webroot/rsrc/css/application/diffusion/diffusion-readme.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 507e5c66b0..ffba4a8ef7 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -64,6 +64,7 @@ return array( 'rsrc/css/application/differential/revision-list.css' => 'f3c47d33', 'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a', 'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da', + 'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08', 'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661', 'rsrc/css/application/feed/feed.css' => 'b513b5f4', 'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad', @@ -531,6 +532,7 @@ return array( 'differential-revision-list-css' => 'f3c47d33', 'differential-table-of-contents-css' => '63f3ef4a', 'diffusion-icons-css' => '9c5828da', + 'diffusion-readme-css' => '2106ea08', 'diffusion-source-css' => '66fdf661', 'diviner-shared-css' => '38813222', 'font-fontawesome' => 'ae9a7b4d', diff --git a/src/applications/diffusion/view/DiffusionReadmeView.php b/src/applications/diffusion/view/DiffusionReadmeView.php index 0a8febdfea..d9b85f84bb 100644 --- a/src/applications/diffusion/view/DiffusionReadmeView.php +++ b/src/applications/diffusion/view/DiffusionReadmeView.php @@ -53,6 +53,7 @@ final class DiffusionReadmeView extends DiffusionView { $readme_path = $this->getPath(); $readme_name = basename($readme_path); $interpreter = $this->getReadmeLanguage($readme_name); + require_celerity_resource('diffusion-readme-css'); $content = $this->getContent(); @@ -86,7 +87,7 @@ final class DiffusionReadmeView extends DiffusionView { } $readme_content = $content; - $class = 'phabricator-remarkup'; + $class = null; break; case 'rainbow': $content = id(new PhutilRainbowSyntaxHighlighter()) @@ -95,30 +96,25 @@ final class DiffusionReadmeView extends DiffusionView { $readme_content = phutil_escape_html_newlines($content); require_celerity_resource('syntax-highlighting-css'); - $class = 'remarkup-code'; + $class = 'remarkup-code ml'; break; default: case 'text': $readme_content = phutil_escape_html_newlines($content); + $class = 'ml'; break; } - $readme_content = phutil_tag( - 'div', - array( - 'class' => $class, - ), - $readme_content); + $readme_content = phutil_tag_div($class, $readme_content); + $header = id(new PHUIHeaderView()) + ->setHeader($readme_name); - $box = new PHUIBoxView(); - $box->appendChild($readme_content); - $box->addPadding(PHUI::PADDING_LARGE); - - $object_box = id(new PHUIObjectBoxView()) - ->setHeaderText($readme_name) - ->appendChild($box); - - return $object_box; + return id(new PHUIDocumentView()) + ->setFluid(true) + ->appendChild($readme_content) + ->addClass('diffusion-readme-view') + ->setHeader($header) + ->setFontKit(PHUIDocumentView::FONT_SOURCE_SANS); } } diff --git a/webroot/rsrc/css/application/diffusion/diffusion-readme.css b/webroot/rsrc/css/application/diffusion/diffusion-readme.css new file mode 100644 index 0000000000..17f9baa04c --- /dev/null +++ b/webroot/rsrc/css/application/diffusion/diffusion-readme.css @@ -0,0 +1,14 @@ +/** + * @provides diffusion-readme-css + */ + +.device .diffusion-readme-view { + margin: 16px 8px 0; + background-color: #fff; + border: 1px solid {$lightblueborder}; + border-bottom: 1px solid {$blueborder}; +} + +.device-tablet .diffusion-readme-view { + margin: 16px; +}