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

Partially generalize Remarkup previews and add support to Differential

Summary:
Ref T3671. A lot of applications have pretty ad-hoc preview code. Clean it up a bit and add Summary preview to Differential.

After ApplicationTransactions we might want to try to serialize the whole form and show a preview of all the transactions, but this seems not very useful in most cases (I'd guess that Remarkup previews are 99% of the value) and tricky to get right (e.g., adding images which don't exist yet to Pholio mocks).

I think I can add this in a few other places, too.

Test Plan:
Edited Maniphest Tasks and Differential Revisions, mashed some buttons. Verified previews rendered correctly. Grepped for removed CSS classes (no hits).

{F52907}

Reviewers: btrahan, Firehed

Reviewed By: btrahan

CC: aran, chad

Maniphest Tasks: T3671

Differential Revision: https://secure.phabricator.com/D6673
This commit is contained in:
epriestley 2013-08-05 10:46:39 -07:00
parent 86989c9f98
commit 193a9611e4
15 changed files with 262 additions and 103 deletions

View file

@ -1845,19 +1845,6 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/maniphest/behavior-batch-selector.js',
),
'javelin-behavior-maniphest-description-preview' =>
array(
'uri' => '/res/58ba0ec2/rsrc/js/application/maniphest/behavior-task-preview.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-behavior',
1 => 'javelin-dom',
2 => 'javelin-util',
3 => 'phabricator-shaped-request',
),
'disk' => '/rsrc/js/application/maniphest/behavior-task-preview.js',
),
'javelin-behavior-maniphest-list-editor' =>
array(
'uri' => '/res/a251e72f/rsrc/js/application/maniphest/behavior-list-edit.js',
@ -2376,6 +2363,19 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/releeph/releeph-request-typeahead.js',
),
'javelin-behavior-remarkup-preview' =>
array(
'uri' => '/res/6ec98508/rsrc/js/core/behavior-remarkup-preview.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-behavior',
1 => 'javelin-dom',
2 => 'javelin-util',
3 => 'phabricator-shaped-request',
),
'disk' => '/rsrc/js/core/behavior-remarkup-preview.js',
),
'javelin-behavior-repository-crossreference' =>
array(
'uri' => '/res/d3f9d50b/rsrc/js/application/repository/repository-crossreference.js',
@ -2937,7 +2937,7 @@ celerity_register_resource_map(array(
),
'maniphest-task-edit-css' =>
array(
'uri' => '/res/0760f768/rsrc/css/application/maniphest/task-edit.css',
'uri' => '/res/c0c64a27/rsrc/css/application/maniphest/task-edit.css',
'type' => 'css',
'requires' =>
array(
@ -3441,7 +3441,7 @@ celerity_register_resource_map(array(
),
'phabricator-remarkup-css' =>
array(
'uri' => '/res/07cab525/rsrc/css/core/remarkup.css',
'uri' => '/res/8531b6a1/rsrc/css/core/remarkup.css',
'type' => 'css',
'requires' =>
array(
@ -3864,6 +3864,15 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/css/phui/phui-list.css',
),
'phui-remarkup-preview-css' =>
array(
'uri' => '/res/702b30c4/rsrc/css/phui/phui-remarkup-preview.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/phui/phui-remarkup-preview.css',
),
'phui-spacing-css' =>
array(
'uri' => '/res/28891fd3/rsrc/css/phui/phui-spacing.css',
@ -4191,7 +4200,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'cc5dfafe' =>
'604768b8' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@ -4239,7 +4248,7 @@ celerity_register_resource_map(array(
40 => 'phabricator-property-list-view-css',
41 => 'phabricator-tag-view-css',
),
'uri' => '/res/pkg/cc5dfafe/core.pkg.css',
'uri' => '/res/pkg/604768b8/core.pkg.css',
'type' => 'css',
),
'606f7152' =>
@ -4430,16 +4439,16 @@ celerity_register_resource_map(array(
),
'reverse' =>
array(
'aphront-dialog-view-css' => 'cc5dfafe',
'aphront-error-view-css' => 'cc5dfafe',
'aphront-form-view-css' => 'cc5dfafe',
'aphront-list-filter-view-css' => 'cc5dfafe',
'aphront-pager-view-css' => 'cc5dfafe',
'aphront-panel-view-css' => 'cc5dfafe',
'aphront-table-view-css' => 'cc5dfafe',
'aphront-tokenizer-control-css' => 'cc5dfafe',
'aphront-tooltip-css' => 'cc5dfafe',
'aphront-typeahead-control-css' => 'cc5dfafe',
'aphront-dialog-view-css' => '604768b8',
'aphront-error-view-css' => '604768b8',
'aphront-form-view-css' => '604768b8',
'aphront-list-filter-view-css' => '604768b8',
'aphront-pager-view-css' => '604768b8',
'aphront-panel-view-css' => '604768b8',
'aphront-table-view-css' => '604768b8',
'aphront-tokenizer-control-css' => '604768b8',
'aphront-tooltip-css' => '604768b8',
'aphront-typeahead-control-css' => '604768b8',
'differential-changeset-view-css' => 'dd27a69b',
'differential-core-view-css' => 'dd27a69b',
'differential-inline-comment-editor' => '48040be9',
@ -4453,7 +4462,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => 'dd27a69b',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => 'cc5dfafe',
'global-drag-and-drop-css' => '604768b8',
'inline-comment-summary-css' => 'dd27a69b',
'javelin-aphlict' => '606f7152',
'javelin-behavior' => '2dbbb7d1',
@ -4526,55 +4535,55 @@ celerity_register_resource_map(array(
'javelin-util' => '2dbbb7d1',
'javelin-vector' => '2dbbb7d1',
'javelin-workflow' => '2dbbb7d1',
'lightbox-attachment-css' => 'cc5dfafe',
'lightbox-attachment-css' => '604768b8',
'maniphest-task-summary-css' => '06bacb9a',
'maniphest-transaction-detail-css' => '06bacb9a',
'phabricator-action-list-view-css' => 'cc5dfafe',
'phabricator-application-launch-view-css' => 'cc5dfafe',
'phabricator-action-list-view-css' => '604768b8',
'phabricator-application-launch-view-css' => '604768b8',
'phabricator-busy' => '606f7152',
'phabricator-content-source-view-css' => 'dd27a69b',
'phabricator-core-css' => 'cc5dfafe',
'phabricator-crumbs-view-css' => 'cc5dfafe',
'phabricator-core-css' => '604768b8',
'phabricator-crumbs-view-css' => '604768b8',
'phabricator-drag-and-drop-file-upload' => '48040be9',
'phabricator-dropdown-menu' => '606f7152',
'phabricator-file-upload' => '606f7152',
'phabricator-filetree-view-css' => 'cc5dfafe',
'phabricator-flag-css' => 'cc5dfafe',
'phabricator-form-view-css' => 'cc5dfafe',
'phabricator-header-view-css' => 'cc5dfafe',
'phabricator-filetree-view-css' => '604768b8',
'phabricator-flag-css' => '604768b8',
'phabricator-form-view-css' => '604768b8',
'phabricator-header-view-css' => '604768b8',
'phabricator-hovercard' => '606f7152',
'phabricator-jump-nav' => 'cc5dfafe',
'phabricator-jump-nav' => '604768b8',
'phabricator-keyboard-shortcut' => '606f7152',
'phabricator-keyboard-shortcut-manager' => '606f7152',
'phabricator-main-menu-view' => 'cc5dfafe',
'phabricator-main-menu-view' => '604768b8',
'phabricator-menu-item' => '606f7152',
'phabricator-nav-view-css' => 'cc5dfafe',
'phabricator-nav-view-css' => '604768b8',
'phabricator-notification' => '606f7152',
'phabricator-notification-css' => 'cc5dfafe',
'phabricator-notification-menu-css' => 'cc5dfafe',
'phabricator-object-item-list-view-css' => 'cc5dfafe',
'phabricator-notification-css' => '604768b8',
'phabricator-notification-menu-css' => '604768b8',
'phabricator-object-item-list-view-css' => '604768b8',
'phabricator-object-selector-css' => 'dd27a69b',
'phabricator-phtize' => '606f7152',
'phabricator-prefab' => '606f7152',
'phabricator-project-tag-css' => '06bacb9a',
'phabricator-property-list-view-css' => 'cc5dfafe',
'phabricator-remarkup-css' => 'cc5dfafe',
'phabricator-property-list-view-css' => '604768b8',
'phabricator-remarkup-css' => '604768b8',
'phabricator-shaped-request' => '48040be9',
'phabricator-side-menu-view-css' => 'cc5dfafe',
'phabricator-standard-page-view' => 'cc5dfafe',
'phabricator-tag-view-css' => 'cc5dfafe',
'phabricator-side-menu-view-css' => '604768b8',
'phabricator-standard-page-view' => '604768b8',
'phabricator-tag-view-css' => '604768b8',
'phabricator-textareautils' => '606f7152',
'phabricator-tooltip' => '606f7152',
'phabricator-transaction-view-css' => 'cc5dfafe',
'phabricator-zindex-css' => 'cc5dfafe',
'phui-button-css' => 'cc5dfafe',
'phui-form-css' => 'cc5dfafe',
'phui-icon-view-css' => 'cc5dfafe',
'phui-spacing-css' => 'cc5dfafe',
'sprite-apps-large-css' => 'cc5dfafe',
'sprite-gradient-css' => 'cc5dfafe',
'sprite-icons-css' => 'cc5dfafe',
'sprite-menu-css' => 'cc5dfafe',
'syntax-highlighting-css' => 'cc5dfafe',
'phabricator-transaction-view-css' => '604768b8',
'phabricator-zindex-css' => '604768b8',
'phui-button-css' => '604768b8',
'phui-form-css' => '604768b8',
'phui-icon-view-css' => '604768b8',
'phui-spacing-css' => '604768b8',
'sprite-apps-large-css' => '604768b8',
'sprite-gradient-css' => '604768b8',
'sprite-icons-css' => '604768b8',
'sprite-menu-css' => '604768b8',
'syntax-highlighting-css' => '604768b8',
),
));

View file

@ -749,6 +749,7 @@ phutil_register_library_map(array(
'PHUIListView' => 'view/phui/PHUIListView.php',
'PHUIListViewTestCase' => 'view/layout/__tests__/PHUIListViewTestCase.php',
'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php',
'PHUIRemarkupPreviewPanel' => 'view/phui/PHUIRemarkupPreviewPanel.php',
'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
@ -1272,6 +1273,7 @@ phutil_register_library_map(array(
'PhabricatorMarkupEngine' => 'infrastructure/markup/PhabricatorMarkupEngine.php',
'PhabricatorMarkupInterface' => 'infrastructure/markup/PhabricatorMarkupInterface.php',
'PhabricatorMarkupOneOff' => 'infrastructure/markup/PhabricatorMarkupOneOff.php',
'PhabricatorMarkupPreviewController' => 'infrastructure/markup/PhabricatorMarkupPreviewController.php',
'PhabricatorMercurialGraphStream' => 'applications/repository/daemon/PhabricatorMercurialGraphStream.php',
'PhabricatorMetaMTAActor' => 'applications/metamta/query/PhabricatorMetaMTAActor.php',
'PhabricatorMetaMTAActorQuery' => 'applications/metamta/query/PhabricatorMetaMTAActorQuery.php',
@ -2764,6 +2766,7 @@ phutil_register_library_map(array(
'PHUIListView' => 'AphrontTagView',
'PHUIListViewTestCase' => 'PhabricatorTestCase',
'PHUIPagedFormView' => 'AphrontTagView',
'PHUIRemarkupPreviewPanel' => 'AphrontTagView',
'PHUIStatusItemView' => 'AphrontTagView',
'PHUIStatusListView' => 'AphrontTagView',
'PHUITextExample' => 'PhabricatorUIExample',
@ -3320,6 +3323,7 @@ phutil_register_library_map(array(
'PhabricatorManiphestTaskTestDataGenerator' => 'PhabricatorTestDataGenerator',
'PhabricatorMarkupCache' => 'PhabricatorCacheDAO',
'PhabricatorMarkupOneOff' => 'PhabricatorMarkupInterface',
'PhabricatorMarkupPreviewController' => 'PhabricatorController',
'PhabricatorMetaMTAActorQuery' => 'PhabricatorQuery',
'PhabricatorMetaMTAConfigOptions' => 'PhabricatorApplicationConfigOptions',
'PhabricatorMetaMTAController' => 'PhabricatorController',

View file

@ -60,6 +60,7 @@ final class PhabricatorApplicationDifferential extends PhabricatorApplication {
),
'subscribe/(?P<action>add|rem)/(?P<id>[1-9]\d*)/'
=> 'DifferentialSubscribeController',
'preview/' => 'PhabricatorMarkupPreviewController',
),
);
}

View file

@ -147,11 +147,13 @@ final class DifferentialRevisionEditController extends DifferentialController {
id(new AphrontFormDividerControl()));
}
$preview = array();
foreach ($aux_fields as $aux_field) {
$control = $aux_field->renderEditControl();
if ($control) {
$form->appendChild($control);
}
$preview[] = $aux_field->renderEditPreview();
}
$submit = id(new AphrontFormSubmitControl())
@ -185,14 +187,14 @@ final class DifferentialRevisionEditController extends DifferentialController {
$crumbs->addCrumb(
id(new PhabricatorCrumbView())
->setName($title)
->setHref(''));
->setName($title));
return $this->buildApplicationPage(
array(
$crumbs,
$error_view,
$form),
$form,
$preview),
array(
'title' => $title,
'device' => true,

View file

@ -148,6 +148,19 @@ abstract class DifferentialFieldSpecification {
}
/**
* Optionally, build a preview panel for the field which will appear on the
* edit interface. This is used for the "Summary" field, but custom fields
* generally need not implement it.
*
* @return AphrontView|string Something renderable.
* @task edit
*/
public function renderEditPreview() {
return null;
}
/**
* This method will be called after @{method:setValueFromRequest} but before
* the field is saved. It gives you an opportunity to inspect the field value

View file

@ -4,6 +4,7 @@ final class DifferentialSummaryFieldSpecification
extends DifferentialFreeformFieldSpecification {
private $summary = '';
private $controlID;
public function shouldAppearOnEdit() {
return true;
@ -19,12 +20,20 @@ final class DifferentialSummaryFieldSpecification
}
public function renderEditControl() {
return id(new AphrontFormTextAreaControl())
return id(new PhabricatorRemarkupControl())
->setLabel('Summary')
->setName('summary')
->setID($this->getControlID())
->setValue($this->summary);
}
public function renderEditPreview() {
return id(new PHUIRemarkupPreviewPanel())
->setHeader(pht('Summary Preview'))
->setControlID($this->getControlID())
->setPreviewURI('/differential/preview/');
}
public function shouldExtractMentions() {
return true;
}
@ -86,4 +95,11 @@ final class DifferentialSummaryFieldSpecification
return PhabricatorSearchField::FIELD_BODY;
}
private function getControlID() {
if (!$this->controlID) {
$this->controlID = celerity_generate_unique_node_id();
}
return $this->controlID;
}
}

View file

@ -31,7 +31,7 @@ final class DifferentialTestPlanFieldSpecification
}
}
return id(new AphrontFormTextAreaControl())
return id(new PhabricatorRemarkupControl())
->setLabel('Test Plan')
->setName('testplan')
->setValue($this->plan)

View file

@ -59,7 +59,7 @@ final class PhabricatorApplicationManiphest extends PhabricatorApplication {
'descriptionchange/(?:(?P<id>[1-9]\d*)/)?' =>
'ManiphestTaskDescriptionChangeController',
'descriptionpreview/' =>
'ManiphestTaskDescriptionPreviewController',
'PhabricatorMarkupPreviewController',
),
'transaction/' => array(
'save/' => 'ManiphestTransactionSaveController',

View file

@ -536,30 +536,10 @@ final class ManiphestTaskEditController extends ManiphestController {
->addCancelButton($cancel_uri)
->setValue($button_name));
$inst1 = pht('Description Preview');
$inst2 = pht('Loading preview...');
$description_preview_panel = hsprintf(
'<div class="aphront-panel-preview aphront-panel-preview-full">
<div class="maniphest-description-preview-header">
%s
</div>
<div id="description-preview">
<div class="aphront-panel-preview-loading-text">
%s
</div>
</div>
</div>',
$inst1,
$inst2);
Javelin::initBehavior(
'maniphest-description-preview',
array(
'preview' => 'description-preview',
'textarea' => 'description-textarea',
'uri' => '/maniphest/task/descriptionpreview/',
));
$preview = id(new PHUIRemarkupPreviewPanel())
->setHeader(pht('Description Preview'))
->setControlID('description-textarea')
->setPreviewURI($this->getApplicationURI('task/descriptionpreview/'));
if ($task->getID()) {
$page_objects = array( $task->getPHID() );
@ -583,7 +563,7 @@ final class ManiphestTaskEditController extends ManiphestController {
$crumbs,
$error_view,
$form,
$description_preview_panel,
$preview,
),
array(
'title' => $header_name,

View file

@ -0,0 +1,20 @@
<?php
final class PhabricatorMarkupPreviewController
extends PhabricatorController {
public function processRequest() {
$request = $this->getRequest();
$viewer = $request->getUser();
$text = $request->getStr('text');
$output = PhabricatorMarkupEngine::renderOneObject(
id(new PhabricatorMarkupOneOff())->setContent($text),
'default',
$viewer);
return id(new AphrontAjaxResponse())
->setContent($output);
}
}

View file

@ -0,0 +1,94 @@
<?php
/**
* Render a simple preview panel for a bound Remarkup text control.
*/
final class PHUIRemarkupPreviewPanel extends AphrontTagView {
private $header;
private $loadingText;
private $controlID;
private $previewURI;
protected function canAppendChild() {
return false;
}
public function setPreviewURI($preview_uri) {
$this->previewURI = $preview_uri;
return $this;
}
public function setControlID($control_id) {
$this->controlID = $control_id;
return $this;
}
public function setHeader($header) {
$this->header = $header;
return $this;
}
public function setLoadingText($loading_text) {
$this->loadingText = $loading_text;
return $this;
}
public function getTagName() {
return 'div';
}
public function getTagAttributes() {
return array(
'class' => 'phui-remarkup-preview',
);
}
protected function getTagContent() {
if ($this->previewURI === null) {
throw new Exception("Call setPreviewURI() before rendering!");
}
if ($this->controlID === null) {
throw new Exception("Call setControlID() before rendering!");
}
$preview_id = celerity_generate_unique_node_id();
require_celerity_resource('phui-remarkup-preview-css');
Javelin::initBehavior(
'remarkup-preview',
array(
'previewID' => $preview_id,
'controlID' => $this->controlID,
'uri' => $this->previewURI,
));
$loading = phutil_tag(
'div',
array(
'class' => 'phui-preview-loading-text',
),
nonempty($this->loadingText, pht('Loading preview...')));
$header = null;
if ($this->header) {
$header = phutil_tag(
'div',
array(
'class' => 'phui-preview-header',
),
$this->header);
}
$preview = phutil_tag(
'div',
array(
'id' => $preview_id,
'class' => 'phabricator-remarkup',
),
$loading);
return array($header, $preview);
}
}

View file

@ -2,12 +2,6 @@
* @provides maniphest-task-edit-css
*/
.maniphest-description-preview-header {
color: #666;
margin-bottom: 1em;
font-size: 11px;
}
.maniphest-auxiliary-header {
font-weight: bold;
font-size: 14px;

View file

@ -158,6 +158,7 @@
background: #dddddd;
}
.phui-remarkup-preview .phabricator-remarkup-mention-unknown,
.aphront-panel-preview .phabricator-remarkup-mention-unknown {
font-weight: bold;
background: #ffaaaa;

View file

@ -0,0 +1,23 @@
/**
* @provides phui-remarkup-preview-css
*/
.phui-preview-header {
color: #666666;
margin-bottom: 12px;
font-size: 11px;
}
.phui-remarkup-preview {
background: #fbfbfb;
border-bottom: 1px solid #aaaaaa;
padding: 12px;
}
.device-phone .aphront-panel-preview {
display: none;
}
.phui-preview-loading-text {
color: #666666;
}

View file

@ -1,29 +1,31 @@
/**
* @provides javelin-behavior-maniphest-description-preview
* @provides javelin-behavior-remarkup-preview
* @requires javelin-behavior
* javelin-dom
* javelin-util
* phabricator-shaped-request
*/
JX.behavior('maniphest-description-preview', function(config) {
JX.behavior('remarkup-preview', function(config) {
var preview = JX.$(config.preview);
var textarea = JX.$(config.textarea);
var preview = JX.$(config.previewID);
var control = JX.$(config.controlID);
var callback = function(r) {
JX.DOM.setContent(JX.$(config.preview), JX.$H(r));
JX.DOM.setContent(preview, JX.$H(r));
};
var getdata = function() {
return {
description : textarea.value
text : control.value
};
};
var request = new JX.PhabricatorShapedRequest(config.uri, callback, getdata);
var trigger = JX.bind(request, request.trigger);
JX.DOM.listen(textarea, 'keydown', null, trigger);
JX.DOM.listen(control, 'keydown', null, trigger);
request.start();
trigger();
});