From 56447ed2ccbe44109cd98f52c9a47b5bce09ee34 Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 16 Jan 2012 10:07:21 -0800 Subject: [PATCH] Add more options to Remarkup Summary: See D1416. Add options to file-embed syntax, and document new code and embed options. Test Plan: Used new options in markup blocks. Reviewers: davidreuss, btrahan, jungejason Reviewed By: btrahan CC: aran Maniphest Tasks: T336 Differential Revision: https://secure.phabricator.com/D1417 --- src/__celerity_resource_map__.php | 66 ++++++------- src/docs/userguide/remarkup.diviner | 59 ++++++++++- .../PhabricatorRemarkupRuleEmbedFile.php | 97 ++++++++++++++++--- .../markuprule/embedobject/__init__.php | 1 + .../differential/revision-comment.css | 4 +- webroot/rsrc/css/core/remarkup.css | 48 +++++++-- 6 files changed, 217 insertions(+), 58 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 613d64a5de..cfbd94d450 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -213,7 +213,7 @@ celerity_register_resource_map(array( ), 'differential-revision-comment-css' => array( - 'uri' => '/res/b6e10dee/rsrc/css/application/differential/revision-comment.css', + 'uri' => '/res/e4b350b2/rsrc/css/application/differential/revision-comment.css', 'type' => 'css', 'requires' => array( @@ -1470,7 +1470,7 @@ celerity_register_resource_map(array( ), 'phabricator-remarkup-css' => array( - 'uri' => '/res/795fa8a9/rsrc/css/core/remarkup.css', + 'uri' => '/res/39f358b8/rsrc/css/core/remarkup.css', 'type' => 'css', 'requires' => array( @@ -1784,7 +1784,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/b164acea/javelin.pkg.js', 'type' => 'js', ), - 'bbf3d3f2' => + 'bb4d65a4' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -1805,10 +1805,10 @@ celerity_register_resource_map(array( 13 => 'phabricator-remarkup-css', 14 => 'syntax-highlighting-css', ), - 'uri' => '/res/pkg/bbf3d3f2/core.pkg.css', + 'uri' => '/res/pkg/bb4d65a4/core.pkg.css', 'type' => 'css', ), - 'c9399497' => + 'fdcba95b' => array( 'name' => 'differential.pkg.css', 'symbols' => @@ -1826,32 +1826,32 @@ celerity_register_resource_map(array( 10 => 'phabricator-content-source-view-css', 11 => 'differential-local-commits-view-css', ), - 'uri' => '/res/pkg/c9399497/differential.pkg.css', + 'uri' => '/res/pkg/fdcba95b/differential.pkg.css', 'type' => 'css', ), ), 'reverse' => array( - 'aphront-crumbs-view-css' => 'bbf3d3f2', - 'aphront-dialog-view-css' => 'bbf3d3f2', - 'aphront-form-view-css' => 'bbf3d3f2', - 'aphront-headsup-action-list-view-css' => 'c9399497', - 'aphront-list-filter-view-css' => 'bbf3d3f2', - 'aphront-panel-view-css' => 'bbf3d3f2', - 'aphront-side-nav-view-css' => 'bbf3d3f2', - 'aphront-table-view-css' => 'bbf3d3f2', - 'aphront-tokenizer-control-css' => 'bbf3d3f2', - 'aphront-typeahead-control-css' => 'bbf3d3f2', - 'differential-changeset-view-css' => 'c9399497', - 'differential-core-view-css' => 'c9399497', + 'aphront-crumbs-view-css' => 'bb4d65a4', + 'aphront-dialog-view-css' => 'bb4d65a4', + 'aphront-form-view-css' => 'bb4d65a4', + 'aphront-headsup-action-list-view-css' => 'fdcba95b', + 'aphront-list-filter-view-css' => 'bb4d65a4', + 'aphront-panel-view-css' => 'bb4d65a4', + 'aphront-side-nav-view-css' => 'bb4d65a4', + 'aphront-table-view-css' => 'bb4d65a4', + 'aphront-tokenizer-control-css' => 'bb4d65a4', + 'aphront-typeahead-control-css' => 'bb4d65a4', + 'differential-changeset-view-css' => 'fdcba95b', + 'differential-core-view-css' => 'fdcba95b', 'differential-inline-comment-editor' => 'a6562582', - 'differential-local-commits-view-css' => 'c9399497', - 'differential-revision-add-comment-css' => 'c9399497', - 'differential-revision-comment-css' => 'c9399497', - 'differential-revision-comment-list-css' => 'c9399497', - 'differential-revision-detail-css' => 'c9399497', - 'differential-revision-history-css' => 'c9399497', - 'differential-table-of-contents-css' => 'c9399497', + 'differential-local-commits-view-css' => 'fdcba95b', + 'differential-revision-add-comment-css' => 'fdcba95b', + 'differential-revision-comment-css' => 'fdcba95b', + 'differential-revision-comment-list-css' => 'fdcba95b', + 'differential-revision-detail-css' => 'fdcba95b', + 'differential-revision-history-css' => 'fdcba95b', + 'differential-table-of-contents-css' => 'fdcba95b', 'diffusion-commit-view-css' => '03ef179e', 'javelin-behavior' => 'b164acea', 'javelin-behavior-aphront-basic-tokenizer' => '540effd7', @@ -1889,17 +1889,17 @@ celerity_register_resource_map(array( 'javelin-util' => 'b164acea', 'javelin-vector' => 'b164acea', 'javelin-workflow' => '46547a92', - 'phabricator-content-source-view-css' => 'c9399497', - 'phabricator-core-buttons-css' => 'bbf3d3f2', - 'phabricator-core-css' => 'bbf3d3f2', - 'phabricator-directory-css' => 'bbf3d3f2', + 'phabricator-content-source-view-css' => 'fdcba95b', + 'phabricator-core-buttons-css' => 'bb4d65a4', + 'phabricator-core-css' => 'bb4d65a4', + 'phabricator-directory-css' => 'bb4d65a4', 'phabricator-drag-and-drop-file-upload' => 'a6562582', 'phabricator-keyboard-shortcut' => '46547a92', 'phabricator-keyboard-shortcut-manager' => '46547a92', - 'phabricator-object-selector-css' => 'c9399497', - 'phabricator-remarkup-css' => 'bbf3d3f2', + 'phabricator-object-selector-css' => 'fdcba95b', + 'phabricator-remarkup-css' => 'bb4d65a4', 'phabricator-shaped-request' => 'a6562582', - 'phabricator-standard-page-view' => 'bbf3d3f2', - 'syntax-highlighting-css' => 'bbf3d3f2', + 'phabricator-standard-page-view' => 'bb4d65a4', + 'syntax-highlighting-css' => 'bb4d65a4', ), )); diff --git a/src/docs/userguide/remarkup.diviner b/src/docs/userguide/remarkup.diviner index 4320ed431d..97e4bdf9ac 100644 --- a/src/docs/userguide/remarkup.diviner +++ b/src/docs/userguide/remarkup.diviner @@ -115,6 +115,52 @@ This produces a block like this: global $$variable_variable; } +You can use ##lines=N## to limit the vertical size of a chunk of code, and +##name=some_name.ext## to give it a name. For example, this: + + lang=text + lang=html, name=example.html, lines=12, counterexample + ... + +...produces this: + + lang=html, name=example.html, lines=12, counterexample +

