remove bottom corners of filter type widget

fixes #66897
This commit is contained in:
Joao Moreno 2019-01-23 09:34:51 +01:00
parent 9ad7e6a45c
commit 3117f30f3d
2 changed files with 4 additions and 31 deletions

View file

@ -80,6 +80,7 @@
line-height: 18px; line-height: 18px;
height: 20px; height: 20px;
z-index: 1; z-index: 1;
top: 4px;
} }
.monaco-list-type-filter.dragging { .monaco-list-type-filter.dragging {
@ -87,22 +88,10 @@
} }
.monaco-list-type-filter.ne { .monaco-list-type-filter.ne {
top: 4px;
right: 4px; right: 4px;
} }
.monaco-list-type-filter.nw { .monaco-list-type-filter.nw {
top: 4px;
left: 4px;
}
.monaco-list-type-filter.se {
bottom: 4px;
right: 4px;
}
.monaco-list-type-filter.sw {
bottom: 4px;
left: 4px; left: 4px;
} }

View file

@ -467,13 +467,10 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
private onDragStart(): void { private onDragStart(): void {
const container = this.view.getHTMLElement(); const container = this.view.getHTMLElement();
const { top, left } = getDomNodePagePosition(container); const { left } = getDomNodePagePosition(container);
const containerWidth = container.clientWidth; const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const midContainerWidth = containerWidth / 2; const midContainerWidth = containerWidth / 2;
const midContainerHeight = containerHeight / 2;
const width = this.domNode.clientWidth; const width = this.domNode.clientWidth;
const height = this.domNode.clientHeight;
const disposables: IDisposable[] = []; const disposables: IDisposable[] = [];
let positionClassName = this.positionClassName; let positionClassName = this.positionClassName;
@ -487,29 +484,16 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
this.domNode.style.top = `4px`; this.domNode.style.top = `4px`;
this.domNode.style.left = `${containerWidth - width - 6}px`; this.domNode.style.left = `${containerWidth - width - 6}px`;
break; break;
case 'sw':
this.domNode.style.top = `${containerHeight - height - 6}px`;
this.domNode.style.left = `4px`;
break;
case 'se':
this.domNode.style.top = `${containerHeight - height - 6}px`;
this.domNode.style.left = `${containerWidth - width - 6}px`;
break;
} }
}; };
const onDragOver = (event: DragEvent) => { const onDragOver = (event: DragEvent) => {
const x = event.screenX - left; const x = event.screenX - left;
const y = event.screenY - top;
if (x < midContainerWidth && y < midContainerHeight) { if (x < midContainerWidth) {
positionClassName = 'nw'; positionClassName = 'nw';
} else if (x >= midContainerWidth && y < midContainerHeight) {
positionClassName = 'ne';
} else if (x < midContainerWidth && y >= midContainerHeight) {
positionClassName = 'sw';
} else { } else {
positionClassName = 'se'; positionClassName = 'ne';
} }
updatePosition(); updatePosition();