Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update review comment styles #56595

Merged
merged 5 commits into from
Aug 16, 2018
Merged

Update review comment styles #56595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8eeeed3
Add empty text for review title
Aug 16, 2018
1094f6b
Update reply text area styling to match comment box
Aug 16, 2018
f28979f
Add padding to comment text area
Aug 16, 2018
aec8282
Remove right side padding of text area so scrollbar is flushed to edge
Aug 16, 2018
1b61c2a
Remove unused variable
Aug 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeE
import { IEditorContribution } from 'vs/editor/common/editorCommon';
import { IRange } from 'vs/editor/common/core/range';
import * as modes from 'vs/editor/common/modes';
import { peekViewEditorBackground, peekViewResultsBackground, peekViewResultsSelectionBackground } from 'vs/editor/contrib/referenceSearch/referencesWidget';
import { peekViewResultsBackground, peekViewResultsSelectionBackground, peekViewTitleBackground } from 'vs/editor/contrib/referenceSearch/referencesWidget';
import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
import { ServicesAccessor, IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { KeybindingsRegistry, KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
Expand Down Expand Up @@ -602,7 +602,7 @@ registerThemingParticipant((theme, collector) => {
`}`);
}

let monacoEditorBackground = theme.getColor(peekViewEditorBackground);
let monacoEditorBackground = theme.getColor(peekViewTitleBackground);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks better on most themes, but on Quiet Light it matches the rest of the background. Should we use something else like the input background? Or do you think it looks ok on Quiet Light?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed on some themes this does blend in. I thought about using the input background but then that would mean we'd need to use it in the text area, which currently uses editorBackground and was what I was trying to match.

Here's what it would look like if we used the input bg colo. Thoughts?
image

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks good to me 👍

if (monacoEditorBackground) {
collector.addRule(
`.monaco-editor .review-widget .body .comment-form .review-thread-reply-button {` +
Expand Down
9 changes: 7 additions & 2 deletions src/vs/workbench/parts/comments/electron-browser/media/review.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,15 +160,15 @@
.monaco-editor .review-widget .body .comment-form.expand .monaco-editor,
.monaco-editor .review-widget .body .comment-form.expand .form-actions {
display: block;
box-sizing: border-box;
box-sizing: content-box;
}

.monaco-editor .review-widget .body .comment-form .review-thread-reply-button {
text-align: left;
display: block;
width: 100%;
resize: vertical;
border-radius: 3px;
border-radius: 0;
box-sizing: border-box;
padding: 6px 12px;
font-weight: 600;
Expand All @@ -191,6 +191,7 @@
max-height: 500px;
border-radius: 3px;
border: 0px;
padding: 6px 0 6px 12px;
}

.monaco-editor .review-widget .body .comment-form .form-actions {
Expand Down Expand Up @@ -222,6 +223,10 @@
cursor: pointer;
}

.monaco-editor .review-widget .head .review-title .filename:empty::after {
content: "Start discussion";
}

.monaco-editor .review-widget .head .review-title .dirname:not(:empty) {
font-size: 0.9em;
margin-left: 0.5em;
Expand Down