Permalink
Browse files

Make Differential comments be styled similarly to Maniphest comments

Summary:
This diff restructures the DOM and alters some CSS within differential.
Original goal was to unify these codepaths more fully into a base class or
classes, but they have quite a bit of custom code such that didn't feel too
compelling in practice.   It also felt related to feed stories as I thought
about the more general version(s) of this code...

Also deleted some CSS from maniphest that wasn't doing anything.

Test Plan:
looked at a differential diff and liked what I saw.   spent a bunch
of time trying out different types of comments and etc.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, epriestley

Maniphest Tasks: T803

Differential Revision: https://secure.phabricator.com/D1513
  • Loading branch information...
1 parent 5caf9fb commit 5755830faa0e515ea7459d27ae22bfd860242276 @bobtrahan bobtrahan committed Jan 29, 2012
@@ -172,7 +172,7 @@
),
'differential-core-view-css' =>
array(
- 'uri' => '/res/584d40e8/rsrc/css/application/differential/core.css',
+ 'uri' => '/res/0bc9223a/rsrc/css/application/differential/core.css',
'type' => 'css',
'requires' =>
array(
@@ -213,7 +213,7 @@
),
'differential-revision-comment-css' =>
array(
- 'uri' => '/res/e4b350b2/rsrc/css/application/differential/revision-comment.css',
+ 'uri' => '/res/76b6d378/rsrc/css/application/differential/revision-comment.css',
'type' => 'css',
'requires' =>
array(
@@ -1272,7 +1272,7 @@
),
'maniphest-transaction-detail-css' =>
array(
- 'uri' => '/res/149fccab/rsrc/css/application/maniphest/transaction-detail.css',
+ 'uri' => '/res/552bb734/rsrc/css/application/maniphest/transaction-detail.css',
'type' => 'css',
'requires' =>
array(
@@ -1787,26 +1787,7 @@
'uri' => '/res/pkg/a6562582/differential.pkg.js',
'type' => 'js',
),
- 'b164acea' =>
- array(
- 'name' => 'javelin.pkg.js',
- 'symbols' =>
- array(
- 0 => 'javelin-util',
- 1 => 'javelin-install',
- 2 => 'javelin-event',
- 3 => 'javelin-stratcom',
- 4 => 'javelin-behavior',
- 5 => 'javelin-request',
- 6 => 'javelin-vector',
- 7 => 'javelin-dom',
- 8 => 'javelin-json',
- 9 => 'javelin-uri',
- ),
- 'uri' => '/res/pkg/b164acea/javelin.pkg.js',
- 'type' => 'js',
- ),
- 'fdcba95b' =>
+ 'ab397f85' =>
array(
'name' => 'differential.pkg.css',
'symbols' =>
@@ -1824,9 +1805,28 @@
10 => 'phabricator-content-source-view-css',
11 => 'differential-local-commits-view-css',
),
- 'uri' => '/res/pkg/fdcba95b/differential.pkg.css',
+ 'uri' => '/res/pkg/ab397f85/differential.pkg.css',
'type' => 'css',
),
+ 'b164acea' =>
+ array(
+ 'name' => 'javelin.pkg.js',
+ 'symbols' =>
+ array(
+ 0 => 'javelin-util',
+ 1 => 'javelin-install',
+ 2 => 'javelin-event',
+ 3 => 'javelin-stratcom',
+ 4 => 'javelin-behavior',
+ 5 => 'javelin-request',
+ 6 => 'javelin-vector',
+ 7 => 'javelin-dom',
+ 8 => 'javelin-json',
+ 9 => 'javelin-uri',
+ ),
+ 'uri' => '/res/pkg/b164acea/javelin.pkg.js',
+ 'type' => 'js',
+ ),
16378540 =>
array(
'name' => 'core.pkg.css',
@@ -1857,23 +1857,23 @@
'aphront-crumbs-view-css' => '16378540',
'aphront-dialog-view-css' => '16378540',
'aphront-form-view-css' => '16378540',
- 'aphront-headsup-action-list-view-css' => 'fdcba95b',
+ 'aphront-headsup-action-list-view-css' => 'ab397f85',
'aphront-list-filter-view-css' => '16378540',
'aphront-panel-view-css' => '16378540',
'aphront-side-nav-view-css' => '16378540',
'aphront-table-view-css' => '16378540',
'aphront-tokenizer-control-css' => '16378540',
'aphront-typeahead-control-css' => '16378540',
- 'differential-changeset-view-css' => 'fdcba95b',
- 'differential-core-view-css' => 'fdcba95b',
+ 'differential-changeset-view-css' => 'ab397f85',
+ 'differential-core-view-css' => 'ab397f85',
'differential-inline-comment-editor' => 'a6562582',
- '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',
+ 'differential-local-commits-view-css' => 'ab397f85',
+ 'differential-revision-add-comment-css' => 'ab397f85',
+ 'differential-revision-comment-css' => 'ab397f85',
+ 'differential-revision-comment-list-css' => 'ab397f85',
+ 'differential-revision-detail-css' => 'ab397f85',
+ 'differential-revision-history-css' => 'ab397f85',
+ 'differential-table-of-contents-css' => 'ab397f85',
'diffusion-commit-view-css' => '03ef179e',
'javelin-behavior' => 'b164acea',
'javelin-behavior-aphront-basic-tokenizer' => '540effd7',
@@ -1911,14 +1911,14 @@
'javelin-util' => 'b164acea',
'javelin-vector' => 'b164acea',
'javelin-workflow' => '46547a92',
- 'phabricator-content-source-view-css' => 'fdcba95b',
+ 'phabricator-content-source-view-css' => 'ab397f85',
'phabricator-core-buttons-css' => '16378540',
'phabricator-core-css' => '16378540',
'phabricator-directory-css' => '16378540',
'phabricator-drag-and-drop-file-upload' => 'a6562582',
'phabricator-keyboard-shortcut' => '46547a92',
'phabricator-keyboard-shortcut-manager' => '46547a92',
- 'phabricator-object-selector-css' => 'fdcba95b',
+ 'phabricator-object-selector-css' => 'ab397f85',
'phabricator-remarkup-css' => '16378540',
'phabricator-shaped-request' => 'a6562582',
'phabricator-standard-page-view' => '16378540',
@@ -155,15 +155,12 @@ public function render() {
$content.
'</div>';
}
+
+ $title = "{$author_link} {$verb} this revision.";
if (strlen(rtrim($content)) || $this->inlines) {
- $title = "{$author_link} {$verb} this revision:";
+ $hide_comments_class = null;
} else {
- $title = null;
- $head_content =
- '<div class="differential-comment-nocontent">'.
- "<p>{$author_link} {$verb} this revision.</p>".
- '</div>';
- $content = null;
+ $hide_comments_class = 'hide';
}
if ($this->inlines) {
@@ -325,16 +322,16 @@ public function render() {
return phutil_render_tag(
'div',
array(
- 'class' => "differential-comment {$action_class}",
+ 'class' => "differential-comment",
'id' => $comment_anchor,
+ 'style' => $background,
),
- '<div class="differential-comment-head">'.
- '<span class="differential-comment-info">'.$info.'</span>'.
- '<span class="differential-comment-title">'.$title.'</span>'.
- '<div style="clear: both;"></div>'.
- '</div>'.
- '<div class="differential-comment-body" style="'.$background.'">'.
- '<div class="differential-comment-content">'.
+ '<div class="differential-comment-detail '.$action_class.'">'.
+ '<div class="differential-comment-header">'.
+ '<span class="differential-comment-info">'.$info.'</span>'.
+ '<span class="differential-comment-title">'.$title.'</span>'.
+ '</div>'.
+ '<div class="differential-comment-content '.$hide_comments_class.'">'.
$head_content.
$metadata_blocks.
'<div class="differential-comment-core">'.
@@ -14,7 +14,7 @@
}
.differential-panel {
- margin: 25px 0;
+ margin: 25px 0 0 0;
max-width: 1120px;
border: 1px solid #666622;
background: #efefdf;
@@ -2,11 +2,11 @@
* @provides differential-revision-comment-css
*/
-
.differential-comment {
- padding: 3px 6px;
- margin-bottom: 10px;
- border: 1px solid transparent;
+ background: 0px 2px no-repeat;
+ margin: 1em 0 1.25em;
+ min-height: 50px;
+ padding: 2px 0px;
}
.differential-comment-list {
@@ -17,6 +17,17 @@
max-width: 1162px;
}
+.differential-comment-detail {
+ border-color: #dddddd;
+ border-width: 1px 10px;
+ border-style: solid;
+ margin-left: 54px;
+}
+
+.differential-comment-detail .hide {
+ display: none;
+}
+
/* Spooky haunted panel which floats on the bottom of the screen. */
.differential-haunted-panel .differential-add-comment-panel {
position: fixed;
@@ -43,49 +54,32 @@
display: none;
}
-
.differential-haunted-panel {
padding-bottom: 250px;
}
-
.differential-comment-list .anchor-target {
background-color: #ffffdd;
border-color: #ffff00;
}
-.differential-comment-info {
- color: #666666;
- float: right;
- font-size: 11px;
- margin: 0 0 3px;
- padding-top: 6px;
+.differential-comment-header {
+ background: #f3f3f3;
+ padding: 4px 1em;
}
-.differential-comment-info a {
+.differential-comment-header a {
font-weight: bold;
}
-.differential-comment-title {
- font-weight: bold;
- height: 16px;
- margin: 4px 0em 0em 0em;
- padding: 4px 0em;
- position: relative;
-}
-
-.differential-comment-body {
- min-height: 56px;
- padding-left: 62px;
- background-repeat: no-repeat;
- background-position: 6px 0px;
+.differential-comment-info {
+ color: #666666;
+ float: right;
+ font-size: 11px;
}
.differential-comment-content {
- background: #fbfbfb;
- border-color: #c3c3c3;
- border-style: solid;
- border-width: 1px 10px 1px 10px;
+ background: #fcfcfc;
clear: both;
line-height: 1.4em;
margin: 0em;
@@ -102,59 +96,45 @@
width: 81ch;
}
-.differential-comment-nocontent {
- font-weight: bold;
-}
-
-.differential-comment-action-testplan .differential-comment-content {
+.differential-comment .differential-comment-action-testplan {
border-color: #660099;
- background: #f6f3ff;
}
-.differential-comment-action-abandon .differential-comment-content {
+.differential-comment .differential-comment-action-abandon {
border-color: #222222;
- background: #f3f3f3;
}
-.differential-comment-action-accept .differential-comment-content {
+.differential-comment .differential-comment-action-accept {
border-color: #009966;
- background: #f3fff3;
}
-.differential-comment-action-reject .differential-comment-content {
+.differential-comment .differential-comment-action-reject {
border-color: #aa0000;
- background: #fff3f3;
}
-.differential-comment-action-rethink .differential-comment-content {
+.differential-comment .differential-comment-action-rethink {
border-color: #aa0000;
- background: #fff3f3;
}
-.differential-comment-action-commit .differential-comment-content {
+.differential-comment .differential-comment-action-commit {
border-color: #006699;
- background: #f3f3ff;
}
-.differential-comment-action-reclaim .differential-comment-content {
+.differential-comment .differential-comment-action-reclaim {
border-color: #0099aa;
- background: #f3fff9;
}
-.differential-comment-action-update .differential-comment-content {
+.differential-comment .differential-comment-action-update {
border-color: #6699cc;
- background: #f3f9ff;
}
-.differential-comment-action-add_reviewers .differential-comment-content {
+.differential-comment .differential-comment-action-add_reviewers {
border-color: #aa99cc;
- background: #f9f3ff;
}
-.differential-comment-action-request_review .differential-comment-content {
+.differential-comment .differential-comment-action-request_review {
border-color: #cc9966;
- background: #fff9f3;
}
.differential-inline-summary th,
@@ -202,9 +182,8 @@
text-decoration: none;
}
-
.differential-inline-summary-section {
- margin: 1em 0 .5em;
+ margin: .75em 0 .5em;
font-size: 11px;
border-bottom: 1px solid #dddddd;
color: #666666;
@@ -2,10 +2,6 @@
* @provides maniphest-transaction-detail-css
*/
-.maniphest-trnasaction-list-view {
- padding: .5em 1.5em;
-}
-
.maniphest-transaction-detail-container {
margin: 1em 2em 1.25em;
background: 0px 2px no-repeat;

0 comments on commit 5755830

Please sign in to comment.