Skip to content

Commit 8c0c2c1

Browse files
RicbetRicbet
committed
style: beauty merge editor diff range (#2046)
1 parent 7a98ccc commit 8c0c2c1

File tree

4 files changed

+72
-57
lines changed

4 files changed

+72
-57
lines changed

‎packages/monaco/src/browser/contrib/merge-editor/model/decorations.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,22 @@ export class MergeEditorDecorations extends Disposable {
7474
});
7575

7676
return Array.from({ length }).map((_, idx) => {
77+
let borderClassName = ' ';
7778
let wrapClassName = ` ${DECORATIONS_CLASSNAME.conflict_wrap} `;
79+
7880
if (length !== 1) {
79-
wrapClassName +=
81+
borderClassName +=
8082
idx === 0
8183
? DECORATIONS_CLASSNAME.stretch_bottom
8284
: idx === length - 1
8385
? DECORATIONS_CLASSNAME.stretch_top
8486
: DECORATIONS_CLASSNAME.combine(DECORATIONS_CLASSNAME.stretch_top, DECORATIONS_CLASSNAME.stretch_bottom);
8587
}
8688

89+
if (range.isComplete) {
90+
borderClassName += wrapClassName;
91+
}
92+
8793
const mergeOptions = {
8894
...options,
8995
...this.codeEditor.getMonacoDecorationOptions(options, range),
@@ -100,13 +106,9 @@ export class MergeEditorDecorations extends Disposable {
100106
},
101107
options: {
102108
...mergeOptions,
103-
...(range.isComplete
104-
? {
105-
className: (mergeOptions.className || '') + wrapClassName,
106-
marginClassName: (mergeOptions.marginClassName || '') + wrapClassName,
107-
linesDecorationsClassName: (mergeOptions.linesDecorationsClassName || '') + wrapClassName,
108-
}
109-
: {}),
109+
className: (mergeOptions.className || '') + borderClassName,
110+
marginClassName: (mergeOptions.marginClassName || '') + borderClassName,
111+
linesDecorationsClassName: (mergeOptions.linesDecorationsClassName || '') + borderClassName,
110112
},
111113
},
112114
};

‎packages/monaco/src/browser/contrib/merge-editor/view/merge-editor.less

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,6 @@
6565
width: 100%;
6666
overflow: initial;
6767
& path {
68-
stroke-dasharray: 3;
69-
stroke-width: 2;
7068
&.insert {
7169
fill: var(--mergeEditor-insertedBackground);
7270
stroke: var(--mergeEditor-insertedBackground);
@@ -104,47 +102,39 @@
104102
// conflict action 完成后的虚线框效果
105103
.merge-editor-margin-className,
106104
.merge-editor-diff-line-background {
105+
border-width: 1px;
106+
border-style: solid;
107+
107108
&.conflict-wrap {
108109
border-width: 2px;
109110
border-style: dashed;
110111
background-color: transparent;
112+
}
111113

112-
&.insert {
113-
border-color: var(--mergeEditor-insertedBackground);
114-
}
115-
&.modify {
116-
border-color: var(--mergeEditor-modifyBackground);
117-
}
118-
&.remove {
119-
border-color: var(--mergeEditor-removedBackground);
120-
}
121-
122-
&.stretch-left {
123-
border-left: none;
124-
}
114+
&.insert {
115+
border-color: var(--mergeEditor-insertedBackground);
116+
}
117+
&.modify {
118+
border-color: var(--mergeEditor-modifyBackground);
119+
}
120+
&.remove {
121+
border-color: var(--mergeEditor-removedBackground);
122+
}
125123

126-
&.stretch-right {
127-
border-right: none;
128-
}
124+
&.stretch-left {
125+
border-left: transparent;
126+
}
129127

130-
&.stretch-top {
131-
border-top: none;
132-
}
128+
&.stretch-right {
129+
border-right: transparent;
130+
}
133131

134-
&.stretch-bottom {
135-
border-bottom: none;
136-
}
132+
&.stretch-top {
133+
border-top: transparent;
137134
}
138-
}
139135

140-
.merge-editor-margin-className {
141-
&.conflict-wrap {
142-
&.editor-view-current-type {
143-
border-left: none;
144-
}
145-
&.editor-view-incoming-type {
146-
border-right: none;
147-
}
136+
&.stretch-bottom {
137+
border-bottom: transparent;
148138
}
149139
}
150140
}

‎packages/monaco/src/browser/contrib/merge-editor/view/stickiness-connect-manager.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,29 @@ const PieceSVG: React.FC<{ piece: StickyPieceModel }> = ({ piece }) => {
1616
const { leftTop, rightTop, leftBottom, rightBottom } = piece.path;
1717

1818
const drawSolidPath = () => (
19-
<path
20-
className={piece.rangeType}
21-
strokeOpacity={0}
22-
d={`M0,${leftTop} L${piece.width},${rightTop} L${piece.width},${rightBottom} L0,${leftBottom} z`}
23-
></path>
19+
<>
20+
<path
21+
className={piece.rangeType}
22+
strokeOpacity={0}
23+
d={`M0,${leftTop} L${piece.width},${rightTop} L${piece.width},${rightBottom} L0,${leftBottom} z`}
24+
></path>
25+
{/* 描边 */}
26+
<path
27+
className={piece.rangeType}
28+
fillOpacity={0}
29+
strokeLinecap={'round'}
30+
strokeWidth={2}
31+
d={`M0,${leftTop} L${piece.width},${rightTop} M${piece.width},${rightBottom} L0,${leftBottom}`}
32+
></path>
33+
</>
2434
);
2535

2636
const drawDashedPath = () => (
2737
<path
2838
className={piece.rangeType}
2939
fillOpacity={0}
40+
strokeDasharray={3}
41+
strokeWidth={2}
3042
d={`M0,${leftTop} L${piece.width},${rightTop} M${piece.width},${rightBottom} L0,${leftBottom}`}
3143
></path>
3244
);

‎packages/theme/src/common/color-tokens/editor.ts

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -415,45 +415,56 @@ export const diffDiagonalFill = registerColor(
415415
/**
416416
* Merge Editor Colors
417417
*/
418-
export const defaultModifyColor = new Color(new RGBA(27, 129, 168, 0.6));
419-
export const defaultHCModifyColor = new Color(new RGBA(32, 144, 211, 0.6));
418+
export const defaultMergeEditorInsertColor = new Color(new RGBA(122, 255, 31, 0.12));
419+
export const defaultMergeEditorRemoveColor = new Color(new RGBA(255, 21, 33, 0.12));
420+
export const defaultMergeEditorModifyColor = new Color(new RGBA(255, 186, 29, 0.12));
420421
export const mergeEditorInserted = registerColor(
421422
'mergeEditor.insertedBackground',
422-
{ dark: defaultInsertColor, light: defaultInsertColor, hcDark: null, hcLight: null },
423+
{ dark: defaultMergeEditorInsertColor, light: defaultMergeEditorInsertColor, hcDark: null, hcLight: null },
423424
'',
424425
true,
425426
);
426427
export const mergeEditorRemoved = registerColor(
427428
'mergeEditor.removedBackground',
428-
{ dark: defaultRemoveColor, light: defaultRemoveColor, hcDark: null, hcLight: null },
429+
{ dark: defaultMergeEditorRemoveColor, light: defaultMergeEditorRemoveColor, hcDark: null, hcLight: null },
429430
'',
430431
true,
431432
);
432433
export const mergeEditorModify = registerColor(
433434
'mergeEditor.modifyBackground',
434-
{ dark: defaultModifyColor, light: defaultModifyColor, hcDark: defaultHCModifyColor, hcLight: defaultHCModifyColor },
435+
{ dark: defaultMergeEditorModifyColor, light: defaultMergeEditorModifyColor, hcDark: null, hcLight: null },
435436
'',
436437
true,
437438
);
438439
export const mergeEditorInnerCharInserted = registerColor(
439440
'mergeEditor.insertedInnerCharColor',
440-
{ dark: transparent(defaultInsertColor, 1), light: transparent(defaultInsertColor, 1), hcDark: null, hcLight: null },
441+
{
442+
dark: transparent(defaultMergeEditorInsertColor, 1),
443+
light: transparent(defaultMergeEditorInsertColor, 1),
444+
hcDark: null,
445+
hcLight: null,
446+
},
441447
'',
442448
true,
443449
);
444450
export const mergeEditorInnerCharRemoved = registerColor(
445451
'mergeEditor.removedInnerCharColor',
446-
{ dark: transparent(defaultRemoveColor, 1), light: transparent(defaultRemoveColor, 1), hcDark: null, hcLight: null },
452+
{
453+
dark: transparent(defaultMergeEditorRemoveColor, 1),
454+
light: transparent(defaultMergeEditorRemoveColor, 1),
455+
hcDark: null,
456+
hcLight: null,
457+
},
447458
'',
448459
true,
449460
);
450461
export const mergeEditorInnerCharModify = registerColor(
451462
'mergeEditor.modifyInnerCharColor',
452463
{
453-
dark: transparent(defaultModifyColor, 1),
454-
light: transparent(defaultModifyColor, 1),
455-
hcDark: transparent(defaultHCModifyColor, 1),
456-
hcLight: transparent(defaultHCModifyColor, 1),
464+
dark: transparent(defaultMergeEditorModifyColor, 1),
465+
light: transparent(defaultMergeEditorModifyColor, 1),
466+
hcDark: null,
467+
hcLight: null,
457468
},
458469
'',
459470
true,

0 commit comments

Comments
 (0)