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

Connection error box style fix (#14469)

Browse Source 
* Modified modal styles, limiting height of basic modal to 480px.

* wip - added new attachCalloutDialogStyler. Moved callout-specific styler code out of modal.ts

* Moved attach styler code to workbench/common. Added custom styles to imageCalloutDialog

* Moved styler code into calloutDialog. Added callout-specific theme colors to colorRegistry. Removed color styles from modal and callout stylesheets.

* Added CalloutDialogModal that extends CalloutDialog so that the callout can be instantiated from core. Revised calloutDialog so the position cn be passed in from where it is instantiated.

* Revised refactor of modal and image/link callouts so that callout dialog invoked by core can also use the styler. Removed unused properties from dialog code.

* Added conditional to dialogModal to use correct styler for callouts.

* Cleaned up styles. Modified custom colors.

* Wrapped call to positionCalloutDialog in conditional.

* Style, colors, styler and modal updates to align callout with latest OPAC toolkit styles.

* Moved calloutDialog stylesheet

* Consolidated styler code and added a flexible custom styler to provide values for dialogModal

* Added image callout code.

* Remove image callout dialog until wired fully

* Test fixes

Co-authored-by: chlafreniere <hichise@gmail.com>
This commit is contained in:
Hale Rankin
2021-03-05 17:34:02 -08:00
committed by GitHub
parent 0ef99ab42a
commit 972b649beb
11 changed files with 235 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/sql/workbench/contrib/notebook/browser/calloutDialog/imageCalloutDialog.ts
View File

@@ -6,12 +6,12 @@
import 'vs/css!./media/imageCalloutDialog';
import * as DOM from 'vs/base/browser/dom';
import * as styler from 'vs/platform/theme/common/styler';
import { URI } from 'vs/base/common/uri';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import * as constants from 'sql/workbench/contrib/notebook/browser/calloutDialog/common/constants';
import { CalloutDialog } from 'sql/workbench/browser/modal/calloutDialog';
import { URI } from 'vs/base/common/uri';
import { Modal, IDialogProperties } from 'sql/workbench/browser/modal/modal';
import { IFileDialogService, IOpenDialogOptions } from 'vs/platform/dialogs/common/dialogs';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IDialogProperties } from 'sql/workbench/browser/modal/modal';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IPathService } from 'vs/workbench/services/path/common/pathService';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
@@ -25,7 +25,7 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
import { RadioButton } from 'sql/base/browser/ui/radioButton/radioButton';
import { DialogPosition, DialogWidth } from 'sql/workbench/api/common/sqlExtHostTypes';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
import { attachCalloutDialogStyler } from 'sql/workbench/common/styler';
import { escapeUrl } from 'sql/workbench/contrib/notebook/browser/calloutDialog/common/utils';
export interface IImageCalloutDialogOptions {
@@ -35,7 +35,9 @@ export interface IImageCalloutDialogOptions {
embedImage?: boolean
}
export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions> {
const DEFAULT_DIALOG_WIDTH: DialogWidth = 452;
export class ImageCalloutDialog extends Modal {
private _selectionComplete: Deferred<IImageCalloutDialogOptions> = new Deferred<IImageCalloutDialogOptions>();
private _imageLocationLabel: HTMLElement;
private _imageLocalRadioButton: RadioButton;
@@ -49,9 +51,8 @@ export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions
constructor(
title: string,
width: DialogWidth,
dialogProperties: IDialogProperties,
dialogPosition: DialogPosition,
dialogProperties: IDialogProperties,
@IPathService private readonly _pathService: IPathService,
@IFileDialogService private readonly _fileDialogService: IFileDialogService,
@IContextViewService private readonly _contextViewService: IContextViewService,
@@ -65,19 +66,26 @@ export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions
) {
super(
title,
width,
dialogProperties,
dialogPosition,
themeService,
layoutService,
TelemetryKeys.CalloutDialog,
telemetryService,
contextKeyService,
layoutService,
clipboardService,
themeService,
logService,
textResourcePropertiesService
textResourcePropertiesService,
contextKeyService,
{
dialogStyle: 'callout',
dialogPosition: dialogPosition,
dialogProperties: dialogProperties,
width: DEFAULT_DIALOG_WIDTH
}
);
}
protected layout(height?: number): void {
}
/**
* Opens the dialog and returns a promise for what options the user chooses.
*/
@@ -88,7 +96,8 @@ export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions
public render(): void {
super.render();
attachModalDialogStyler(this, this._themeService);
attachCalloutDialogStyler(this, this._themeService);
this.addFooterButton(constants.insertButtonText, () => this.insert());
this.addFooterButton(constants.cancelButtonText, () => this.cancel(), undefined, true);
this.registerListeners();
@@ -196,7 +205,7 @@ export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions
}
public cancel(): void {
super.cancel();
this.hide('cancel');
this._selectionComplete.resolve({
insertEscapedMarkdown: '',
imagePath: undefined,
@@ -225,5 +234,4 @@ export class ImageCalloutDialog extends CalloutDialog<IImageCalloutDialogOptions
return undefined;
}
}
}

40
src/sql/workbench/contrib/notebook/browser/calloutDialog/linkCalloutDialog.ts
View File

@@ -7,9 +7,9 @@ import 'vs/css!./media/linkCalloutDialog';
import * as DOM from 'vs/base/browser/dom';
import * as styler from 'vs/platform/theme/common/styler';
import * as constants from 'sql/workbench/contrib/notebook/browser/calloutDialog/common/constants';
import { CalloutDialog } from 'sql/workbench/browser/modal/calloutDialog';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { Modal, IDialogProperties, DialogPosition, DialogWidth } from 'sql/workbench/browser/modal/modal';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { DialogPosition, IDialogProperties } 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';
@@ -19,12 +19,10 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { Deferred } from 'sql/base/common/promise';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
import { attachCalloutDialogStyler } from 'sql/workbench/common/styler';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { escapeLabel, escapeUrl } from 'sql/workbench/contrib/notebook/browser/calloutDialog/common/utils';
const DEFAULT_DIALOG_WIDTH = 452;
export interface ILinkCalloutDialogOptions {
insertTitle?: string,
insertEscapedMarkdown?: string,
@@ -32,7 +30,9 @@ export interface ILinkCalloutDialogOptions {
insertUnescapedLinkUrl?: string
}
export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions> {
const DEFAULT_DIALOG_WIDTH: DialogWidth = 452;
export class LinkCalloutDialog extends Modal {
private _selectionComplete: Deferred<ILinkCalloutDialogOptions> = new Deferred<ILinkCalloutDialogOptions>();
private _linkTextLabel: HTMLElement;
private _linkTextInputBox: InputBox;
@@ -42,8 +42,8 @@ export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions>
constructor(
title: string,
dialogProperties: IDialogProperties,
dialogPosition: DialogPosition,
dialogProperties: IDialogProperties,
private readonly _defaultLabel: string = '',
@IContextViewService private readonly _contextViewService: IContextViewService,
@IThemeService themeService: IThemeService,
@@ -56,16 +56,20 @@ export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions>
) {
super(
title,
DEFAULT_DIALOG_WIDTH,
dialogProperties,
dialogPosition,
themeService,
layoutService,
TelemetryKeys.CalloutDialog,
telemetryService,
contextKeyService,
layoutService,
clipboardService,
themeService,
logService,
textResourcePropertiesService
textResourcePropertiesService,
contextKeyService,
{
dialogStyle: 'callout',
dialogPosition: dialogPosition,
dialogProperties: dialogProperties,
width: DEFAULT_DIALOG_WIDTH
}
);
let selection = window.getSelection();
if (selection.rangeCount > 0) {
@@ -73,6 +77,9 @@ export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions>
}
}
protected layout(height?: number): void {
}
/**
* Opens the dialog and returns a promise for what options the user chooses.
*/
@@ -84,7 +91,8 @@ export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions>
public render(): void {
super.render();
attachModalDialogStyler(this, this._themeService);
attachCalloutDialogStyler(this, this._themeService);
this.addFooterButton(constants.insertButtonText, () => this.insert());
this.addFooterButton(constants.cancelButtonText, () => this.cancel(), undefined, true);
this.registerListeners();
@@ -165,7 +173,7 @@ export class LinkCalloutDialog extends CalloutDialog<ILinkCalloutDialogOptions>
}
public cancel(): void {
super.cancel();
this.hide('cancel');
this._selectionComplete.resolve({
insertEscapedMarkdown: '',
insertUnescapedLinkLabel: escapeLabel(this._linkTextInputBox.value)

16
src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
View File

@@ -220,11 +220,12 @@ export class MarkdownToolbarComponent extends AngularDisposable {
DOM.EventHelper.stop(event, true);
let triggerElement = event.target as HTMLElement;
let needsTransform = true;
let calloutResult: ILinkCalloutDialogOptions;
let linkCalloutResult: ILinkCalloutDialogOptions;
if (type === MarkdownButtonType.LINK_PREVIEW) {
calloutResult = await this.createCallout(type, triggerElement);
linkCalloutResult = await this.createCallout(type, triggerElement);
// If no URL is present, no-op
if (!calloutResult.insertUnescapedLinkUrl) {
if (!linkCalloutResult.insertUnescapedLinkUrl) {
return;
}
// If cell edit mode isn't WYSIWYG, use result from callout. No need for further transformation.
@@ -234,15 +235,18 @@ export class MarkdownToolbarComponent extends AngularDisposable {
// Otherwise, re-focus on the output element, and insert the link directly.
this.output?.nativeElement?.focus();
// Callout is responsible for returning escaped strings
document.execCommand('insertHTML', false, `<a href="${calloutResult?.insertUnescapedLinkUrl}">${calloutResult?.insertUnescapedLinkLabel}</a>`);
document.execCommand('insertHTML', false, `<a href="${linkCalloutResult?.insertUnescapedLinkUrl}">${linkCalloutResult?.insertUnescapedLinkLabel}</a>`);
return;
}
}
const transformer = new MarkdownTextTransformer(this._notebookService, this.cellModel);
if (needsTransform) {
await transformer.transformText(type);
} else if (!needsTransform) {
await insertFormattedMarkdown(calloutResult?.insertEscapedMarkdown, this.getCellEditorControl());
if (type === MarkdownButtonType.LINK_PREVIEW) {
await insertFormattedMarkdown(linkCalloutResult?.insertEscapedMarkdown, this.getCellEditorControl());
}
}
}
@@ -283,7 +287,7 @@ export class MarkdownToolbarComponent extends AngularDisposable {
if (type === MarkdownButtonType.LINK_PREVIEW) {
const defaultLabel = this.getCurrentSelectionText();
this._linkCallout = this._instantiationService.createInstance(LinkCalloutDialog, this.insertLinkHeading, dialogProperties, dialogPosition, defaultLabel);
this._linkCallout = this._instantiationService.createInstance(LinkCalloutDialog, this.insertLinkHeading, dialogPosition, dialogProperties, defaultLabel);
this._linkCallout.render();
calloutOptions = await this._linkCallout.open();
}