Skip to content

Commit 7513cee

Browse files
hbonshediet
hbons
and
hediet
authored
multiDiffEditor: Card style + update colors (microsoft#203499)
* multiDiffEditor: Card style + update colors --------- Co-authored-by: Henning Dieterichs <hdieterichs@microsoft.com>
1 parent 7b3282b commit 7513cee

File tree

5 files changed

+125
-102
lines changed

5 files changed

+125
-102
lines changed

‎build/lib/stylelint/vscode-known-variables.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -747,7 +747,8 @@
747747
"--vscode-widget-border",
748748
"--vscode-widget-shadow",
749749
"--vscode-window-activeBorder",
750-
"--vscode-window-inactiveBorder"
750+
"--vscode-window-inactiveBorder",
751+
"--vscode-multiDiffEditor-headerBackground"
751752
],
752753
"others": [
753754
"--background-dark",
@@ -824,4 +825,4 @@
824825
"--zoom-factor",
825826
"--test-bar-width"
826827
]
827-
}
828+
}

‎src/vs/editor/browser/widget/multiDiffEditorWidget/colors.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { registerColor } from 'vs/platform/theme/common/colorRegistry';
88

99
export const multiDiffEditorHeaderBackground = registerColor(
1010
'multiDiffEditor.headerBackground',
11-
{ dark: '#808080', light: '#b4b4b4', hcDark: '#808080', hcLight: '#b4b4b4', },
11+
{ dark: '#262626', light: 'tab.inactiveBackground', hcDark: 'tab.inactiveBackground', hcLight: 'tab.inactiveBackground', },
1212
localize('multiDiffEditor.headerBackground', 'The background color of the diff editor\'s header')
1313
);
1414

1515
export const multiDiffEditorBackground = registerColor(
1616
'multiDiffEditor.background',
17-
{ dark: '#000000', light: '#e5e5e5', hcDark: '#000000', hcLight: '#e5e5e5', },
17+
{ dark: 'editorBackground', light: 'editorBackground', hcDark: 'editorBackground', hcLight: 'editorBackground', },
1818
localize('multiDiffEditor.background', 'The background color of the multi file diff editor')
1919
);
2020

‎src/vs/editor/browser/widget/multiDiffEditorWidget/diffEditorItemTemplate.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,15 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject<
6060