Apple

+

Apricot

+

Avocado

+

Banana

+

Bilberry

+

Blackberry

+

Blackcurrant

+

Blueberry

+

Currant

+

Cherry

+

Cherimoya

+

Clementine

+

Date

+

Damson

+

Durian

+

Eggplant

+

Elderberry

+

Feijoa

+

Gooseberry

+

Grape

+

Grapefruit

+

Guava

+

Huckleberry

+

Jackfruit

+

Jambul

+

Kiwi fruit

+

Kumquat

+

Legume

+

Lemon

+

Lime

+

Lychee

+

Mandarine

+

Mango

+

Mangostine

+

Melon

+ You can also use "NOTE:" to call out an important idea. NOTE: Don't cross the streams! @@ -167,11 +213,22 @@ This appears like this: You can embed an image by using braces to refer to it: - {F92} # Embed the image file F92 + {F123} # Embed the image file F123 In most interfaces, you can drag-and-drop an image from your computer into the text area to upload and reference it. +You can set file display options like this: + + {F123, layout=left, float, size=full} + +Valid options are: + + - **layout** left (default), center, right, inline + - **float** If layout is set to left or right, the image will be floated so + text wraps around it. + - **size** thumb (default), full + = Embedding Media = If you set configuration flags, you can embed media directly in text: diff --git a/src/infrastructure/markup/remarkup/markuprule/embedobject/PhabricatorRemarkupRuleEmbedFile.php b/src/infrastructure/markup/remarkup/markuprule/embedobject/PhabricatorRemarkupRuleEmbedFile.php index 73b5c57525..45c3820e49 100644 --- a/src/infrastructure/markup/remarkup/markuprule/embedobject/PhabricatorRemarkupRuleEmbedFile.php +++ b/src/infrastructure/markup/remarkup/markuprule/embedobject/PhabricatorRemarkupRuleEmbedFile.php @@ -1,7 +1,7 @@ load($matches[1]); } - if ($file) { - return $this->getEngine()->storeText( - phutil_render_tag( - 'a', - array( - 'href' => $file->getViewURI(), - 'target' => '_blank', - ), - phutil_render_tag( - 'img', - array( - 'src' => $file->getThumb160x120URI(), - )))); - } else { + if (!$file) { return $matches[0]; } + + $options = array( + 'size' => 'thumb', + 'layout' => 'left', + 'float' => false, + ); + + if (!empty($matches[2])) { + $options = PhutilSimpleOptions::parse($matches[2]) + $options; + } + + switch ($options['size']) { + case 'full': + $src_uri = $file->getBestURI(); + $link = null; + break; + case 'thumb': + default: + $src_uri = $file->getThumb160x120URI(); + $link = $file->getBestURI(); + break; + } + + $embed = phutil_render_tag( + 'img', + array( + 'src' => $src_uri, + 'class' => 'phabricator-remarkup-embed-image', + )); + + if ($link) { + $embed = phutil_render_tag( + 'a', + array( + 'href' => $link, + 'target' => '_blank', + ), + $embed); + } + + $layout_class = null; + switch ($options['layout']) { + case 'right': + case 'center': + case 'inline': + case 'left': + $layout_class = 'phabricator-remarkup-embed-layout-'.$options['layout']; + break; + default: + $layout_class = 'phabricator-remarkup-embed-layout-left'; + break; + } + + if ($options['float']) { + switch ($options['layout']) { + case 'center': + case 'inline': + break; + case 'right': + $layout_class .= ' phabricator-remarkup-embed-float-right'; + break; + case 'left': + default: + $layout_class .= ' phabricator-remarkup-embed-float-left'; + break; + } + } + + if ($layout_class) { + $embed = phutil_render_tag( + 'div', + array( + 'class' => $layout_class, + ), + $embed); + } + + return $this->getEngine()->storeText($embed); } } diff --git a/src/infrastructure/markup/remarkup/markuprule/embedobject/__init__.php b/src/infrastructure/markup/remarkup/markuprule/embedobject/__init__.php index b7ed4cde2d..b42119125d 100644 --- a/src/infrastructure/markup/remarkup/markuprule/embedobject/__init__.php +++ b/src/infrastructure/markup/remarkup/markuprule/embedobject/__init__.php @@ -10,6 +10,7 @@ phutil_require_module('phabricator', 'applications/files/storage/file'); phutil_require_module('phutil', 'markup'); phutil_require_module('phutil', 'markup/engine/remarkup/markuprule/base'); +phutil_require_module('phutil', 'parser/simpleoptions'); phutil_require_module('phutil', 'utils'); diff --git a/webroot/rsrc/css/application/differential/revision-comment.css b/webroot/rsrc/css/application/differential/revision-comment.css index 21612bc57b..43ddc49a42 100644 --- a/webroot/rsrc/css/application/differential/revision-comment.css +++ b/webroot/rsrc/css/application/differential/revision-comment.css @@ -96,8 +96,8 @@ overflow: hidden; } -.differential-comment-content .phabricator-remarkup code, -.differential-comment-core .phabricator-remarkup code { +.differential-comment-content .phabricator-remarkup .remarkup-code-block, +.differential-comment-core .phabricator-remarkup .remarkup-code-block { width: 88ex; width: 81ch; } diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index f0687739d2..d31e33c693 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -14,17 +14,27 @@ margin-bottom: 0; } -.phabricator-remarkup code { - background: #fdfae7; - border: 1px solid #f5e178; - display: block; +.phabricator-remarkup .remarkup-code-block { + margin: 1em 2em; white-space: pre; font-family: "Monaco", monospace; font-size: 10px; +} + +.phabricator-remarkup .remarkup-code-header { + padding: .25em 1em; + background: #edead7; + color: #444444; +} + +.phabricator-remarkup .remarkup-code-block code { + background: #fdfae7; + border: 1px solid #f5e178; + display: block; color: #000000; - margin: 1em 2em; - padding: .5em 1.5em; overflow: auto; + padding: .5em 1em; + font-family: "Monaco", monospace; } .phabricator-remarkup code.remarkup-counterexample { @@ -158,3 +168,29 @@ padding: 0; margin: 0; } + +.phabricator-remarkup-embed-layout-right { + text-align: right; +} + +.phabricator-remarkup-embed-layout-center { + text-align: center; +} + +.phabricator-remarkup-embed-layout-inline { + display: inline; +} + +.phabricator-remarkup-embed-float-right { + float: right; + margin: .5em 1em 0; +} + +.phabricator-remarkup-embed-float-left { + float: left; + margin: .5em 1em 0; +} + +img.phabricator-remarkup-embed-image { + display: inline; +}