diff --git a/resources/celerity/map.php b/resources/celerity/map.php index ede5ff63de..5688e3daaa 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -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', diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php index cb490390f2..0ea1dce662 100644 --- a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php +++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php @@ -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', diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php index 320d18b32c..6634c397f9 100644 --- a/src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php +++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php @@ -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( diff --git a/src/view/phui/PHUIButtonBarView.php b/src/view/phui/PHUIButtonBarView.php index ad4fd21665..ff45415c8f 100644 --- a/src/view/phui/PHUIButtonBarView.php +++ b/src/view/phui/PHUIButtonBarView.php @@ -14,7 +14,7 @@ final class PHUIButtonBarView extends AphrontTagView { } protected function getTagName() { - return 'div'; + return 'span'; } protected function getTagContent() { diff --git a/webroot/rsrc/css/application/differential/add-comment.css b/webroot/rsrc/css/application/differential/add-comment.css index 4cab4079f3..e40c2c6576 100644 --- a/webroot/rsrc/css/application/differential/add-comment.css +++ b/webroot/rsrc/css/application/differential/add-comment.css @@ -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; } diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css index 8be244005a..33f57a67b7 100644 --- a/webroot/rsrc/css/application/differential/changeset-view.css +++ b/webroot/rsrc/css/application/differential/changeset-view.css @@ -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. */ -} diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css new file mode 100644 index 0000000000..f4543c8705 --- /dev/null +++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css @@ -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; +} diff --git a/webroot/rsrc/css/application/differential/revision-comment.css b/webroot/rsrc/css/application/differential/revision-comment.css index e59b062bf0..d1ccc68b44 100644 --- a/webroot/rsrc/css/application/differential/revision-comment.css +++ b/webroot/rsrc/css/application/differential/revision-comment.css @@ -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; -} diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css index fa4cd6be12..a258ff8efa 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -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 {