ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-04 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Notebooks: Fix callout dialog being cut off at the bottom of the document (#14579)

Browse Source 
* add above position for callout dialog

* use if else
This commit is contained in:
Lucy Zhang
2021-03-05 15:23:44 -08:00
committed by GitHub
parent 733c3628a1
commit f125b9b2c7
7 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/sql/workbench/browser/modal/calloutDialog.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/calloutDialog';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IDialogProperties, Modal, DialogWidth } from 'sql/workbench/browser/modal/modal';
import { IDialogProperties, Modal, DialogWidth, DialogPosition } from 'sql/workbench/browser/modal/modal';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -20,6 +20,7 @@ export abstract class CalloutDialog<T> extends Modal {
title: string,
width: DialogWidth,
dialogProperties: IDialogProperties,
dialogPosition: DialogPosition,
@IThemeService themeService: IThemeService,
@ILayoutService layoutService: ILayoutService,
@IAdsTelemetryService telemetryService: IAdsTelemetryService,
@@ -40,7 +41,7 @@ export abstract class CalloutDialog<T> extends Modal {
contextKeyService,
{
dialogStyle: 'callout',
dialogPosition: 'below',
dialogPosition: dialogPosition,
dialogProperties: dialogProperties,
width: width
});

6
src/sql/workbench/browser/modal/media/calloutDialog.css
View File

@@ -48,6 +48,12 @@
top: -0.2em;
transform: rotate(135deg);
}
.callout-arrow.from-above:before {
border-width: 0.5em;
left: 2em;
bottom: -0.2em;
transform: rotate(-45deg);
}
.callout-arrow.from-left:before {
background-color: var(--bodybackground);
height: 26px;

16
src/sql/workbench/browser/modal/modal.ts
View File

@@ -60,7 +60,7 @@ export interface IModalDialogStyles {
export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;
export type DialogStyle = 'normal' | 'flyout' | 'callout';
export type DialogPosition = 'left' | 'below';
export type DialogPosition = 'left' | 'below' | 'above';
export interface IDialogProperties {
xPos: number,
@@ -438,7 +438,15 @@ export abstract class Modal extends Disposable implements IThemable {
dialogWidth = this._modalOptions.width;
}
if (this._modalOptions.dialogPosition === 'below') {
if (this._modalOptions.dialogPosition === 'above') {
if (this._modalOptions.dialogProperties) {
this._modalDialog.style.left = `${this._modalOptions.dialogProperties.xPos - this._modalOptions.dialogProperties.width}px`;
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos - 235}px`;
} else {
this._modalDialog.style.left = `${this._modalOptions.positionX}px`;
this._modalDialog.style.top = `${this._modalOptions.positionY - 235}px`;
}
} else if (this._modalOptions.dialogPosition === 'below') {
if (this._modalOptions.dialogProperties) {
this._modalDialog.style.left = `${this._modalOptions.dialogProperties.xPos - this._modalOptions.dialogProperties.width}px`;
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos + (this._modalOptions.dialogProperties.height)}px`;
@@ -446,9 +454,7 @@ export abstract class Modal extends Disposable implements IThemable {
this._modalDialog.style.left = `${this._modalOptions.positionX}px`;
this._modalDialog.style.top = `${this._modalOptions.positionY}px`;
}
}
if (this._modalOptions.dialogPosition === 'left') {
} else if (this._modalOptions.dialogPosition === 'left') {
if (this._modalOptions.dialogProperties) {
this._modalDialog.style.left = `${this._modalOptions.positionX - (dialogWidth + this._modalOptions.dialogProperties.width)}px`;
this._modalDialog.style.top = `${this._modalOptions.positionY - this._modalOptions.dialogProperties.height * 2}px`;