Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-08-23 06:33:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance drop feedback for empty panel (#235834)

Browse Source 
fix #99052
This commit is contained in:
Benjamin Christopher Simmonds
2024-12-11 16:47:43 +01:00
committed by GitHub
parent 20bed5838f
commit 2d47752d6b
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/browser/parts/media/paneCompositePart.css
+7 -3
View File
@@ -20,17 +20,21 @@
display: none;
}
.monaco-workbench .pane-composite-part.empty > .title.has-composite-bar > .title-label {
border-bottom: none !important;
}
.monaco-workbench .pane-composite-part > .header-or-footer {
padding-left: 4px;
padding-right: 4px;
background-color: var(--vscode-activityBarTop-background);
}
.monaco-workbench .pane-composite-part > .header {
.monaco-workbench .pane-composite-part:not(.empty) > .header {
border-bottom: 1px solid var(--vscode-sideBarActivityBarTop-border);
}
.monaco-workbench .pane-composite-part > .footer {
.monaco-workbench .pane-composite-part:not(.empty) > .footer {
border-top: 1px solid var(--vscode-sideBarActivityBarTop-border);
}
@@ -325,7 +329,7 @@
width: 100%;
}
.monaco-workbench .pane-composite-part .empty-pane-message-area.visible {
.monaco-workbench .pane-composite-part.empty .empty-pane-message-area {
display: flex;
align-items: center;
align-content: center;
src/vs/workbench/browser/parts/paneCompositePart.ts
+19 -5
View File
@@ -275,6 +275,20 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
this.emptyPaneMessageElement.appendChild(messageElement);
parent.appendChild(this.emptyPaneMessageElement);
const setDropBackgroundFeedback = (visible: boolean) => {
const updateActivityBarBackground = !this.getActiveComposite() || !visible;
const backgroundColor = visible ? this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND)?.toString() || '' : '';
if (this.titleContainer && updateActivityBarBackground) {
this.titleContainer.style.backgroundColor = backgroundColor;
}
if (this.headerFooterCompositeBarContainer && updateActivityBarBackground) {
this.headerFooterCompositeBarContainer.style.backgroundColor = backgroundColor;
}
this.emptyPaneMessageElement!.style.backgroundColor = backgroundColor;
};
this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
onDragOver: (e) => {
EventHelper.stop(e.eventData, true);
@@ -287,20 +301,20 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
EventHelper.stop(e.eventData, true);
if (this.paneCompositeBar.value) {
const validDropTarget = this.paneCompositeBar.value.dndHandler.onDragEnter(e.dragAndDropData, undefined, e.eventData);
this.emptyPaneMessageElement!.style.backgroundColor = validDropTarget ? this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND)?.toString() || '' : '';
setDropBackgroundFeedback(validDropTarget);
}
},
onDragLeave: (e) => {
EventHelper.stop(e.eventData, true);
this.emptyPaneMessageElement!.style.backgroundColor = '';
setDropBackgroundFeedback(false);
},
onDragEnd: (e) => {
EventHelper.stop(e.eventData, true);
this.emptyPaneMessageElement!.style.backgroundColor = '';
setDropBackgroundFeedback(false);
},
onDrop: (e) => {
EventHelper.stop(e.eventData, true);
this.emptyPaneMessageElement!.style.backgroundColor = '';
setDropBackgroundFeedback(false);
if (this.paneCompositeBar.value) {
this.paneCompositeBar.value.dndHandler.drop(e.dragAndDropData, undefined, e.eventData);
} else {
@@ -596,7 +610,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
private layoutEmptyMessage(): void {
const visible = !this.getActiveComposite();
this.emptyPaneMessageElement?.classList.toggle('visible', visible);
this.element.classList.toggle('empty', visible);
if (visible) {
this.titleLabel?.updateTitle('', '');
}