dnd drop feedback on editor area

This commit is contained in:
Benjamin Pasero 2016-06-15 18:04:57 +02:00
parent 93b0a04aa5
commit dc72db46c6
3 changed files with 34 additions and 4 deletions

View file

@ -11,6 +11,19 @@
background-color: #252526;
}
.vs .monaco-workbench .editor > .content.dropfeedback {
background-color: #DDECFF;
}
.vs-dark .monaco-workbench .editor > .content.dropfeedback {
background-color: #383B3D;
}
.hc-black .monaco-workbench .editor > .content.dropfeedback {
background: none !important;
border: 2px dashed #f38518;
}
.vs .monaco-workbench .editor > .content.dragged {
border-left: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;

View file

@ -760,15 +760,31 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
private enableDropTarget(node: HTMLElement): void {
// Let a dropped file open inside Code (only if dropped over editor area)
node.addEventListener(DOM.EventType.DROP, (e: DragEvent) => {
this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DROP, (e: DragEvent) => {
DOM.EventHelper.stop(e);
DOM.removeClass(node, 'dropfeedback');
const droppedResources = extractResources(e).filter(r => r.scheme === 'file' || r.scheme === 'untitled');
if (droppedResources.length) {
window.focus(); // make sure this window has focus so that the open call reaches the right window!
this.openFromDrop(droppedResources, <HTMLElement>e.toElement).done(null, errors.onUnexpectedError);
}
});
}));
// Drag over
this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_OVER, (e: DragEvent) => {
DOM.addClass(node, 'dropfeedback');
}));
// Drag leave
this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
DOM.removeClass(node, 'dropfeedback');
}));
// Drag end
this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_END, (e: DragEvent) => {
DOM.removeClass(node, 'dropfeedback');
}));
}
private openFromDrop(resources: URI[], target: HTMLElement): TPromise<any> {

View file

@ -676,10 +676,11 @@ export class Workbench implements IPartService {
// We update the editorpart class to indicate if an editor is opened or not
// through a delay to accomodate for fast editor switching
const editorContainer = this.editorPart.getContainer();
if (visibleEditors === 0) {
this.editorBackgroundDelayer.trigger(() => this.editorPart.getContainer().addClass('empty'));
this.editorBackgroundDelayer.trigger(() => editorContainer.addClass('empty'));
} else {
this.editorBackgroundDelayer.trigger(() => this.editorPart.getContainer().removeClass('empty'));
this.editorBackgroundDelayer.trigger(() => editorContainer.removeClass('empty'));
}
}