6161
private readonly _elements = h('div.multiDiffEntry', [
6262
h('div.header@header', [
63-
h('div.collapse-button@collapseButton'),
64-
h('div.file-path', [
65-
h('div.title.modified.show-file-icons@primaryPath', [] as any),
66-
h('div.status.deleted@status', ['R']),
67-
h('div.title.original.show-file-icons@secondaryPath', [] as any),
63+
h('div.header-content', [
64+
h('div.collapse-button@collapseButton'),
65+
h('div.file-path', [
66+
h('div.title.modified.show-file-icons@primaryPath', [] as any),
67+
h('div.status.deleted@status', ['R']),
68+
h('div.title.original.show-file-icons@secondaryPath', [] as any),
69+
]),
70+
h('div.actions@actions'),
6871
]),
69-
h('div.actions@actions'),
7072
]),
7173

7274
h('div.editorParent', [
@@ -138,7 +140,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject<
138140
}));
139141

140142
this._container.appendChild(this._elements.root);
141-
this._outerEditorHeight = 38;
143+
this._outerEditorHeight = this._headerHeight;
142144

143145
this._register(this._instantiationService.createInstance(MenuWorkbenchToolBar, this._elements.actions, MenuId.MultiDiffEditorFileToolbar, {
144146
actionRunner: this._register(new ActionRunnerWithContext(() => (this._viewModel.get()?.modifiedUri))),
@@ -218,7 +220,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject<
218220
});
219221
}
220222

221-
private readonly _headerHeight = /*this._elements.header.clientHeight*/ 38;
223+
private readonly _headerHeight = /*this._elements.header.clientHeight*/ 48;
222224

223225
public render(verticalRange: OffsetRange, width: number, editorScroll: number, viewPort: OffsetRange): void {
224226
this._elements.root.style.visibility = 'visible';
@@ -233,7 +235,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject<
233235

234236
globalTransaction(tx => {
235237
this.editor.layout({
236-
width: width,
238+
width: width - 2 * 8 - 2 * 1,
237239
height: verticalRange.length - this._outerEditorHeight,
238240
});
239241
});

‎src/vs/editor/browser/widget/multiDiffEditorWidget/multiDiffEditorWidgetImpl.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export class MultiDiffEditorWidgetImpl extends Disposable {
8585
}
8686
);
8787

88-
private readonly _spaceBetweenPx = 10;
88+
private readonly _spaceBetweenPx = 0;
8989

9090
private readonly _totalHeight = this._viewItems.map(this, (items, reader) => items.reduce((r, i) => r + i.contentHeight.read(reader) + this._spaceBetweenPx, 0));
9191
public readonly activeDiffItem = derived(this, reader => this._viewItems.read(reader).find(i => i.template.read(reader)?.isFocused.read(reader)));

‎src/vs/editor/browser/widget/multiDiffEditorWidget/style.css‎

Lines changed: 108 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,93 +6,113 @@
66
.monaco-component.multiDiffEditor {
77
background: var(--vscode-multiDiffEditor-background);
88
overflow-y: hidden;
9-
}
10-
11-
.monaco-component .multiDiffEntry {
12-
display: flex;
13-
flex-direction: column;
14-
flex: 1;
15-
overflow: hidden;
16-
17-
border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
18-
}
19-
20-
.monaco-component .multiDiffEntry .collapse-button {
21-
margin: 0 5px;
22-
cursor: pointer;
23-
}
24-
25-
.monaco-component .multiDiffEntry .collapse-button a {
26-
display: block;
27-
}
28-
29-
.monaco-component .multiDiffEntry .header {
30-
display: flex;
31-
align-items: center;
32-
padding: 8px 5px;
33-
color: var(--vscode-foreground);
34-
background: var(--vscode-editor-background);
35-
36-
z-index: 1000;
37-
38-
border-top: 1px solid var(--vscode-multiDiffEditor-border);
39-
40-
border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
41-
}
42-
43-
.monaco-component .multiDiffEntry .header.shadow {
44-
box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
45-
}
46-
47-
.monaco-component .multiDiffEntry .header .file-path {
48-
display: flex;
49-
flex: 1;
50-
min-width: 0;
51-
}
52-
53-
.monaco-component .multiDiffEntry .header .file-path .title {
54-
font-size: 14px;
55-
line-height: 22px;
56-
}
57-
58-
.monaco-component .multiDiffEntry .header .file-path .status {
59-
60-
font-weight: 600;
61-
opacity: 0.75;
62-
margin: 0px 10px;
63-
line-height: 22px;
64-
}
65-
/*
66-
TODO@hediet: move colors from git extension to core!
67-
68-
.monaco-component .multiDiffEntry .header .file-path .status.renamed {
69-
color: va r(--vscode-gitDecoration-renamedResourceForeground);
70-
}
71-
72-
.monaco-component .multiDiffEntry .header .file-path .status.deleted {
73-
color: va r(--vscode-gitDecoration-deletedResourceForeground);
74-
}
75-
76-
.monaco-component .multiDiffEntry .header .file-path .status.added {
77-
color: va r(--vscode-gitDecoration-addedResourceForeground);
78-
}
79-
*/
80-
.monaco-component .multiDiffEntry .header .file-path .title.original {
81-
flex: 1;
82-
min-width: 0;
83-
text-overflow: ellipsis;
84-
}
85-
86-
.monaco-component .multiDiffEntry .header .actions {
87-
padding: 0 8px;
88-
}
89-
90-
.monaco-component .multiDiffEntry .editorParent {
91-
flex: 1;
92-
display: flex;
93-
flex-direction: column;
94-
}
959

96-
.monaco-component .multiDiffEntry .editorContainer {
97-
flex: 1;
10+
.multiDiffEntry {
11+
display: flex;
12+
flex-direction: column;
13+
flex: 1;
14+
overflow: hidden;
15+
16+
17+
.collapse-button {
18+
margin: 0 5px;
19+
cursor: pointer;
20+
21+
a {
22+
display: block;
23+
}
24+
}
25+
26+
.header {
27+
z-index: 1000;
28+
background: var(--vscode-editor-background);
29+
30+
.header-content {
31+
margin: 8px 8px 0px 8px;
32+
padding: 8px 5px;
33+
34+
border-top: 1px solid var(--vscode-multiDiffEditor-border);
35+
border-right: 1px solid var(--vscode-multiDiffEditor-border);
36+
border-left: 1px solid var(--vscode-multiDiffEditor-border);
37+
border-top-left-radius: 2px;
38+
border-top-right-radius: 2px;
39+
40+
display: flex;
41+
align-items: center;
42+
43+
color: var(--vscode-foreground);
44+
background: var(--vscode-multiDiffEditor-headerBackground);
45+
46+
border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
47+
48+
&.shadow {
49+
box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
50+
}
51+
52+
.file-path {
53+
display: flex;
54+
flex: 1;
55+
min-width: 0;
56+
57+
.title {
58+
font-size: 14px;
59+
line-height: 22px;
60+
61+
&.original {
62+
flex: 1;
63+
min-width: 0;
64+
text-overflow: ellipsis;
65+
}
66+
}
67+
68+
.status {
69+
font-weight: 600;
70+
opacity: 0.75;
71+
margin: 0px 10px;
72+
line-height: 22px;
73+
74+
/*
75+
TODO@hediet: move colors from git extension to core!
76+
&.renamed {
77+
color: v ar(--vscode-gitDecoration-renamedResourceForeground);
78+
}
79+
80+
&.deleted {
81+
color: v ar(--vscode-gitDecoration-deletedResourceForeground);
82+
}
83+
84+
&.added {
85+
color: v ar(--vscode-gitDecoration-addedResourceForeground);
86+
}
87+
*/
88+
}
89+
}
90+
91+
.actions {
92+
padding: 0 8px;
93+
}
94+
}
95+
96+
97+
}
98+
99+
.editorParent {
100+
flex: 1;
101+
display: flex;
102+
flex-direction: column;
103+
104+
margin-right: 8px;
105+
margin-left: 8px;
106+
107+
border-right: 1px solid var(--vscode-multiDiffEditor-border);
108+
border-left: 1px solid var(--vscode-multiDiffEditor-border);
109+
border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
110+
border-radius: 2px;
111+
overflow: hidden;
112+
}
113+
114+
.editorContainer {
115+
flex: 1;
116+
}
117+
}
98118
}

0 commit comments

Comments
 (0)