mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-18 19:40:55 +01:00
Revamp inline commenting UI
Summary:
Rebuilds the UI in Differential commenting. Specifically we look at the following design patterns:
**To the author:**
- The author of the diff should be able to easily identify what comments are done and not done.
- We keep undone comments yellow
- Clicking done turns comment block into 'unsubmitted state'
**To the reviewer:**
- Easier understanding of unsubmitted states
- All conversations to be yellow/important
**Todo**
- Not all color CSS states correct
- Unpulished checkbox support
Test Plan:
Test leaving comments, published and unpublished. Checking Done, unpublished and published. Check delete states.
From the Diff Author's perspective:
{F352094}
For a Diff commenter's perspective:
{F352095}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T1460, T7660, T7503
Differential Revision: https://secure.phabricator.com/D12171
This commit is contained in:
Chad Little
parent
174cf82398
commit
b560014577
9 changed files with 599 additions and 310 deletions
|
|
@ -7,10 +7,10 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'core.pkg.css' => '1601392f',
|
||||
'core.pkg.css' => '2ff29d1d',
|
||||
'core.pkg.js' => '75599122',
|
||||
'darkconsole.pkg.js' => '8ab24e01',
|
||||
'differential.pkg.css' => '5a0b221c',
|
||||
'differential.pkg.css' => '571b1cc1',
|
||||
'differential.pkg.js' => 'e324301d',
|
||||
'diffusion.pkg.css' => '591664fa',
|
||||
'diffusion.pkg.js' => 'bfc0737b',
|
||||
|
|
@ -54,11 +54,12 @@ return array(
|
|||
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
|
||||
'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
|
||||
'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
|
||||
'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
|
||||
'rsrc/css/application/differential/changeset-view.css' => 'c5d1e738',
|
||||
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
|
||||
'rsrc/css/application/differential/changeset-view.css' => 'f36406b1',
|
||||
'rsrc/css/application/differential/core.css' => '7ac3cabc',
|
||||
'rsrc/css/application/differential/phui-inline-comment.css' => '17e89126',
|
||||
'rsrc/css/application/differential/results-table.css' => '181aa9d9',
|
||||
'rsrc/css/application/differential/revision-comment.css' => '64603753',
|
||||
'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
|
||||
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
|
||||
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
|
||||
'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
|
||||
|
|
@ -124,7 +125,7 @@ return array(
|
|||
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
|
||||
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
|
||||
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
|
||||
'rsrc/css/phui/phui-button.css' => '57eaddc9',
|
||||
'rsrc/css/phui/phui-button.css' => '53f55a72',
|
||||
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
|
||||
'rsrc/css/phui/phui-document.css' => '0f83a7df',
|
||||
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
|
||||
|
|
@ -520,12 +521,12 @@ return array(
|
|||
'conpherence-thread-manager' => 'bb928342',
|
||||
'conpherence-update-css' => '1099a660',
|
||||
'conpherence-widget-pane-css' => '1979ee8c',
|
||||
'differential-changeset-view-css' => 'c5d1e738',
|
||||
'differential-changeset-view-css' => 'f36406b1',
|
||||
'differential-core-view-css' => '7ac3cabc',
|
||||
'differential-inline-comment-editor' => 'b3412377',
|
||||
'differential-results-table-css' => '181aa9d9',
|
||||
'differential-revision-add-comment-css' => 'c478bcaa',
|
||||
'differential-revision-comment-css' => '64603753',
|
||||
'differential-revision-add-comment-css' => 'c47f8c40',
|
||||
'differential-revision-comment-css' => '024dda6b',
|
||||
'differential-revision-history-css' => '0e8eb855',
|
||||
'differential-revision-list-css' => 'f3c47d33',
|
||||
'differential-table-of-contents-css' => '63f3ef4a',
|
||||
|
|
@ -772,7 +773,7 @@ return array(
|
|||
'phui-action-header-view-css' => '89c497e7',
|
||||
'phui-action-panel-css' => '3ee9afd5',
|
||||
'phui-box-css' => '7b3a2eed',
|
||||
'phui-button-css' => '57eaddc9',
|
||||
'phui-button-css' => '53f55a72',
|
||||
'phui-calendar-css' => '8675968e',
|
||||
'phui-calendar-day-css' => 'de035c8a',
|
||||
'phui-calendar-list-css' => 'c1d0ca59',
|
||||
|
|
@ -789,6 +790,7 @@ return array(
|
|||
'phui-image-mask-css' => '5a8b09c8',
|
||||
'phui-info-panel-css' => '27ea50a1',
|
||||
'phui-info-view-css' => 'c6f0aef8',
|
||||
'phui-inline-comment-view-css' => '17e89126',
|
||||
'phui-list-view-css' => '2e25ebfb',
|
||||
'phui-object-box-css' => 'd68ce5dc',
|
||||
'phui-object-item-list-view-css' => '9db65899',
|
||||
|
|
@ -1921,6 +1923,9 @@ return array(
|
|||
'multirow-row-manager',
|
||||
'javelin-json',
|
||||
),
|
||||
'f36406b1' => array(
|
||||
'phui-inline-comment-view-css',
|
||||
),
|
||||
'f36e01af' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-behavior-device',
|
||||
|
|
|
|||
|
|
@ -71,20 +71,14 @@ final class PHUIDiffInlineCommentDetailView
|
|||
return $this->objectOwnerPHID;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public function render() {
|
||||
|
||||
require_celerity_resource('phui-inline-comment-view-css');
|
||||
$inline = $this->inlineComment;
|
||||
|
||||
$start = $inline->getLineNumber();
|
||||
$length = $inline->getLineLength();
|
||||
if ($length) {
|
||||
$end = $start + $length;
|
||||
$line = 'Lines '.number_format($start).'-'.number_format($end);
|
||||
} else {
|
||||
$line = 'Line '.number_format($start);
|
||||
}
|
||||
$classes = array(
|
||||
'differential-inline-comment',
|
||||
);
|
||||
|
||||
$metadata = array(
|
||||
'id' => $inline->getID(),
|
||||
|
|
@ -117,40 +111,54 @@ final class PHUIDiffInlineCommentDetailView
|
|||
$is_synthetic = true;
|
||||
}
|
||||
|
||||
$is_draft = false;
|
||||
if ($inline->isDraft() && !$is_synthetic) {
|
||||
$links[] = pht('Not Submitted Yet');
|
||||
$is_draft = true;
|
||||
$draft_text = null;
|
||||
if (!$is_synthetic) {
|
||||
// This display is controlled by CSS
|
||||
$draft_text = id(new PHUITagView())
|
||||
->setType(PHUITagView::TYPE_SHADE)
|
||||
->setName(pht('Unsubmitted'))
|
||||
->setSlimShady(true)
|
||||
->setShade(PHUITagView::COLOR_RED)
|
||||
->addClass('mml inline-draft-text');
|
||||
}
|
||||
|
||||
|
||||
// TODO: This stuff is nonfinal, just making it do something.
|
||||
// I think this is unused
|
||||
if ($inline->getHasReplies()) {
|
||||
$links[] = pht('Has Reply');
|
||||
$classes[] = 'inline-has-reply';
|
||||
$classes[] = 'inline-comment-has-reply';
|
||||
}
|
||||
// I think this is unused
|
||||
if ($inline->getReplyToCommentPHID()) {
|
||||
$links[] = pht('Is Reply');
|
||||
$classes[] = 'inline-comment-is-reply';
|
||||
}
|
||||
// Might break?
|
||||
if ($this->getCanMarkDone()) {
|
||||
$classes[] = 'viewer-is-diff-author';
|
||||
}
|
||||
|
||||
$action_buttons = new PHUIButtonBarView();
|
||||
$action_buttons->addClass('mml');
|
||||
$nextprev = null;
|
||||
if (!$this->preview) {
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-prev',
|
||||
),
|
||||
pht('Previous'));
|
||||
$nextprev = new PHUIButtonBarView();
|
||||
$nextprev->addClass('mml');
|
||||
$up = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setTooltip(pht('Previous'))
|
||||
->setIconFont('fa-chevron-up')
|
||||
->addSigil('differential-inline-prev')
|
||||
->setMustCapture(true);
|
||||
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-next',
|
||||
),
|
||||
pht('Next'));
|
||||
$down = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setTooltip(pht('Next'))
|
||||
->setIconFont('fa-chevron-down')
|
||||
->addSigil('differential-inline-next')
|
||||
->setMustCapture(true);
|
||||
|
||||
$nextprev->addButton($up);
|
||||
$nextprev->addButton($down);
|
||||
|
||||
if ($this->allowReply) {
|
||||
|
||||
|
|
@ -161,14 +169,14 @@ final class PHUIDiffInlineCommentDetailView
|
|||
// file/line information, and synthetic comments don't have an inline
|
||||
// comment ID.
|
||||
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-reply',
|
||||
),
|
||||
pht('Reply'));
|
||||
$reply_button = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setIconFont('fa-reply')
|
||||
->setTooltip(pht('Reply'))
|
||||
->addSigil('differential-inline-reply')
|
||||
->setMustCapture(true);
|
||||
$action_buttons->addButton($reply_button);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -177,42 +185,48 @@ final class PHUIDiffInlineCommentDetailView
|
|||
$anchor_name = 'inline-'.$inline->getID();
|
||||
|
||||
if ($this->editable && !$this->preview) {
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-edit',
|
||||
),
|
||||
pht('Edit'));
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-delete',
|
||||
),
|
||||
pht('Delete'));
|
||||
$edit_button = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setIconFont('fa-pencil')
|
||||
->setTooltip(pht('Edit'))
|
||||
->addSigil('differential-inline-edit')
|
||||
->setMustCapture(true);
|
||||
$action_buttons->addButton($edit_button);
|
||||
|
||||
$delete_button = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setIconFont('fa-trash-o')
|
||||
->setTooltip(pht('Delete'))
|
||||
->addSigil('differential-inline-delete')
|
||||
->setMustCapture(true);
|
||||
$action_buttons->addButton($delete_button);
|
||||
|
||||
} else if ($this->preview) {
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'class' => 'button simple',
|
||||
'meta' => array(
|
||||
'anchor' => $anchor_name,
|
||||
),
|
||||
'sigil' => 'differential-inline-preview-jump',
|
||||
),
|
||||
pht('Not Visible'));
|
||||
$links[] = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'mustcapture' => true,
|
||||
'sigil' => 'differential-inline-delete',
|
||||
),
|
||||
pht('Delete'));
|
||||
|
||||
$delete_button = id(new PHUIButtonView())
|
||||
->setTag('a')
|
||||
->setColor(PHUIButtonView::SIMPLE)
|
||||
->setTooltip(pht('Delete'))
|
||||
->setIconFont('fa-trash-o')
|
||||
->addSigil('differential-inline-delete')
|
||||
->setMustCapture(true);
|
||||
$action_buttons->addButton($delete_button);
|
||||
}
|
||||
|
||||
$done_button = null;
|
||||
|
||||
if (!$is_synthetic) {
|
||||
$draft_state = false;
|
||||
switch ($inline->getFixedState()) {
|
||||
|
|
@ -241,7 +255,7 @@ final class PHUIDiffInlineCommentDetailView
|
|||
$classes[] = 'inline-state-is-draft';
|
||||
}
|
||||
|
||||
$links[] = javelin_tag(
|
||||
$done_input = javelin_tag(
|
||||
'input',
|
||||
array(
|
||||
'type' => 'checkbox',
|
||||
|
|
@ -250,15 +264,16 @@ final class PHUIDiffInlineCommentDetailView
|
|||
'class' => 'differential-inline-done',
|
||||
'sigil' => 'differential-inline-done',
|
||||
));
|
||||
}
|
||||
|
||||
if ($links) {
|
||||
$links = phutil_tag(
|
||||
'span',
|
||||
array('class' => 'differential-inline-comment-links'),
|
||||
phutil_implode_html(" \xC2\xB7 ", $links));
|
||||
} else {
|
||||
$links = null;
|
||||
$done_button = phutil_tag(
|
||||
'label',
|
||||
array(
|
||||
'class' => 'differential-inline-done-label '.
|
||||
($this->getCanMarkDone() ? null : 'done-is-disabled'),
|
||||
),
|
||||
array(
|
||||
$done_input,
|
||||
pht('Done'),
|
||||
));
|
||||
}
|
||||
|
||||
$content = $this->markupEngine->getOutput(
|
||||
|
|
@ -278,7 +293,7 @@ final class PHUIDiffInlineCommentDetailView
|
|||
'');
|
||||
}
|
||||
|
||||
if ($is_draft) {
|
||||
if ($inline->isDraft() && !$is_synthetic) {
|
||||
$classes[] = 'differential-inline-comment-unsaved-draft';
|
||||
}
|
||||
if ($is_synthetic) {
|
||||
|
|
@ -286,16 +301,44 @@ final class PHUIDiffInlineCommentDetailView
|
|||
}
|
||||
$classes = implode(' ', $classes);
|
||||
|
||||
$author_owner = null;
|
||||
if ($is_synthetic) {
|
||||
$author = $inline->getSyntheticAuthor();
|
||||
} else {
|
||||
$author = $handles[$inline->getAuthorPHID()]->getName();
|
||||
if ($inline->getAuthorPHID() == $this->objectOwnerPHID) {
|
||||
$author_owner = id(new PHUITagView())
|
||||
->setType(PHUITagView::TYPE_SHADE)
|
||||
->setName(pht('Author'))
|
||||
->setSlimShady(true)
|
||||
->setShade(PHUITagView::COLOR_YELLOW)
|
||||
->addClass('mml');
|
||||
}
|
||||
}
|
||||
|
||||
$line = phutil_tag(
|
||||
'span',
|
||||
array('class' => 'differential-inline-comment-line'),
|
||||
$line);
|
||||
$group_left = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'inline-head-left',
|
||||
),
|
||||
array(
|
||||
$author,
|
||||
$author_owner,
|
||||
$draft_text,
|
||||
));
|
||||
|
||||
$group_right = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'inline-head-right',
|
||||
),
|
||||
array(
|
||||
$anchor,
|
||||
$links,
|
||||
$nextprev,
|
||||
$action_buttons,
|
||||
$done_button,
|
||||
));
|
||||
|
||||
$markup = javelin_tag(
|
||||
'div',
|
||||
|
|
@ -305,13 +348,9 @@ final class PHUIDiffInlineCommentDetailView
|
|||
'meta' => $metadata,
|
||||
),
|
||||
array(
|
||||
phutil_tag_div('differential-inline-comment-head', array(
|
||||
$anchor,
|
||||
$links,
|
||||
' ',
|
||||
$line,
|
||||
' ',
|
||||
$author,
|
||||
phutil_tag_div('differential-inline-comment-head grouped', array(
|
||||
$group_left,
|
||||
$group_right,
|
||||
)),
|
||||
phutil_tag_div(
|
||||
'differential-inline-comment-content',
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ final class PHUIDiffInlineCommentEditView
|
|||
private function renderBody() {
|
||||
$buttons = array();
|
||||
|
||||
$buttons[] = phutil_tag('button', array(), pht('Ready'));
|
||||
$buttons[] = phutil_tag('button', array(), pht('Save Draft'));
|
||||
$buttons[] = javelin_tag(
|
||||
'button',
|
||||
array(
|
||||
|
|
@ -148,11 +148,10 @@ final class PHUIDiffInlineCommentEditView
|
|||
$edit = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'differential-inline-comment-edit-buttons',
|
||||
'class' => 'differential-inline-comment-edit-buttons grouped',
|
||||
),
|
||||
array(
|
||||
$buttons,
|
||||
phutil_tag('div', array('style' => 'clear: both'), ''),
|
||||
));
|
||||
|
||||
return javelin_tag(
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ final class PHUIButtonBarView extends AphrontTagView {
|
|||
}
|
||||
|
||||
protected function getTagName() {
|
||||
return 'div';
|
||||
return 'span';
|
||||
}
|
||||
|
||||
protected function getTagContent() {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@
|
|||
*/
|
||||
|
||||
#inline-comment-preview {
|
||||
margin-left: 60px;
|
||||
width: 550px;
|
||||
margin-left: 62px;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
#inline-comment-preview .differential-inline-comment {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
#inline-comment-preview
|
||||
.differential-inline-comment + .differential-inline-comment {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/**
|
||||
* @provides differential-changeset-view-css
|
||||
* @requires phui-inline-comment-view-css
|
||||
*/
|
||||
|
||||
.differential-changeset {
|
||||
|
|
@ -52,41 +53,45 @@
|
|||
}
|
||||
|
||||
.differential-diff td {
|
||||
vertical-align: top;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 0 8px 1px;
|
||||
line-height: 16px;
|
||||
vertical-align: top;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 0 8px 1px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.device .differential-diff td {
|
||||
padding: 0 4px 1px;
|
||||
}
|
||||
|
||||
.device .differential-diff .inline td {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.differential-diff td .zwsp {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.differential-diff th {
|
||||
text-align: right;
|
||||
padding: 2px 6px 0px 0px;
|
||||
vertical-align: top;
|
||||
background: {$lightbluebackground};
|
||||
color: {$bluetext};
|
||||
cursor: pointer;
|
||||
border-right: 1px solid {$thinblueborder};
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
padding: 2px 6px 0px 0px;
|
||||
vertical-align: top;
|
||||
background: {$lightbluebackground};
|
||||
color: {$bluetext};
|
||||
cursor: pointer;
|
||||
border-right: 1px solid {$thinblueborder};
|
||||
overflow: hidden;
|
||||
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.differential-diff th.selected {
|
||||
background: {$hovergrey};
|
||||
background-color: {$sh-yellowbackground};
|
||||
}
|
||||
|
||||
.differential-changeset-immutable .differential-diff th {
|
||||
|
|
@ -202,7 +207,7 @@ td.cov-I {
|
|||
.differential-diff td.show-more,
|
||||
.differential-diff td.differential-shield {
|
||||
font: {$basefont};
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
|
@ -244,9 +249,9 @@ td.cov-I {
|
|||
}
|
||||
|
||||
.differential-meta-notice {
|
||||
border-top: 1px solid {$yellow};
|
||||
border-bottom: 1px solid {$yellow};
|
||||
background-color: {$lightyellow};
|
||||
border-top: 1px solid {$sh-lightyellowborder};
|
||||
border-bottom: 1px solid {$sh-lightyellowborder};
|
||||
background-color: {$sh-yellowbackground};
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -266,90 +271,48 @@ td.cov-I {
|
|||
}
|
||||
|
||||
.differential-reticle {
|
||||
background: {$lightyellow};
|
||||
border: 1px solid {$yellow};
|
||||
background-color: {$sh-yellowbackground};
|
||||
border: 1px solid {$sh-yellowborder};
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.differential-inline-comment,
|
||||
.differential-inline-comment-edit {
|
||||
background: #ffffee;
|
||||
border: 1px solid #ccccaa;
|
||||
font: {$basefont};
|
||||
font-size: 12px;
|
||||
margin: 6px 0px;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
.differential-diff .inline td {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit .aphront-form-control-textarea {
|
||||
padding: 0;
|
||||
.differential-loading {
|
||||
border-top: 1px solid {$yellow};
|
||||
border-bottom: 1px solid {$yellow};
|
||||
background-color: {$lightyellow};
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft {
|
||||
background: #f1f1f1;
|
||||
border: 1px dashed {$greytext};
|
||||
}
|
||||
|
||||
.differential-inline-comment-head {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid rgba(204,204,170,0.37);
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.differential-inline-comment-synthetic {
|
||||
background: {$lightblue};
|
||||
.differential-collapse-undo {
|
||||
color: {$darkbluetext};
|
||||
padding: 12px;
|
||||
border: 1px solid {$blue};
|
||||
text-align: center;
|
||||
background-color: {$lightblue};
|
||||
}
|
||||
|
||||
.differential-inline-comment-synthetic .differential-inline-comment-head {
|
||||
border-bottom: 1px solid {$blueborder};
|
||||
.differential-collapse-undo a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.differential-inline-comment-links,
|
||||
.differential-inline-comment-line {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: {$greytext};
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
.differential-file-icon-header .phui-icon-view {
|
||||
display: inline-block;
|
||||
margin: 0 6px 2px 0;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-links {
|
||||
margin-left: 8px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
input.differential-inline-done[type="checkbox"] {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.differential-inline-done[disabled="disabled"] {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
||||
.differential-inline-comment-edit-body .aphront-form-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
.device-phone .differential-file-icon-header .phui-icon-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.differential-changeset-buttons {
|
||||
|
|
@ -387,55 +350,6 @@ input.differential-inline-done[disabled="disabled"] {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.differential-inline-undo {
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
background: {$lightyellow};
|
||||
border: 1px solid {$yellow};
|
||||
margin: 3px 0 1px;
|
||||
color: {$darkgreytext};
|
||||
font: {$basefont};
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.differential-inline-undo a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-buttons {
|
||||
padding: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-buttons button {
|
||||
float: right;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-title {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* When the inline editor is active, disable all the other inline comment links
|
||||
on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
|
||||
issues where you open up multiple editors and run into problems with
|
||||
assumptions about modalness. They are disabled explicitly by the JS, but
|
||||
render them in a disabled state as well.
|
||||
*/
|
||||
.inline-editor-active .differential-inline-comment-links a,
|
||||
.inline-editor-active .differential-inline-comment-links a:hover,
|
||||
.inline-editor-active .differential-inline-comment-links a:active {
|
||||
color: {$lightgreytext};
|
||||
cursor: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
tr.differential-inline-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -443,57 +357,3 @@ tr.differential-inline-hidden {
|
|||
tr.differential-inline-loading {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* In the document, the anchor is positioned inside the inline comment, but
|
||||
this makes the browser jump into the comment so the top isn't visible.
|
||||
Instead, artificially position it a bit above the comment so we'll jump a
|
||||
bit before the comment. This allows us to see the entire comment (and
|
||||
generally the commented-on lines, at least in the case of one or two-line
|
||||
comments) after the jump.
|
||||
*/
|
||||
.differential-inline-comment-anchor {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: -72px;
|
||||
}
|
||||
|
||||
.differential-loading {
|
||||
border-top: 1px solid {$yellow};
|
||||
border-bottom: 1px solid {$yellow};
|
||||
background-color: {$lightyellow};
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.differential-collapse-undo {
|
||||
background: #FFE;
|
||||
color: #000;
|
||||
padding: 1em 0em;
|
||||
border: 1px solid #CCA;
|
||||
text-align: center;
|
||||
background-color: #FFE;
|
||||
}
|
||||
|
||||
.differential-collapse-undo a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.differential-file-icon-header .phui-icon-view {
|
||||
display: inline-block;
|
||||
margin: 0 6px 2px 0;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.device-phone .differential-file-icon-header .phui-icon-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inline-is-done {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.inline-state-is-draft input.differential-inline-done[type="checkbox"] {
|
||||
/* TODO: Possibly style this. */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,381 @@
|
|||
/**
|
||||
* @provides phui-inline-comment-view-css
|
||||
*/
|
||||
|
||||
.differential-comment-list .anchor-target {
|
||||
background-color: #ffffdd;
|
||||
border-color: #ffff00;
|
||||
}
|
||||
|
||||
/* In the document, the anchor is positioned inside the inline comment, but
|
||||
this makes the browser jump into the comment so the top isn't visible.
|
||||
Instead, artificially position it a bit above the comment so we'll jump a
|
||||
bit before the comment. This allows us to see the entire comment (and
|
||||
generally the commented-on lines, at least in the case of one or two-line
|
||||
comments) after the jump.
|
||||
*/
|
||||
.differential-inline-comment-anchor {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: -72px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.differential-inline-comment,
|
||||
.differential-inline-comment-edit {
|
||||
background: #fff;
|
||||
border: 1px solid {$sh-yellowborder};
|
||||
font: {$basefont};
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft {
|
||||
border: 1px solid {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment-head {
|
||||
font-weight: bold;
|
||||
color: {$darkbluetext};
|
||||
border-bottom: 1px solid {$sh-lightyellowborder};
|
||||
padding: 4px 5px 2px 12px;
|
||||
background-color: {$sh-yellowbackground};
|
||||
}
|
||||
|
||||
.device-desktop .differential-inline-comment .button.simple:hover
|
||||
.phui-icon-view,
|
||||
.device-desktop .differential-inline-comment .button.simple:hover {
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.differential-inline-comment-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
|
||||
border-bottom: 1px solid {$lightgreyborder};
|
||||
background-color: {$lightgreybackground};
|
||||
}
|
||||
|
||||
/* Tighten up spacing on replies */
|
||||
.differential-inline-comment.inline-comment-is-reply {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.differential-inline-comment .inline-head-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.differential-inline-comment .inline-head-right .button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.differential-inline-comment .inline-head-left {
|
||||
float: left;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.device-phone .differential-inline-comment .inline-head-left {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.device-phone .differential-inline-comment .inline-head-right {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.device-phone .differential-inline-comment .inline-head-right .mml {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.device-phone .differential-inline-comment .differential-inline-comment-head {
|
||||
padding: 0px 0px 4px 8px;
|
||||
}
|
||||
|
||||
|
||||
/* - Sythetic Comment ---------------------------------------------------------
|
||||
|
||||
Comments left by our robot overlords.
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-synthetic {
|
||||
border: 1px solid {$blue};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-synthetic
|
||||
.differential-inline-comment-head {
|
||||
border-bottom: 1px solid {$blueborder};
|
||||
background-color: {$lightblue};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-synthetic
|
||||
.button.simple {
|
||||
border-color: {$blue};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-synthetic
|
||||
.button.simple .phui-icon-view {
|
||||
color: {$blue};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-synthetic
|
||||
.differential-inline-comment-head {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* - New/Edit Inline Comment --------------------------------------------------
|
||||
|
||||
Styles for when you are creating or editing an inline comment.
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-comment-edit-body .aphront-form-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-buttons {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-buttons button {
|
||||
float: right;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit-title {
|
||||
font-weight: bold;
|
||||
color: {$darkbluetext};
|
||||
padding: 4px 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft .phui-button-bar .button {
|
||||
border-color: {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment-unsaved-draft .phui-button-bar .phui-icon-view {
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit {
|
||||
background-color: {$lightgreybackground};
|
||||
border: 1px solid {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit .remarkup-assist-textarea {
|
||||
border-left-color: {$lightgreyborder};
|
||||
border-right-color: {$lightgreyborder};
|
||||
border-bottom-color: {$greyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit .remarkup-assist-bar {
|
||||
border-left-color: {$lightgreyborder};
|
||||
border-right-color: {$lightgreyborder};
|
||||
border-top-color: {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment-edit .aphront-form-control-textarea {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* - Action Buttons -----------------------------------------------------------
|
||||
|
||||
Reply, Edit, Delete, View, Button Bars...
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-comment .differential-inline-done-label,
|
||||
.differential-inline-comment .button.simple {
|
||||
border-color: {$sh-yellowborder};
|
||||
color: {$sh-yellowicon};
|
||||
}
|
||||
|
||||
.differential-inline-comment .button.simple .phui-icon-view {
|
||||
color: {$sh-yellowicon};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.differential-inline-done-label,
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.button.simple {
|
||||
border-color: {$lightgreyborder};
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.button.simple .phui-icon-view {
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.device-desktop .differential-inline-comment-unsaved-draft
|
||||
a.button.simple:hover {
|
||||
border-color: {$lightgreyborder};
|
||||
}
|
||||
|
||||
/* - Done Button --------------------------------------------------------------
|
||||
|
||||
Default colors, hovers, checked styles for the Done Button.
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-done-label {
|
||||
border: 1px solid {$sh-yellowborder};
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin-left: 8px;
|
||||
padding: 3px 8px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.differential-inline-done-label .differential-inline-done {
|
||||
margin: 0 6px 0 0;
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.differential-inline-done[disabled="disabled"] {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.device-desktop .differential-inline-comment.inline-is-done
|
||||
.differential-inline-done-label:hover,
|
||||
.device-desktop .differential-inline-comment
|
||||
.differential-inline-done-label:hover {
|
||||
background-color: #fff;
|
||||
color: {$sky};
|
||||
border-color: {$lightblueborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment .differential-inline-comment-head
|
||||
.differential-inline-done-label.done-is-disabled {
|
||||
color: {$sh-yellowtext};
|
||||
border-color: {$sh-yellowborder};
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.differential-inline-done-label.done-is-disabled {
|
||||
color: {$lightgreytext};
|
||||
border-color: {$lightgreyborder};
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.device-desktop
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.differential-inline-done-label.done-is-disabled:hover {
|
||||
background-color: transparent;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.differential-inline-comment
|
||||
.differential-inline-done-label.done-is-disabled {
|
||||
border-color: {$sh-lightyellowborder};
|
||||
color: {$sh-yellowtext};
|
||||
}
|
||||
|
||||
.device-desktop .differential-inline-comment
|
||||
.differential-inline-done-label.done-is-disabled:hover {
|
||||
background-color: transparent;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.differential-inline-comment.inline-is-done
|
||||
.differential-inline-done-label {
|
||||
background-color: #fff;
|
||||
border-color: {$lightblueborder};
|
||||
color: {$sky} !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.device-desktop .differential-inline-comment.inline-is-done
|
||||
.differential-inline-done-label:hover {
|
||||
background-color: #fff;
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
|
||||
/* - Inline Is Done -----------------------------------------------------------
|
||||
|
||||
Is Done for Diff Author = grey, for Diff Viewer = yellow.
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-comment.inline-is-done {
|
||||
border-color: {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment.inline-is-done
|
||||
.differential-inline-comment-head {
|
||||
background-color: {$lightgreybackground};
|
||||
border-bottom-color: {$lightgreyborder};
|
||||
}
|
||||
|
||||
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
||||
.button.simple,
|
||||
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
||||
.differential-inline-done-label {
|
||||
border-color: {$lightgreyborder};
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.differential-inline-comment.inline-is-done
|
||||
.button.simple .phui-icon-view {
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* - Unsaved Draft ------------------------------------------------------------
|
||||
|
||||
The Unsubmitted state of the comment / done checkbox styles.
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-comment .inline-draft-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.differential-inline-comment.differential-inline-comment-unsaved-draft
|
||||
.inline-draft-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* - Undo ---------------------------------------------------------------------
|
||||
|
||||
A wild undo box appears!
|
||||
|
||||
*/
|
||||
|
||||
.differential-inline-undo {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background: {$sh-yellowbackground};
|
||||
border: 1px solid {$sh-yellowborder};
|
||||
margin: 4px 0;
|
||||
color: {$darkgreytext};
|
||||
font: {$basefont};
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.differential-inline-undo a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -51,12 +51,3 @@
|
|||
.differential-haunt-mode-1 {
|
||||
padding-bottom: 250px;
|
||||
}
|
||||
|
||||
.differential-comment-list .anchor-target {
|
||||
background-color: #ffffdd;
|
||||
border-color: #ffff00;
|
||||
}
|
||||
|
||||
.differential-inline-comment-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,6 +132,11 @@ button.simple:hover {
|
|||
background-image: none;
|
||||
border-bottom-color: {$darkblueborder};
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.button.simple .phui-icon-view {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.button.simple.phuix-dropdown-open {
|
||||
|
|
@ -299,7 +304,7 @@ a.toggle-fixed {
|
|||
}
|
||||
|
||||
.phui-button-bar .button .phui-icon-view {
|
||||
left: 12px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.button.has-icon .phui-button-text {
|
||||
|
|
@ -332,7 +337,7 @@ a.toggle-fixed {
|
|||
.phui-button-bar a.button.has-icon {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 12px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.phui-button-bar .phui-button-bar-first {
|
||||
|
|
|
|||
Loading…
Reference in a new issue