Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes dragging activity icon above hamburger menu drops it to the end #98050

Merged
merged 3 commits into from Jun 11, 2020
Merged

Fixes dragging activity icon above hamburger menu drops it to the end #98050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
63597ef
Fixes #97012
jeanp413 May 18, 2020
23870bd
merge master
sbatten Jun 11, 2020
d869e69
minor renames
sbatten Jun 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/vs/workbench/browser/parts/activitybar/media/activityaction.css
View file
Open in desktop
Expand Up @@ -51,7 +51,8 @@

.monaco-workbench .activitybar > .content > .composite-bar > .monaco-action-bar .action-item.top::before,
.monaco-workbench .activitybar > .content > .composite-bar > .monaco-action-bar .action-item.bottom::after,
.monaco-workbench .activitybar > .content.dragged-over > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
.monaco-workbench .activitybar > .content.dragged-over-head > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .activitybar > .content.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
background-color: var(--insert-border-color);
}

Expand Down
44 changes: 37 additions & 7 deletions src/vs/workbench/browser/parts/compositeBar.ts
View file
Open in desktop
Expand Up @@ -231,38 +231,68 @@ export class CompositeBar extends Widget implements ICompositeBar {
// Contextmenu for composites
this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, e => this.showContextMenu(e)));

let insertDropBefore: Before2D | undefined = undefined;
// Register a drop target on the whole bar to prevent forbidden feedback
this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(parent, {
onDragOver: (e: IDraggedCompositeData) => {
// don't add feedback if this is over the composite bar actions or there are no actions
const visibleItems = this.getVisibleComposites();
if (!visibleItems.length || (e.eventData.target && isAncestor(e.eventData.target as HTMLElement, actionBarDiv))) {
toggleClass(parent, 'dragged-over', false);
insertDropBefore = this.updateFromDragging(parent, false, false);
return;
}

const validDropTarget = this.options.dndHandler.onDragOver(e.dragAndDropData, visibleItems[visibleItems.length - 1].id, e.eventData);
toggleClass(parent, 'dragged-over', validDropTarget);
const insertAtFront = this.insertAtFront(actionBarDiv, e.eventData);
const target = insertAtFront ? visibleItems[0] : visibleItems[visibleItems.length - 1];
const validDropTarget = this.options.dndHandler.onDragOver(e.dragAndDropData, target.id, e.eventData);
insertDropBefore = this.updateFromDragging(parent, validDropTarget, insertAtFront);
},

onDragLeave: (e: IDraggedCompositeData) => {
toggleClass(parent, 'dragged-over', false);
insertDropBefore = this.updateFromDragging(parent, false, false);
},
onDragEnd: (e: IDraggedCompositeData) => {
toggleClass(parent, 'dragged-over', false);
insertDropBefore = this.updateFromDragging(parent, false, false);
},
onDrop: (e: IDraggedCompositeData) => {
const visibleItems = this.getVisibleComposites();
if (visibleItems.length) {
this.options.dndHandler.drop(e.dragAndDropData, visibleItems[visibleItems.length - 1].id, e.eventData, { horizontallyBefore: false, verticallyBefore: false });
const target = this.insertAtFront(actionBarDiv, e.eventData) ? visibleItems[0] : visibleItems[visibleItems.length - 1];
this.options.dndHandler.drop(e.dragAndDropData, target.id, e.eventData, insertDropBefore);
}
toggleClass(parent, 'dragged-over', false);
insertDropBefore = this.updateFromDragging(parent, false, false);
}
}));

return actionBarDiv;
}

private insertAtFront(element: HTMLElement, event: DragEvent): boolean {
const rect = element.getBoundingClientRect();
const posX = event.clientX;
const posY = event.clientY;

switch (this.options.orientation) {
case ActionsOrientation.HORIZONTAL:
case ActionsOrientation.HORIZONTAL_REVERSE:
return posX < rect.left;
case ActionsOrientation.VERTICAL:
case ActionsOrientation.VERTICAL_REVERSE:
return posY < rect.top;
}
}

private updateFromDragging(element: HTMLElement, showFeedback: boolean, front: boolean): Before2D | undefined {
toggleClass(element, 'dragged-over-head', showFeedback && front);
toggleClass(element, 'dragged-over-tail', showFeedback && !front);

if (!showFeedback) {
return undefined;
}

return { verticallyBefore: front, horizontallyBefore: front };
}

focus(): void {
if (this.compositeSwitcherBar) {
this.compositeSwitcherBar.focus();
Expand Down
3 changes: 2 additions & 1 deletion src/vs/workbench/browser/parts/panel/media/panelpart.css
View file
Open in desktop
Expand Up @@ -138,7 +138,8 @@

.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item.left::before,
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item.right::after,
.monaco-workbench .part.panel > .composite.title.dragged-over > .panel-switcher-container > .monaco-action-bar .action-item:last-of-type::after {
.monaco-workbench .part.panel > .composite.title.dragged-over-head > .panel-switcher-container > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .part.panel > .composite.title.dragged-over-tail > .panel-switcher-container > .monaco-action-bar .action-item:last-of-type::after {
opacity: 1;
}

Expand Down