1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
phorge-phorge/webroot/rsrc/css/application/differential/revision-comment.css
Chad Little b560014577 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
2015-03-27 16:00:09 -07:00

53 lines
1.2 KiB
CSS

/**
* @provides differential-revision-comment-css
*/
.differential-comment-list {
margin: 0 16px;
}
/* Spooky haunted panel which floats on the bottom of the screen.
Haunt modes are:
- Mode 1: Just the comment box.
- Mode 2: Comment box, comment preview, and inline comment previews.
*/
.differential-haunt-mode-1 .differential-add-comment-panel,
.differential-haunt-mode-2 .differential-add-comment-panel {
background-color: #fff;
position: fixed;
width: 100%;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
max-height: 375px;
margin: 0;
box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-moz-box-shadow: 0 0 4px #000;
}
.differential-haunt-mode-1 .differential-add-comment-panel .phui-box,
.differential-haunt-mode-2 .differential-add-comment-panel .phui-box {
margin: 0;
border-width: 0;
}
.differential-haunt-mode-2 .differential-add-comment-panel {
max-height: 75%;
}
.differential-haunt-mode-1 .differential-add-comment-panel .phui-header-shell,
.differential-haunt-mode-2 .differential-add-comment-panel .phui-header-shell {
display: none;
}
.differential-haunt-mode-1 .aphront-panel-preview {
display: none;
}
.differential-haunt-mode-1 {
padding-bottom: 250px;
}