From fad711d599fd4913d3ead40113e7aa8c4037a52a Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Thu, 19 Mar 2020 01:27:01 -0400 Subject: [PATCH] invert feedback --- src/vs/workbench/browser/media/part.css | 13 ++++++++ .../parts/activitybar/activitybarPart.ts | 24 +-------------- .../activitybar/media/activitybarpart.css | 13 +++----- .../browser/parts/editor/editorPart.ts | 15 ++++++++++ .../browser/parts/panel/panelPart.ts | 30 ++----------------- .../browser/parts/sidebar/sidebarPart.ts | 28 ++--------------- 6 files changed, 38 insertions(+), 85 deletions(-) diff --git a/src/vs/workbench/browser/media/part.css b/src/vs/workbench/browser/media/part.css index 89dd7fe4c9b..e77d77ec0d0 100644 --- a/src/vs/workbench/browser/media/part.css +++ b/src/vs/workbench/browser/media/part.css @@ -8,6 +8,19 @@ overflow: hidden; } +.monaco-workbench .part > .drop-block-overlay { + visibility: hidden; /* use visibility to ensure transitions */ + transition-property: opacity; + transition-timing-function: linear; + transition-duration: 250ms; + width: 100%; + height: 100%; + position: absolute; + top: 0; + opacity: 0; + pointer-events: none; +} + .monaco-workbench .part > .title { display: none; /* Parts have to opt in to show title area */ } diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index e35fcf6f990..742c593e180 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -17,7 +17,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { IDisposable, toDisposable, DisposableStore, Disposable } from 'vs/base/common/lifecycle'; import { ToggleActivityBarVisibilityAction, ToggleMenuBarAction } from 'vs/workbench/browser/actions/layoutActions'; import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService'; -import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; +import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar'; import { Dimension, addClass, removeNode } from 'vs/base/browser/dom'; @@ -39,7 +39,6 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { getMenuBarVisibility } from 'vs/platform/windows/common/windows'; import { isWeb } from 'vs/base/common/platform'; import { IEnvironmentService } from 'vs/platform/environment/common/environment'; -import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd'; interface ICachedViewlet { id: string; @@ -298,10 +297,6 @@ export class ActivitybarPart extends Part implements IActivityBarService { createContentArea(parent: HTMLElement): HTMLElement { this.element = parent; - const overlay = document.createElement('div'); - addClass(overlay, 'drag-overlay'); - parent.appendChild(overlay); - this.content = document.createElement('div'); addClass(this.content, 'content'); parent.appendChild(this.content); @@ -321,23 +316,6 @@ export class ActivitybarPart extends Part implements IActivityBarService { this.createGlobalActivityActionBar(globalActivities); - CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, { - onDragStart: e => { - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - }, - onDragEnd: e => { - overlay.style.opacity = ''; - }, - onDragEnter: e => { - overlay.style.opacity = ''; - }, - onDragLeave: e => { - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - } - }); - return this.content; } diff --git a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css index 3b355971ce7..677bed9952a 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css @@ -7,15 +7,10 @@ width: 48px; } -.monaco-workbench .part > .drag-overlay { - transition-property: opacity; - transition-duration: .2s; - width: 100%; - height: 100%; - position: absolute; - opacity: 0; - top: 0; - pointer-events: none; +.monaco-workbench .part > .drop-block-overlay.visible { + visibility: visible; + backdrop-filter: brightness(97%) blur(2px); + opacity: 1; } .monaco-workbench .activitybar > .content { diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts index a3b7654dd45..1044b6e4601 100644 --- a/src/vs/workbench/browser/parts/editor/editorPart.ts +++ b/src/vs/workbench/browser/parts/editor/editorPart.ts @@ -32,6 +32,7 @@ import { registerSingleton } from 'vs/platform/instantiation/common/extensions'; import { MementoObject } from 'vs/workbench/common/memento'; import { assertIsDefined } from 'vs/base/common/types'; import { IBoundarySashes } from 'vs/base/browser/ui/grid/gridview'; +import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd'; interface IEditorPartUIState { serializedGrid: ISerializedGrid; @@ -826,6 +827,20 @@ export class EditorPart extends Part implements IEditorGroupsService, IEditorGro // Drop support this._register(this.createEditorDropTarget(this.container, {})); + // No drop in the editor + const overlay = document.createElement('div'); + addClass(overlay, 'drop-block-overlay'); + parent.appendChild(overlay); + + CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, { + onDragStart: e => { + toggleClass(overlay, 'visible', true); + }, + onDragEnd: e => { + toggleClass(overlay, 'visible', false); + } + }); + return this.container; } diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 06c1b202099..1692eb5d471 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -20,13 +20,13 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ClosePanelAction, PanelActivityAction, ToggleMaximizedPanelAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions'; import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; +import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER } from 'vs/workbench/common/theme'; import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry'; import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar'; import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions'; import { IBadge } from 'vs/workbench/services/activity/common/activity'; import { INotificationService } from 'vs/platform/notification/common/notification'; -import { Dimension, trackFocus, addClass } from 'vs/base/browser/dom'; +import { Dimension, trackFocus } from 'vs/base/browser/dom'; import { localize } from 'vs/nls'; import { IDisposable, DisposableStore } from 'vs/base/common/lifecycle'; import { IContextKey, IContextKeyService, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey'; @@ -37,7 +37,6 @@ import { ViewContainer, IViewContainersRegistry, Extensions as ViewContainerExte import { MenuId } from 'vs/platform/actions/common/actions'; import { ViewMenuActions } from 'vs/workbench/browser/parts/views/viewMenuActions'; import { IPaneComposite } from 'vs/workbench/common/panecomposite'; -import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd'; interface ICachedPanel { id: string; @@ -341,31 +340,6 @@ export class PanelPart extends CompositePart implements IPanelService { super.create(parent); - const overlay = document.createElement('div'); - addClass(overlay, 'drag-overlay'); - parent.appendChild(overlay); - - CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, { - onDragStart: e => { - // this.element.style.outline = `1px solid`; - // this.element.style.outlineOffset = '-1px'; - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - }, - onDragEnd: e => { - // this.element.style.outline = ''; - overlay.style.opacity = ''; - }, - onDragEnter: e => { - overlay.style.opacity = ''; - }, - onDragLeave: e => { - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - } - }); - - const focusTracker = this._register(trackFocus(parent)); this._register(focusTracker.onDidFocus(() => this.panelFocusContextKey.set(true))); this._register(focusTracker.onDidBlur(() => this.panelFocusContextKey.set(false))); diff --git a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts index 51c20b30732..e2777c725e1 100644 --- a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts +++ b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts @@ -23,9 +23,9 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { Event, Emitter } from 'vs/base/common/event'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; -import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; +import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; import { INotificationService } from 'vs/platform/notification/common/notification'; -import { EventType, addDisposableListener, trackFocus, addClass } from 'vs/base/browser/dom'; +import { EventType, addDisposableListener, trackFocus } from 'vs/base/browser/dom'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview'; @@ -33,7 +33,7 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten import { registerSingleton } from 'vs/platform/instantiation/common/extensions'; import { LayoutPriority } from 'vs/base/browser/ui/grid/grid'; import { assertIsDefined } from 'vs/base/common/types'; -import { LocalSelectionTransfer, CompositeDragAndDropObserver, DraggedViewIdentifier, DraggedCompositeIdentifier } from 'vs/workbench/browser/dnd'; +import { LocalSelectionTransfer, DraggedViewIdentifier, DraggedCompositeIdentifier } from 'vs/workbench/browser/dnd'; export class SidebarPart extends CompositePart implements IViewletService { @@ -152,28 +152,6 @@ export class SidebarPart extends CompositePart implements IViewletServi super.create(parent); - const overlay = document.createElement('div'); - addClass(overlay, 'drag-overlay'); - parent.appendChild(overlay); - - CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, { - onDragStart: e => { - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - }, - onDragEnd: e => { - // this.element.style.outline = ''; - overlay.style.opacity = ''; - }, - onDragEnter: e => { - overlay.style.opacity = ''; - }, - onDragLeave: e => { - overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || ''; - overlay.style.opacity = '.8'; - } - }); - const focusTracker = this._register(trackFocus(parent)); this._register(focusTracker.onDidFocus(() => this.sideBarFocusContextKey.set(true))); this._register(focusTracker.onDidBlur(() => this.sideBarFocusContextKey.set(false))); -- GitLab