Skip to content

Commit bd99f90

Browse files
sbattensbatten
committed
1 parent de5ddec commit bd99f90

File tree

3 files changed

+49
-24
lines changed

3 files changed

+49
-24
lines changed

‎src/vs/base/browser/ui/splitview/paneview.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,6 @@ export abstract class Pane extends Disposable implements IView {
263263
style(styles: IPaneStyles): void {
264264
this.styles = styles;
265265

266-
this.element.style.borderLeft = this.styles.leftBorder && this.orientation === Orientation.HORIZONTAL ? `1px solid ${this.styles.leftBorder}` : '';
267-
268266
if (!this.header) {
269267
return;
270268
}
@@ -284,6 +282,7 @@ export abstract class Pane extends Disposable implements IView {
284282
this.header.style.backgroundColor = this.styles.headerBackground ? this.styles.headerBackground.toString() : '';
285283
this.header.style.borderTop = this.styles.headerBorder && this.orientation === Orientation.VERTICAL ? `1px solid ${this.styles.headerBorder}` : '';
286284
this._dropBackground = this.styles.dropBackground;
285+
this.element.style.borderLeft = this.styles.leftBorder && this.orientation === Orientation.HORIZONTAL ? `1px solid ${this.styles.leftBorder}` : '';
287286
}
288287

289288
protected abstract renderHeader(container: HTMLElement): void;

‎src/vs/workbench/browser/parts/views/viewPaneContainer.ts

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import * as nls from 'vs/nls';
88
import { Event, Emitter } from 'vs/base/common/event';
99
import { ColorIdentifier, activeContrastBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
1010
import { attachStyler, IColorMapping, attachButtonStyler, attachLinkStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler';
11-
import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND, SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_SECTION_HEADER_BORDER, PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_BORDER } from 'vs/workbench/common/theme';
11+
import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND, SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_SECTION_HEADER_BORDER, PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_BORDER, PANEL_SECTION_HEADER_FOREGROUND, PANEL_SECTION_HEADER_BACKGROUND, PANEL_SECTION_HEADER_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_SECTION_BORDER } from 'vs/workbench/common/theme';
1212
import { append, $, trackFocus, toggleClass, EventType, isAncestor, Dimension, addDisposableListener, removeClass, addClass, createCSSRule, asCSSUrl, addClasses } from 'vs/base/browser/dom';
1313
import { IDisposable, combinedDisposable, dispose, toDisposable, Disposable, DisposableStore } from 'vs/base/common/lifecycle';
1414
import { firstIndex } from 'vs/base/common/arrays';
@@ -621,7 +621,8 @@ class ViewPaneDropOverlay extends Themable {
621621
constructor(
622622
private paneElement: HTMLElement,
623623
private orientation: Orientation | undefined,
624-
protected themeService: IThemeService
624+
protected location: ViewContainerLocation,
625+
protected themeService: IThemeService,
625626
) {
626627
super(themeService);
627628
this.cleanupOverlayScheduler = this._register(new RunOnceScheduler(() => this.dispose(), 300));
@@ -662,7 +663,7 @@ class ViewPaneDropOverlay extends Themable {
662663
protected updateStyles(): void {
663664

664665
// Overlay drop background
665-
this.overlay.style.backgroundColor = this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND) || '';
666+
this.overlay.style.backgroundColor = this.getColor(this.location === ViewContainerLocation.Panel ? PANEL_DRAG_AND_DROP_BACKGROUND : SIDE_BAR_DRAG_AND_DROP_BACKGROUND) || '';
666667

667668
// Overlay contrast border (if any)
668669
const activeContrastBorderColor = this.getColor(activeContrastBorder);
@@ -905,15 +906,15 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
905906
return;
906907
}
907908

908-
overlay = new ViewPaneDropOverlay(parent, undefined, this.themeService);
909+
overlay = new ViewPaneDropOverlay(parent, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
909910
}
910911

911912
if (dropData.type === 'composite' && dropData.id !== this.viewContainer.id) {
912913
const container = this.viewDescriptorService.getViewContainerById(dropData.id)!;
913914
const viewsToMove = this.viewDescriptorService.getViewContainerModel(container).allViewDescriptors;
914915

915916
if (!viewsToMove.some(v => !v.canMoveView)) {
916-
overlay = new ViewPaneDropOverlay(parent, undefined, this.themeService);
917+
overlay = new ViewPaneDropOverlay(parent, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
917918
}
918919
}
919920

@@ -1310,13 +1311,13 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
13101311
}
13111312
});
13121313

1313-
// TODO@sbatten Styling is viewlet specific, must fix
1314+
const isPanel = this.viewDescriptorService.getViewLocationById(this.viewContainer.id) === ViewContainerLocation.Panel;
13141315
const paneStyler = attachStyler<IPaneColors>(this.themeService, {
1315-
headerForeground: SIDE_BAR_SECTION_HEADER_FOREGROUND,
1316-
headerBackground: SIDE_BAR_SECTION_HEADER_BACKGROUND,
1317-
headerBorder: SIDE_BAR_SECTION_HEADER_BORDER,
1318-
leftBorder: PANEL_BORDER,
1319-
dropBackground: SIDE_BAR_DRAG_AND_DROP_BACKGROUND
1316+
headerForeground: isPanel ? PANEL_SECTION_HEADER_FOREGROUND : SIDE_BAR_SECTION_HEADER_FOREGROUND,
1317+
headerBackground: isPanel ? PANEL_SECTION_HEADER_BACKGROUND : SIDE_BAR_SECTION_HEADER_BACKGROUND,
1318+
headerBorder: isPanel ? PANEL_SECTION_HEADER_BORDER : SIDE_BAR_SECTION_HEADER_BORDER,
1319+
dropBackground: isPanel ? PANEL_DRAG_AND_DROP_BACKGROUND : SIDE_BAR_DRAG_AND_DROP_BACKGROUND,
1320+
leftBorder: isPanel ? PANEL_SECTION_BORDER : undefined
13201321
}, pane);
13211322
const disposable = combinedDisposable(pane, onDidFocus, onDidChangeTitleArea, paneStyler, onDidChange, onDidChangeVisibility);
13221323
const paneItem: IViewPaneItem = { pane, disposable };
@@ -1341,15 +1342,15 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
13411342
return;
13421343
}
13431344

1344-
overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.themeService);
1345+
overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
13451346
}
13461347

