mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-21 13:00:56 +01:00
e9f4a84a89
Summary: Ref T7447. Implements per-viewer comment hiding. Once a comment is obsolete or uninteresting, you can hide it completely. This is sticky per-user. My hope is that this will strike a better balance between concerns than some of the other approaches (conservative porting, summarization, hide-all). Specifically, this adds a new action here: {F435621} Clicking it completely collapses the comment into a small icon on the previous line, and saves the comment state as hidden for you: {F435626} You can click the icon to reveal all hidden comments below the line. Test Plan: - Hid comments. - Showed comments. - Created, edited, deleted and submitted comments. - Used Diffusion comments (hiding is not implemented there yet, but I'd plan to bring it there eventually if it works out in Differential). Reviewers: btrahan, chad Reviewed By: btrahan Subscribers: jparise, yelirekim, epriestley Maniphest Tasks: T7447 Differential Revision: https://secure.phabricator.com/D13009
454 lines
10 KiB
CSS
454 lines
10 KiB
CSS
/**
|
|
* @provides phui-inline-comment-view-css
|
|
*/
|
|
|
|
.differential-diff td.anchor-target {
|
|
background: {$lightyellow};
|
|
}
|
|
|
|
/* 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 4px 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 .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - New/Edit Inline Comment --------------------------------------------------
|
|
|
|
Styles for when you are creating or editing an inline comment.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .done-label {
|
|
display: inline-block;
|
|
color: {$sh-yellowicon};
|
|
padding: 4px;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .done-label,
|
|
.differential-inline-comment.inline-comment-ghost .done-label {
|
|
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,
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.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;
|
|
padding: 4px 8px 5px;
|
|
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};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button-done {
|
|
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;
|
|
}
|
|
|
|
/* - Spooky Ghost UI -----------------------------------------------------------
|
|
|
|
Hide your codez.
|
|
|
|
*/
|
|
|
|
.inline-comment-ghost .differential-inline-comment-head {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.ghost-icon {
|
|
background: {$darkgreybackground};
|
|
float: left;
|
|
margin-right: 8px;
|
|
padding: 2px 4px 2px 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ghost-icon .phui-icon-view {
|
|
padding: 8px 7px;
|
|
font-size: 15px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.device-desktop .ghost-icon .phui-icon-view:hover {
|
|
color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
position: relative;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
|
|
/* - Hiding Inlines ------------------------------------------------------------
|
|
*/
|
|
|
|
.reveal-inlines {
|
|
float: left;
|
|
margin-left: 4px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.reveal-inlines span.phui-icon-view {
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.reveal-inlines:hover span.phui-icon-view {
|
|
color: {$darkbluetext};
|
|
}
|