ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-15 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change angular panel display behavior (#1344)

Browse Source 
* got it working

* remove unneeded code

* formatting

* added scrollable, dashboard tabs don't scroll correctly though

* fix all bugs I could find

* address comments
This commit is contained in:
Anthony Dresser
2018-05-10 09:27:41 -07:00
committed by GitHub
parent f4cfb4a5ef
commit 23ec6ac567
30 changed files with 282 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/sql/base/browser/ui/scrollable/scrollable.directive.ts
View File

@@ -3,11 +3,11 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Directive, Inject, forwardRef, ElementRef } from '@angular/core';
import { Directive, Inject, forwardRef, ElementRef, Input } from '@angular/core';
import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { getContentHeight, addDisposableListener, EventType } from 'vs/base/browser/dom';
import { getContentHeight, addDisposableListener, EventType, getContentWidth } from 'vs/base/browser/dom';
import { AngularDisposable } from 'sql/base/common/lifecycle';
@Directive({
@@ -17,33 +17,45 @@ export class ScrollableDirective extends AngularDisposable {
private scrollableElement: ScrollableElement;
private parent: HTMLElement;
private scrolled: HTMLElement;
@Input() horizontalScroll: ScrollbarVisibility;
@Input() verticalScroll: ScrollbarVisibility;
@Input() useShadow = false;
@Input() scrollYToX = false;
constructor(
@Inject(forwardRef(() => ElementRef)) private _el: ElementRef
) {
super();
}
ngOnInit() {
this.scrolled = this._el.nativeElement as HTMLElement;
this.parent = this.scrolled.parentElement;
const next = this.scrolled.nextSibling;
this.parent.removeChild(this.scrolled);
this.scrolled.style.position = 'relative';
this.scrollableElement = new ScrollableElement(this.scrolled, {
horizontal: ScrollbarVisibility.Hidden,
vertical: ScrollbarVisibility.Auto,
useShadows: false
horizontal: this.horizontalScroll,
vertical: this.verticalScroll,
useShadows: this.useShadow,
scrollYToX: this.scrollYToX,
horizontalScrollbarSize: 3
});
this.scrollableElement.onScroll(e => {
this.scrolled.style.bottom = e.scrollTop + 'px';
if (this.verticalScroll === ScrollbarVisibility.Auto) {
this.scrolled.style.bottom = e.scrollTop + 'px';
} else if (this.horizontalScroll === ScrollbarVisibility.Auto) {
this.scrolled.scrollLeft = e.scrollLeft;
}
});
this.parent.appendChild(this.scrollableElement.getDomNode());
this.parent.insertBefore(this.scrollableElement.getDomNode(), next);
const initialHeight = getContentHeight(this.scrolled);
this.scrollableElement.setScrollDimensions({
scrollHeight: getContentHeight(this.scrolled),
height: getContentHeight(this.parent)
});
const initalWidth = getContentWidth(this.scrolled);
this.resetScrollDimensions();
this._register(addDisposableListener(window, EventType.RESIZE, () => {
this.resetScrollDimensions();
@@ -52,24 +64,23 @@ export class ScrollableDirective extends AngularDisposable {
// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
setTimeout(() => {
let currentheight = getContentHeight(this.scrolled);
if (initialHeight !== currentheight) {
this.scrollableElement.setScrollDimensions({
scrollHeight: currentheight,
height: getContentHeight(this.parent)
});
let currentWidth = getContentWidth(this.scrolled);
if (initialHeight !== currentheight || initalWidth !== currentWidth) {
this.resetScrollDimensions();
}
}, 200);
}
private resetScrollDimensions() {
this.scrollableElement.setScrollDimensions({
scrollHeight: getContentHeight(this.scrolled),
height: getContentHeight(this.parent)
scrollHeight: this.verticalScroll === ScrollbarVisibility.Auto ? getContentHeight(this.scrolled) : undefined,
height: this.verticalScroll === ScrollbarVisibility.Auto ? getContentHeight(this.parent) : undefined,
scrollWidth: this.horizontalScroll === ScrollbarVisibility.Auto ? this.scrolled.scrollWidth : undefined,
width: this.horizontalScroll === ScrollbarVisibility.Auto ? this.scrolled.offsetWidth : undefined
});
}
public layout() {
this.resetScrollDimensions();
}
}