Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 17:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reduce border radius for inline edit components from 4px to 3px

Browse Source
This commit is contained in:
mrleemurray
2025-12-12 15:07:27 +00:00
parent 9ba40f8204
commit dcfef6c3ea
8 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts
+2 -2
View File
@@ -492,7 +492,7 @@ export class InlineEditsGutterIndicator extends Disposable {
style: {
position: 'absolute',
background: asCssVariable(inlineEditIndicatorBackground),
borderRadius: '4px',
borderRadius: '3px',
...rectToProps(reader => layout.read(reader).gutterEditArea),
}
}),
@@ -529,7 +529,7 @@ export class InlineEditsGutterIndicator extends Disposable {
['--vscodeIconForeground' as any]: this._gutterIndicatorStyles.map(v => v.foreground),
border: this._gutterIndicatorStyles.map(v => `1px solid ${v.border}`),
boxSizing: 'border-box',
borderRadius: '4px',
borderRadius: '3px',
display: 'flex',
justifyContent: 'flex-end',
transition: this._modifierPressed.map(m => m ? '' : 'background-color 0.2s ease-in-out, width 0.2s ease-in-out'),
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts
+1 -1
View File
@@ -248,7 +248,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
boxSizing: 'border-box',
cursor: 'pointer',
border: styles.map(s => `1px solid ${s.border}`),
borderRadius: '4px',
borderRadius: '3px',
backgroundColor: styles.map(s => s.background),
display: 'flex',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts
+1 -1
View File
@@ -29,7 +29,7 @@ import { getPrefixTrim, mapOutFalsy } from '../utils/utils.js';
const BORDER_WIDTH = 1;
const WIDGET_SEPARATOR_WIDTH = 1;
const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
const BORDER_RADIUS = 4;
const BORDER_RADIUS = 3;
export class InlineEditsInsertionView extends Disposable implements IInlineEditsView {
private readonly _editorObs: ObservableCodeEditor;
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts
+4 -4
View File
@@ -232,7 +232,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft).withMargin(separatorWidth)),
borderRadius: '4px',
borderRadius: '3px',
border: `${separatorWidth + 1}px solid ${asCssVariable(editorBackground)}`,
boxSizing: 'border-box',
@@ -244,7 +244,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)),
borderRadius: '4px',
borderRadius: '3px',
border: getEditorBlendedColor(originalBorderColor, this._themeService).map(c => `1px solid ${c.toString()}`),
pointerEvents: 'none',
@@ -257,7 +257,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).lowerBackground.translateX(-contentLeft)),
borderRadius: '0 0 4px 4px',
borderRadius: '0 0 3px 3px',
background: asCssVariable(editorBackground),
boxShadow: `${asCssVariable(scrollbarShadow)} 0 6px 6px -6px`,
border: `1px solid ${asCssVariable(modifiedBorderColor)}`,
@@ -289,7 +289,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
fontWeight: this._editor.getOption(EditorOption.fontWeight),
pointerEvents: 'none',
whiteSpace: 'nowrap',
borderRadius: '0 0 4px 4px',
borderRadius: '0 0 3px 3px',
overflow: 'hidden',
}
}, [...modifiedLineElements.lines]),
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts
+3 -3
View File
@@ -77,7 +77,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).lowerBackground),
borderRadius: '4px',
borderRadius: '3px',
background: 'var(--vscode-editor-background)'
}
}, []),
@@ -85,7 +85,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).modified),
borderRadius: '4px',
borderRadius: '3px',
padding: '0px',
textAlign: 'center',
background: 'var(--vscode-inlineEdit-modifiedChangedTextBackground)',
@@ -100,7 +100,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
style: {
position: 'absolute',
...rectToProps(reader => layout.read(reader).background),
borderRadius: '4px',
borderRadius: '3px',
border: `1px solid ${modifiedBorderColor}`,
//background: 'rgba(122, 122, 122, 0.12)', looks better
background: 'var(--vscode-inlineEdit-wordReplacementView-background)',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts
+4 -4
View File
@@ -241,7 +241,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
width: undefined,
pointerEvents: 'auto',
boxSizing: 'border-box',
borderRadius: '4px',
borderRadius: '3px',
background: asCssVariable(editorBackground),
display: 'flex',
@@ -258,7 +258,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
fontSize: this._editor.getOption(EditorOption.fontSize),
fontWeight: this._editor.getOption(EditorOption.fontWeight),
width: rectToProps(reader => layout.read(reader).codeLine.withMargin(BORDER_WIDTH, 2 * BORDER_WIDTH)).width,
borderRadius: '4px',
borderRadius: '3px',
border: primaryActionStyles.map(s => `${BORDER_WIDTH}px solid ${s.borderColor}`),
boxSizing: 'border-box',
padding: `${BORDER_WIDTH}px`,
@@ -287,7 +287,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
id: DOM_ID_RENAME,
style: {
position: 'relative',
borderRadius: '4px',
borderRadius: '3px',
borderTop: `${BORDER_WIDTH}px solid`,
borderRight: `${BORDER_WIDTH}px solid`,
borderBottom: `${BORDER_WIDTH}px solid`,
@@ -326,7 +326,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
position: 'absolute',
...rectToProps(reader => layout.read(reader).originalLine.withMargin(BORDER_WIDTH)),
boxSizing: 'border-box',
borderRadius: '4px',
borderRadius: '3px',
border: `${BORDER_WIDTH}px solid ${originalBorderColor}`,
background: asCssVariable(originalChangedTextOverlayColor),
pointerEvents: 'none',
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.ts
+3 -2
View File
@@ -36,7 +36,7 @@ import { ILongDistancePreviewProps, LongDistancePreviewEditor } from './longDist
import { InlineSuggestionGutterMenuData, SimpleInlineSuggestModel } from '../../components/gutterIndicatorView.js';
import { jumpToNextInlineEditId } from '../../../../controller/commandIds.js';
const BORDER_RADIUS = 4;
const BORDER_RADIUS = 6;
const MAX_WIDGET_WIDTH = { EMPTY_SPACE: 425, OVERLAY: 375 };
const MIN_WIDGET_WIDTH = 250;
@@ -373,7 +373,8 @@ export class InlineEditsLongDistanceHint extends Disposable implements IInlineEd
class: ['editorContainer'],
style: {
overflow: 'hidden',
padding: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin),
paddingTop: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin),
paddingBottom: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin),
background: asCssVariable(editorBackground),
pointerEvents: 'none',
},
src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css
+4 -4
View File
@@ -132,13 +132,13 @@
border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}
.inlineCompletions-char-insert.single-line-inline.start {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}
.inlineCompletions-char-insert.single-line-inline.end {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
}