From 3f5109b66864b5ae98af6451e8c4d1c54816859e Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 7 Nov 2016 11:19:08 -0800 Subject: [PATCH] In prose diff dialogs (like "Show Details" in transactions), show "old", "new" and "diff" tabs Summary: Ref T7643. When you do something like this: - Edit a task description. - Click "Show Details" on the resulting transaction. - Get a prose diff dialog showing the change. ...now add some "Old" and "New" tabs. These are useful for: - reverting to the old text by copy/pasting; - reading just the new/old text if the diff is noisy; - sometimes just nice to have? (This looks a little rough but I didn't want to put a negative margin on tab groups inside dialogs? Not sure what the best fix here is.) Test Plan: {F1909390} Reviewers: chad Reviewed By: chad Maniphest Tasks: T7643 Differential Revision: https://secure.phabricator.com/D16817 --- resources/celerity/map.php | 18 +++++----- ...ApplicationTransactionDetailController.php | 1 + ...plicationTransactionTextDiffDetailView.php | 34 ++++++++++++++++++- webroot/rsrc/css/aphront/dialog-view.css | 4 +++ .../differential/changeset-view.css | 1 + 5 files changed, 48 insertions(+), 10 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index b7f6c9042d..24a1aba29e 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,10 +9,10 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'cea72e09', 'conpherence.pkg.js' => '6249a1cf', - 'core.pkg.css' => '46d588e4', + 'core.pkg.css' => '4fc9469e', 'core.pkg.js' => '035325a7', 'darkconsole.pkg.js' => 'e7393ebb', - 'differential.pkg.css' => 'e1d704ce', + 'differential.pkg.css' => 'a4ba74b5', 'differential.pkg.js' => '634399e9', 'diffusion.pkg.css' => '91c5d3a6', 'diffusion.pkg.js' => '84c8f8fd', @@ -21,7 +21,7 @@ return array( 'maniphest.pkg.js' => '949a7498', 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 'rsrc/css/aphront/dark-console.css' => 'f54bf286', - 'rsrc/css/aphront/dialog-view.css' => '593d3f67', + 'rsrc/css/aphront/dialog-view.css' => '84f1e6a6', 'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d', 'rsrc/css/aphront/list-filter-view.css' => '5d6f0526', 'rsrc/css/aphront/multi-column.css' => '84cc6640', @@ -60,7 +60,7 @@ return array( 'rsrc/css/application/dashboard/dashboard.css' => 'bc6f2127', 'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a', 'rsrc/css/application/differential/add-comment.css' => 'c47f8c40', - 'rsrc/css/application/differential/changeset-view.css' => '9ef7d354', + 'rsrc/css/application/differential/changeset-view.css' => 'b158cc46', 'rsrc/css/application/differential/core.css' => '5b7b8ff4', 'rsrc/css/application/differential/phui-inline-comment.css' => '5953c28e', 'rsrc/css/application/differential/revision-comment.css' => '14b8565a', @@ -552,7 +552,7 @@ return array( 'almanac-css' => 'dbb9b3af', 'aphront-bars' => '231ac33c', 'aphront-dark-console-css' => 'f54bf286', - 'aphront-dialog-view-css' => '593d3f67', + 'aphront-dialog-view-css' => '84f1e6a6', 'aphront-list-filter-view-css' => '5d6f0526', 'aphront-multi-column-view-css' => '84cc6640', 'aphront-panel-view-css' => '8427b78d', @@ -576,7 +576,7 @@ return array( 'conpherence-thread-manager' => '358c717b', 'conpherence-transaction-css' => '85129c68', 'd3' => 'a11a5ff2', - 'differential-changeset-view-css' => '9ef7d354', + 'differential-changeset-view-css' => 'b158cc46', 'differential-core-view-css' => '5b7b8ff4', 'differential-inline-comment-editor' => '64a5550f', 'differential-revision-add-comment-css' => 'c47f8c40', @@ -1733,9 +1733,6 @@ return array( 'javelin-workflow', 'javelin-stratcom', ), - '9ef7d354' => array( - 'phui-inline-comment-view-css', - ), '9f36c42d' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1838,6 +1835,9 @@ return array( 'javelin-util', 'phabricator-shaped-request', ), + 'b158cc46' => array( + 'phui-inline-comment-view-css', + ), 'b1f0ccee' => array( 'javelin-install', 'javelin-dom', diff --git a/src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php b/src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php index 5849ae0c5e..cfa5935903 100644 --- a/src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php +++ b/src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php @@ -42,6 +42,7 @@ final class PhabricatorApplicationTransactionDetailController return $this->newDialog() ->setTitle(pht('Change Details')) ->setWidth(AphrontDialogView::WIDTH_FORM) + ->setClass('aphront-dialog-tab-group') ->appendChild($details) ->addCancelButton($cancel_uri, $button_text); } diff --git a/src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php b/src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php index ee4e96fd04..5caf681b32 100644 --- a/src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php +++ b/src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php @@ -122,12 +122,44 @@ final class PhabricatorApplicationTransactionTextDiffDetailView } } - return phutil_tag( + $diff_view = phutil_tag( 'div', array( 'class' => 'prose-diff', ), $result); + + $old_view = phutil_tag( + 'div', + array( + 'class' => 'prose-diff', + ), + $this->oldText); + + $new_view = phutil_tag( + 'div', + array( + 'class' => 'prose-diff', + ), + $this->newText); + + return id(new PHUITabGroupView()) + ->addTab( + id(new PHUITabView()) + ->setKey('old') + ->setName(pht('Old')) + ->appendChild($old_view)) + ->addTab( + id(new PHUITabView()) + ->setKey('new') + ->setName(pht('New')) + ->appendChild($new_view)) + ->addTab( + id(new PHUITabView()) + ->setKey('diff') + ->setName(pht('Diff')) + ->appendChild($diff_view)) + ->selectTab('diff'); } private function buildDiff() { diff --git a/webroot/rsrc/css/aphront/dialog-view.css b/webroot/rsrc/css/aphront/dialog-view.css index 3122fd7e92..dd746dd5ee 100644 --- a/webroot/rsrc/css/aphront/dialog-view.css +++ b/webroot/rsrc/css/aphront/dialog-view.css @@ -165,3 +165,7 @@ .aphront-dialog-object-list .aphront-dialog-body { padding: 0 12px; } + +.aphront-dialog-tab-group .aphront-dialog-body { + padding: 0 12px; +} diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css index 9474553f28..c2cb55ea18 100644 --- a/webroot/rsrc/css/application/differential/changeset-view.css +++ b/webroot/rsrc/css/application/differential/changeset-view.css @@ -94,6 +94,7 @@ } .prose-diff { + padding: 12px 0; white-space: pre-wrap; color: {$greytext}; }