mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
b2d280ff51
Summary: Ref T7447. This ports comments forward and backward in the best case: - The old comment is on a changeset with the same filename. - The old and new files are pretty much the same, line-for-line. This will fail to port a lot of comments around and probably port a lot of comments into goofy places. We can see how bad it is in practice. Errata: - Design is me cobbling something together, probably worth tweaking. - "Old Comment" should, at a minimum, say "Newer Comment" sometimes, or we should come up with some better name for this stuff. Test Plan: {F377214} Reviewers: chad, btrahan Reviewed By: btrahan Subscribers: johnny-bit, yelirekim, epriestley Maniphest Tasks: T7447 Differential Revision: https://secure.phabricator.com/D12484
407 lines
9.5 KiB
CSS
407 lines
9.5 KiB
CSS
/**
|
|
* @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;
|
|
}
|
|
|
|
.inline-state-is-draft {
|
|
border: 1px dashed {$greyborder};
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-comment-head {
|
|
border-bottom: 1px dashed {$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;
|
|
}
|
|
|
|
/* - Ghost Comment ------------------------------------------------------------
|
|
|
|
Comments from older or newer versions of the changeset.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border: 1px solid {$lightgreyborder};
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
border-bottom: 1px solid {$lightgreyborder};
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.button.simple {
|
|
border-color: {$lightgreyborder};
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - 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;
|
|
}
|
|
|
|
.inline-state-is-draft .phui-button-bar .button {
|
|
border-color: {$lightgreyborder};
|
|
}
|
|
|
|
.inline-state-is-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.inline-state-is-draft
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.button.simple {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.device-desktop .inline-state-is-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;
|
|
}
|
|
|
|
.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.inline-is-done
|
|
.differential-inline-done-label {
|
|
background-color: #fff;
|
|
border-color: {$lightblueborder};
|
|
color: {$sky};
|
|
opacity: 1;
|
|
}
|
|
|
|
.device-desktop .differential-inline-comment.inline-is-done
|
|
.differential-inline-done-label:hover {
|
|
background-color: #fff;
|
|
color: {$sky};
|
|
}
|
|
|
|
.device-desktop .differential-inline-comment.inline-state-is-draft
|
|
.differential-inline-comment-head .button.simple.button-not-done:hover {
|
|
color: {$lightgreytext};
|
|
background-color: transparent;
|
|
border-color: {$lightgreyborder};
|
|
cursor: auto;
|
|
}
|
|
|
|
.device-desktop .differential-inline-comment .differential-inline-comment-head
|
|
.simple.button.button-not-done:hover {
|
|
color: {$sh-yellowicon};
|
|
background-color: transparent;
|
|
border-color: {$sh-yellowborder};
|
|
cursor: auto;
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button.simple.button-done {
|
|
background-color: #fff;
|
|
color: {$sky};
|
|
border-color: {$sky};
|
|
cursor: auto;
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button.simple.button-done .phui-icon-view {
|
|
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 {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.differential-inline-done-label {
|
|
color: {$sky};
|
|
background-color: #fff;
|
|
border-color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
|
|
|
|
/* - Inline State is Draft ----------------------------------------------------
|
|
|
|
The Unsubmitted state of the comment / done checkbox styles.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .inline-draft-text {
|
|
display: none;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .inline-draft-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-done-label {
|
|
border-style: dashed;
|
|
}
|
|
|
|
|
|
/* - 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;
|
|
}
|