13471348
if (dropData.type === 'composite' && dropData.id !== this.viewContainer.id && !this.viewContainer.rejectAddedViews) {
13481349
const container = this.viewDescriptorService.getViewContainerById(dropData.id)!;
13491350
const viewsToMove = this.viewDescriptorService.getViewContainerModel(container).allViewDescriptors;
13501351

13511352
if (!viewsToMove.some(v => !v.canMoveView)) {
1352-
overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.themeService);
1353+
overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
13531354
}
13541355
}
13551356
}

‎src/vs/workbench/common/theme.ts

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -283,18 +283,43 @@ export const PANEL_ACTIVE_TITLE_BORDER = registerColor('panelTitle.activeBorder'
283283
hc: contrastBorder
284284
}, nls.localize('panelActiveTitleBorder', "Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal."));
285285

286-
export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', {
287-
dark: Color.white.transparent(0.12),
288-
light: Color.fromHex('#2677CB').transparent(0.18),
289-
hc: Color.white.transparent(0.12)
290-
}, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal."));
291-
292286
export const PANEL_INPUT_BORDER = registerColor('panelInput.border', {
293287
dark: null,
294288
light: Color.fromHex('#ddd'),
295289
hc: null
296290
}, nls.localize('panelInputBorder', "Input box border for inputs in the panel."));
297291

292+
export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', {
293+
dark: EDITOR_DRAG_AND_DROP_BACKGROUND,
294+
light: EDITOR_DRAG_AND_DROP_BACKGROUND,
295+
hc: EDITOR_DRAG_AND_DROP_BACKGROUND,
296+
}, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel sections. The color should have transparency so that the panel sections can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal."));
297+
298+
export const PANEL_SECTION_HEADER_BACKGROUND = registerColor('panelSectionHeader.background', {
299+
dark: Color.fromHex('#808080').transparent(0.2),
300+
light: Color.fromHex('#808080').transparent(0.2),
301+
hc: null
302+
}, nls.localize('panelSectionHeaderBackground', "Panel section header background color. Panels are shown below the editor area and contain views like output and integrated terminal."));
303+
304+
export const PANEL_SECTION_HEADER_FOREGROUND = registerColor('panelSectionHeader.foreground', {
305+
dark: null,
306+
light: null,
307+
hc: null
308+
}, nls.localize('panelSectionHeaderForeground', "Panel section header foreground color. Panels are shown below the editor area and contain views like output and integrated terminal."));
309+
310+
export const PANEL_SECTION_HEADER_BORDER = registerColor('panelSectionHeader.border', {
311+
dark: contrastBorder,
312+
light: contrastBorder,
313+
hc: contrastBorder
314+
}, nls.localize('panelSectionHeaderBorder', "Panel section header border color. Panels are shown below the editor area and contain views like output and integrated terminal."));
315+
316+
export const PANEL_SECTION_BORDER = registerColor('panelSection.border', {
317+
dark: PANEL_BORDER,
318+
light: PANEL_BORDER,
319+
hc: PANEL_BORDER
320+
}, nls.localize('panelSectionBorder', "Panel section border color. Panels are shown below the editor area and contain views like output and integrated terminal."));
321+
322+
298323
// < --- Status --- >
299324

300325
export const STATUS_BAR_FOREGROUND = registerColor('statusBar.foreground', {
@@ -480,9 +505,9 @@ export const SIDE_BAR_TITLE_FOREGROUND = registerColor('sideBarTitle.foreground'
480505
}, nls.localize('sideBarTitleForeground', "Side bar title foreground color. The side bar is the container for views like explorer and search."));
481506

482507
export const SIDE_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('sideBar.dropBackground', {
483-
dark: Color.white.transparent(0.12),
484-
light: Color.black.transparent(0.1),
485-
hc: Color.white.transparent(0.3),
508+
dark: EDITOR_DRAG_AND_DROP_BACKGROUND,
509+
light: EDITOR_DRAG_AND_DROP_BACKGROUND,
510+
hc: EDITOR_DRAG_AND_DROP_BACKGROUND,
486511
}, nls.localize('sideBarDragAndDropBackground', "Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through. The side bar is the container for views like explorer and search."));
487512

488513
export const SIDE_BAR_SECTION_HEADER_BACKGROUND = registerColor('sideBarSectionHeader.background', {

0 commit comments

Comments
 (0)