Proposal for updating commenting area for diffs (#157508)

* Proposal for updating commenting area for diffs Fixes #115808 * Polish changes
microsoft · Aug 10, 2022 · f117a2e · f117a2e
1 parent dfd7770
commit f117a2e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/vs/workbench/contrib/comments/browser/commentGlyphWidget.ts b/src/vs/workbench/contrib/comments/browser/commentGlyphWidget.ts
@@ -12,7 +12,7 @@ import { registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { themeColorFromId } from 'vs/platform/theme/common/themeService';
 import { IEditorDecorationsCollection } from 'vs/editor/common/editorCommon';
 
-const overviewRulerDefault = new Color(new RGBA(197, 197, 197, 1));
+const overviewRulerDefault = new Color(new RGBA(65, 70, 80, 1));
 
 export const overviewRulerCommentingRangeForeground = registerColor('editorGutter.commentRangeForeground', { dark: overviewRulerDefault, light: overviewRulerDefault, hcDark: overviewRulerDefault, hcLight: overviewRulerDefault }, nls.localize('editorGutterCommentRangeForeground', 'Editor gutter decoration color for commenting ranges.'));
 

diff --git a/src/vs/workbench/contrib/comments/browser/commentsEditorContribution.ts b/src/vs/workbench/contrib/comments/browser/commentsEditorContribution.ts
@@ -861,7 +861,7 @@ export class CommentController implements IEditorContribution {
 				if (options.get(EditorOption.folding) && options.get(EditorOption.showFoldingControls) !== 'never') {
 					lineDecorationsWidth -= 16;
 				}
-				lineDecorationsWidth += 9;
+				lineDecorationsWidth += 14;
 				extraEditorClassName.push('inline-comment');
 				this.editor.updateOptions({
 					extraEditorClassName: extraEditorClassName.join(' '),

diff --git a/src/vs/workbench/contrib/comments/browser/media/review.css b/src/vs/workbench/contrib/comments/browser/media/review.css
@@ -372,7 +372,7 @@
 }
 
 .monaco-editor .comment-range-glyph {
-	margin-left: 5px;
+	margin-left: 10px;
 	width: 4px !important;
 	cursor: pointer;
 	z-index: 10;
@@ -400,7 +400,7 @@ div.preview.inline .monaco-editor .comment-range-glyph {
 	width: 9px;
 	left: -6px;
 	z-index: 10;
-	color: black;
+	color: var(--vscode-editor-foreground);
 	text-align: center;
 	display: flex;
 	flex-direction: row;
@@ -410,24 +410,35 @@ div.preview.inline .monaco-editor .comment-range-glyph {
 
 .monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before,
 .monaco-editor .margin-view-overlays .comment-range-glyph.comment-diff-added.line-hover:before {
-	content: "+";
+	content: "\ea60";
+	font-family: "codicon";
+	border-radius: 3px;
+	width: 19px !important;
+	margin-left: -5px;
+	padding-top: 1px;
+	padding-left: 1px;
 }
 
 .monaco-editor .comment-range-glyph.comment-thread {
 	z-index: 20;
 }
 
 .monaco-editor .comment-range-glyph.comment-thread:before {
-	content: "◆";
-	font-size: 10px;
+	content: "\ea6b";
+	font-family: "codicon";
+	font-size: 14px;
+	width: 19px !important;
 	line-height: 100%;
+	border-radius: 3px;
 	z-index: 20;
+	margin-left: -5px;
 }
 
-.monaco-editor.inline-comment .margin-view-overlays .folding {
-	margin-left: 7px;
+.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded,
+.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-collapsed {
+	margin-left: 13px;
 }
 
 .monaco-editor.inline-comment .margin-view-overlays .dirty-diff-glyph {
-	margin-left: 14px;
+	margin-left: 23px;
 }