1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-25 16:22:43 +01:00

In Differential, give the "moved/copied from" gutter a more clear visual look

Summary:
Depends on D20196. See PHI985. When empty, the "moved/copied" gutter currently renders with the same background color as the rest of the line. This can be misleading because it makes code look more indented than it is, especially if you're unfamiliar with the tool:

{F6225179}

If we remove this misleading coloration, we get a white gap. This is more clear, but looks a little odd:

{F6225181}

Instead, give this gutter a subtle background fill in all casses, to make it more clear that it's a separate gutter region, not a part of the text diff:

{F6225183}

Test Plan: See screenshots. Copied text from a diff, added/removed inlines, etc.

Reviewers: amckinley

Reviewed By: amckinley

Differential Revision: https://secure.phabricator.com/D20197
This commit is contained in:
epriestley 2019-02-20 04:40:06 -08:00
parent a33409991c
commit f1a035d5c2
5 changed files with 25 additions and 17 deletions

View file

@ -11,7 +11,7 @@ return array(
'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => 'e3c1a8f2',
'core.pkg.js' => '2cda17a4',
'differential.pkg.css' => '97e13037',
'differential.pkg.css' => 'ab23bd75',
'differential.pkg.js' => '67e02996',
'diffusion.pkg.css' => '42c75c37',
'diffusion.pkg.js' => '91192d85',
@ -61,7 +61,7 @@ return array(
'rsrc/css/application/dashboard/dashboard.css' => '4267d6c6',
'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d',
'rsrc/css/application/differential/add-comment.css' => '7e5900d9',
'rsrc/css/application/differential/changeset-view.css' => 'de570228',
'rsrc/css/application/differential/changeset-view.css' => 'd92bed0d',
'rsrc/css/application/differential/core.css' => '7300a73e',
'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b',
'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d',
@ -540,7 +540,7 @@ return array(
'conpherence-thread-manager' => 'aec8e38c',
'conpherence-transaction-css' => '3a3f5e7e',
'd3' => 'd67475f5',
'differential-changeset-view-css' => 'de570228',
'differential-changeset-view-css' => 'd92bed0d',
'differential-core-view-css' => '7300a73e',
'differential-revision-add-comment-css' => '7e5900d9',
'differential-revision-comment-css' => '7dbc8d1d',
@ -1997,6 +1997,9 @@ return array(
'javelin-util',
'phabricator-shaped-request',
),
'd92bed0d' => array(
'phui-inline-comment-view-css',
),
'da15d3dc' => array(
'phui-oi-list-view-css',
),
@ -2005,9 +2008,6 @@ return array(
'javelin-uri',
'phabricator-notification',
),
'de570228' => array(
'phui-inline-comment-view-css',
),
'dfa1d313' => array(
'javelin-behavior',
'javelin-dom',

View file

@ -223,7 +223,7 @@ final class DifferentialChangesetTwoUpRenderer
($new_lines[$ii]['type'] == '\\');
if ($not_copied) {
$n_copy = phutil_tag('td', array('class' => "copy {$n_class}"));
$n_copy = phutil_tag('td', array('class' => 'copy'));
} else {
list($orig_file, $orig_line, $orig_type) = $copy_lines[$n_num];
$title = ($orig_type == '-' ? 'Moved' : 'Copied').' from ';
@ -243,8 +243,7 @@ final class DifferentialChangesetTwoUpRenderer
'msg' => $title,
),
'class' => 'copy '.$class,
),
'');
));
}
}
}

View file

@ -18,7 +18,6 @@ final class PHUIDiffOneUpInlineCommentRowScaffold
$attrs = array(
'colspan' => 3,
'class' => 'right3',
'id' => $inline->getScaffoldCellID(),
);

View file

@ -65,8 +65,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold
);
$right_attrs = array(
'colspan' => 3,
'class' => 'right3',
'colspan' => 2,
'id' => ($right_side ? $right_side->getScaffoldCellID() : null),
);
@ -74,6 +73,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold
phutil_tag('td', array('class' => 'n'), $left_hidden),
phutil_tag('td', $left_attrs, $left_side),
phutil_tag('td', array('class' => 'n'), $right_hidden),
phutil_tag('td', array('class' => 'copy')),
phutil_tag('td', $right_attrs, $right_side),
);

View file

@ -144,6 +144,7 @@
min-width: 0.5%;
width: 0.5%;
padding: 0;
background: {$lightbluebackground};
}
.differential-diff td.new-copy,
@ -178,6 +179,10 @@ should always have a boring grey background. */
overflow: hidden;
}
.differential-diff td + td.n {
border-left: 1px solid {$thinblueborder};
}
.differential-diff td.n::before {
content: attr(data-n);
}
@ -443,10 +448,6 @@ unselectable. */
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.differential-diff.copy-l > tbody > tr > td,
.differential-diff.copy-r > tbody > tr > td {
opacity: 0.5;
}
@ -463,7 +464,7 @@ unselectable. */
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
opacity: 0.25;
opacity: 0.5;
}
.differential-diff.copy-r > tbody > tr > td:nth-child(5) {
@ -473,3 +474,12 @@ unselectable. */
user-select: auto;
opacity: 1;
}
.differential-diff.copy-l > tbody > tr.inline > td,
.differential-diff.copy-r > tbody > tr.inline > td {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
opacity: 0.5;
}