mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-25 17:23:10 -05:00
Connection error box style fix (#14469)
* 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
@@ -8,7 +8,8 @@
|
||||
}
|
||||
.modal.callout-dialog .modal-dialog {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 3px 8px rgba(var(--foreground));
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
max-height: 300px;
|
||||
position: absolute;
|
||||
}
|
||||
@@ -28,60 +29,37 @@
|
||||
}
|
||||
|
||||
.callout-arrow:before {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color:
|
||||
transparent
|
||||
transparent
|
||||
var(--bodybackground)
|
||||
var(--bodybackground);
|
||||
box-shadow: -3px 3px 3px 0 rgba(var(--foreground));
|
||||
border-width: 1px;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
width: 10px;
|
||||
}
|
||||
.callout-arrow.from-below:before {
|
||||
border-width: 0.5em;
|
||||
left: 2em;
|
||||
top: -0.2em;
|
||||
left: 24px;
|
||||
top: -6px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
.callout-arrow.from-above:before {
|
||||
border-width: 0.5em;
|
||||
left: 2em;
|
||||
bottom: -0.2em;
|
||||
bottom: -6px;
|
||||
left: 24px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.callout-arrow.from-left:before {
|
||||
background-color: var(--bodybackground);
|
||||
height: 26px;
|
||||
right: -13px;
|
||||
right: -14px;
|
||||
top: 26px;
|
||||
transform: rotate(-135deg);
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.hc-black .callout-arrow:before {
|
||||
background-color: var(--bodybackground);
|
||||
border-color:
|
||||
transparent
|
||||
transparent
|
||||
var(--border)
|
||||
var(--border);
|
||||
border-width: 0.1em;
|
||||
box-shadow: none;
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
.hc-black .callout-arrow.from-below:before {
|
||||
top: -0.4em;
|
||||
}
|
||||
.hc-black .callout-arrow.from-left:before {
|
||||
height: 2em;
|
||||
right: -1.2em;
|
||||
width: 2em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.modal.callout-dialog .modal-header {
|
||||
|
||||
@@ -21,17 +21,13 @@
|
||||
.modal:not(.flyout-dialog):not(.callout-dialog) .modal-dialog {
|
||||
margin: auto;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
max-height: 480px;
|
||||
}
|
||||
|
||||
.modal .modal-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .modal-footer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .codicon.in-progress {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@@ -129,8 +125,8 @@
|
||||
}
|
||||
|
||||
.modal .modal-footer {
|
||||
border-top: 1px solid #E1E1E1;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .modal-footer .left-footer {
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import 'vs/css!./media/modal';
|
||||
import 'vs/css!./media/calloutDialog';
|
||||
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
|
||||
import { Color } from 'vs/base/common/color';
|
||||
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
|
||||
@@ -13,7 +14,6 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
|
||||
import { generateUuid } from 'vs/base/common/uuid';
|
||||
import { IContextKeyService, RawContextKey, IContextKey } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
|
||||
|
||||
import { Button } from 'sql/base/browser/ui/button/button';
|
||||
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
|
||||
import { localize } from 'vs/nls';
|
||||
@@ -27,9 +27,6 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
|
||||
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
|
||||
import { alert } from 'vs/base/browser/ui/aria/aria';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { editorWidgetForeground, editorBackground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { notebookToolbarLines } from 'sql/platform/theme/common/colorRegistry';
|
||||
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
|
||||
|
||||
export enum MessageLevel {
|
||||
Error = 0,
|
||||
@@ -55,7 +52,9 @@ export interface IModalDialogStyles {
|
||||
footerBackgroundColor?: Color;
|
||||
footerBorderTopWidth?: Color;
|
||||
footerBorderTopStyle?: Color;
|
||||
footerBorderTopColor?: Color;
|
||||
dialogInteriorBorder?: Color;
|
||||
dialogExteriorBorder?: Color;
|
||||
dialogShadowColor?: Color;
|
||||
}
|
||||
|
||||
export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;
|
||||
@@ -72,8 +71,6 @@ export interface IDialogProperties {
|
||||
export interface IModalOptions {
|
||||
dialogStyle?: DialogStyle;
|
||||
dialogPosition?: DialogPosition;
|
||||
positionX?: number;
|
||||
positionY?: number;
|
||||
width?: DialogWidth;
|
||||
isAngular?: boolean;
|
||||
hasBackButton?: boolean;
|
||||
@@ -89,8 +86,6 @@ export interface IModalOptions {
|
||||
const defaultOptions: IModalOptions = {
|
||||
dialogStyle: 'flyout',
|
||||
dialogPosition: undefined,
|
||||
positionX: undefined,
|
||||
positionY: undefined,
|
||||
width: 'narrow',
|
||||
isAngular: false,
|
||||
hasBackButton: false,
|
||||
@@ -108,6 +103,7 @@ export type HideReason = 'close' | 'cancel' | 'ok';
|
||||
|
||||
export abstract class Modal extends Disposable implements IThemable {
|
||||
protected _useDefaultMessageBoxLocation: boolean = true;
|
||||
private _styleElement: HTMLStyleElement;
|
||||
protected _messageElement?: HTMLElement;
|
||||
protected _modalOptions: IModalOptions;
|
||||
protected readonly disposableStore = this._register(new DisposableStore());
|
||||
@@ -132,7 +128,9 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
private _dialogBorder?: Color;
|
||||
private _dialogHeaderAndFooterBackground?: Color;
|
||||
private _dialogBodyBackground?: Color;
|
||||
private _footerBorderTopColor?: Color;
|
||||
private _dialogInteriorBorder?: Color;
|
||||
private _dialogExteriorBorder?: Color;
|
||||
private _dialogShadowColor?: Color;
|
||||
|
||||
private _modalDialog?: HTMLElement;
|
||||
private _modalContent?: HTMLElement;
|
||||
@@ -140,7 +138,7 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
private _modalBodySection?: HTMLElement;
|
||||
private _modalFooterSection?: HTMLElement;
|
||||
private _closeButtonInHeader?: HTMLElement;
|
||||
private _bodyContainer?: HTMLElement;
|
||||
protected _bodyContainer?: HTMLElement;
|
||||
private _modalTitle?: HTMLElement;
|
||||
private _modalTitleIcon?: HTMLElement;
|
||||
private _leftFooter?: HTMLElement;
|
||||
@@ -198,6 +196,8 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
*
|
||||
*/
|
||||
public render() {
|
||||
this._styleElement = DOM.createStyleSheet(this._bodyContainer);
|
||||
|
||||
let top: number;
|
||||
let builderClass = '.modal.fade';
|
||||
builderClass += this._modalOptions.dialogStyle === 'flyout' ? '.flyout-dialog'
|
||||
@@ -424,54 +424,55 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
|
||||
|
||||
/**
|
||||
* Tasks to perform before dialog is shown
|
||||
* Tasks to perform before callout dialog is shown
|
||||
* Includes: positioning of dialog
|
||||
*/
|
||||
protected positionDialog(): void {
|
||||
protected positionCalloutDialog(): void {
|
||||
/**
|
||||
* In the case of 'below', dialog will be positioned beneath the trigger and arrow aligned with trigger.
|
||||
* In the case of 'left', dialog will be positioned left of the trigger and arrow aligned with trigger.
|
||||
*/
|
||||
if (this._modalOptions.dialogStyle === 'callout') {
|
||||
let dialogWidth;
|
||||
if (typeof this._modalOptions.width === 'number') {
|
||||
dialogWidth = this._modalOptions.width;
|
||||
}
|
||||
|
||||
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`;
|
||||
} else {
|
||||
this._modalDialog.style.left = `${this._modalOptions.positionX}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.positionY}px`;
|
||||
}
|
||||
} 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`;
|
||||
} else {
|
||||
this._modalDialog.style.left = `${this._modalOptions.positionX - (dialogWidth)}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.positionY}px`;
|
||||
}
|
||||
}
|
||||
this._modalDialog.style.width = `${dialogWidth}px`;
|
||||
let dialogWidth;
|
||||
if (typeof this._modalOptions.width === 'number') {
|
||||
dialogWidth = this._modalOptions.width;
|
||||
}
|
||||
|
||||
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.dialogProperties.xPos}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos - 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`;
|
||||
} else {
|
||||
this._modalDialog.style.left = `${this._modalOptions.dialogProperties.xPos}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos}px`;
|
||||
}
|
||||
} else if (this._modalOptions.dialogPosition === 'left') {
|
||||
if (this._modalOptions.dialogProperties) {
|
||||
this._modalDialog.style.left = `${this._modalOptions.dialogProperties.xPos - (dialogWidth + this._modalOptions.dialogProperties.width)}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos - this._modalOptions.dialogProperties.height * 2}px`;
|
||||
} else {
|
||||
this._modalDialog.style.left = `${this._modalOptions.dialogProperties.xPos - (dialogWidth)}px`;
|
||||
this._modalDialog.style.top = `${this._modalOptions.dialogProperties.yPos}px`;
|
||||
}
|
||||
}
|
||||
|
||||
this._modalDialog.style.width = `${dialogWidth}px`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the modal and attaches key listeners
|
||||
*/
|
||||
protected show() {
|
||||
this.positionDialog();
|
||||
if (this._modalOptions.dialogStyle === 'callout') {
|
||||
this.positionCalloutDialog();
|
||||
}
|
||||
this._focusedElementBeforeOpen = <HTMLElement>document.activeElement;
|
||||
this._modalShowingContext.get()!.push(this._staticKey);
|
||||
DOM.append(this.layoutService.container, this._bodyContainer!);
|
||||
@@ -689,15 +690,13 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
* Called by the theme registry on theme change to style the component
|
||||
*/
|
||||
public style(styles: IModalDialogStyles): void {
|
||||
this._dialogForeground = styles.dialogForeground ? styles.dialogForeground : this._themeService.getColorTheme().getColor(editorWidgetForeground);
|
||||
this._dialogBorder = styles.dialogBorder ? styles.dialogBorder : this._themeService.getColorTheme().getColor(notebookToolbarLines);
|
||||
if (this._modalOptions.dialogStyle === 'callout') {
|
||||
this._dialogHeaderAndFooterBackground = styles.dialogBodyBackground ? styles.dialogBodyBackground : this._themeService.getColorTheme().getColor(SIDE_BAR_BACKGROUND);
|
||||
} else {
|
||||
this._dialogHeaderAndFooterBackground = styles.dialogHeaderAndFooterBackground ? styles.dialogHeaderAndFooterBackground : this._themeService.getColorTheme().getColor(SIDE_BAR_BACKGROUND);
|
||||
}
|
||||
this._dialogBodyBackground = styles.dialogBodyBackground ? styles.dialogBodyBackground : this._themeService.getColorTheme().getColor(editorBackground);
|
||||
this._footerBorderTopColor = styles.footerBorderTopColor ? styles.footerBorderTopColor : this._themeService.getColorTheme().getColor(notebookToolbarLines);
|
||||
this._dialogForeground = styles.dialogForeground;
|
||||
this._dialogBorder = styles.dialogBorder;
|
||||
this._dialogHeaderAndFooterBackground = styles.dialogHeaderAndFooterBackground;
|
||||
this._dialogBodyBackground = styles.dialogBodyBackground;
|
||||
this._dialogInteriorBorder = styles.dialogInteriorBorder;
|
||||
this._dialogExteriorBorder = styles.dialogExteriorBorder;
|
||||
this._dialogShadowColor = styles.dialogShadowColor;
|
||||
this.applyStyles();
|
||||
}
|
||||
|
||||
@@ -706,10 +705,8 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
const border = this._dialogBorder ? this._dialogBorder.toString() : '';
|
||||
const headerAndFooterBackground = this._dialogHeaderAndFooterBackground ? this._dialogHeaderAndFooterBackground.toString() : '';
|
||||
const bodyBackground = this._dialogBodyBackground ? this._dialogBodyBackground.toString() : '';
|
||||
const calloutStyle: CSSStyleDeclaration = this._modalDialog.style;
|
||||
const footerTopBorderColor = this._footerBorderTopColor ? this._footerBorderTopColor.toString() : '';
|
||||
|
||||
const foregroundRgb: Color = Color.Format.CSS.parseHex(foreground);
|
||||
const footerBorderTopWidth = border ? '1px' : '';
|
||||
const footerBorderTopStyle = border ? 'solid' : '';
|
||||
|
||||
if (this._closeButtonInHeader) {
|
||||
this._closeButtonInHeader.style.color = foreground;
|
||||
@@ -719,17 +716,6 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
this._modalDialog.style.borderWidth = border ? '1px' : '';
|
||||
this._modalDialog.style.borderStyle = border ? 'solid' : '';
|
||||
this._modalDialog.style.borderColor = border;
|
||||
|
||||
calloutStyle.setProperty('--border', `${border}`);
|
||||
calloutStyle.setProperty('--bodybackground', `${bodyBackground}`);
|
||||
if (foregroundRgb) {
|
||||
calloutStyle.setProperty('--foreground', `
|
||||
${foregroundRgb.rgba.r},
|
||||
${foregroundRgb.rgba.g},
|
||||
${foregroundRgb.rgba.b},
|
||||
0.08
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
if (this._modalHeaderSection) {
|
||||
@@ -754,9 +740,50 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
|
||||
if (this._modalFooterSection) {
|
||||
this._modalFooterSection.style.backgroundColor = headerAndFooterBackground;
|
||||
this._modalFooterSection.style.borderTopWidth = border ? '1px' : '';
|
||||
this._modalFooterSection.style.borderTopStyle = border ? 'solid' : '';
|
||||
this._modalFooterSection.style.borderTopColor = footerTopBorderColor;
|
||||
this._modalFooterSection.style.borderTopWidth = footerBorderTopWidth;
|
||||
this._modalFooterSection.style.borderTopStyle = footerBorderTopStyle;
|
||||
if (!(this._modalOptions.dialogStyle === 'callout')) {
|
||||
this._modalFooterSection.style.borderTopColor = border;
|
||||
}
|
||||
}
|
||||
|
||||
if (this._modalOptions.dialogStyle === 'callout') {
|
||||
const content: string[] = [];
|
||||
const exteriorBorder = this._dialogExteriorBorder ? this._dialogExteriorBorder.toString() : '';
|
||||
const exteriorBorderRgb: Color = Color.Format.CSS.parseHex(exteriorBorder);
|
||||
const shadow = this._dialogShadowColor ? this._dialogShadowColor.toString() : '';
|
||||
const shadowRgb: Color = Color.Format.CSS.parseHex(shadow);
|
||||
|
||||
if (exteriorBorderRgb && shadowRgb) {
|
||||
content.push(`
|
||||
.modal.callout-dialog .modal-dialog {
|
||||
border-color: rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b},0.5);
|
||||
box-shadow: 0px 3.2px 7.2px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.132),
|
||||
0px 0.6px 1.8px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.108);
|
||||
}
|
||||
.hc-black .modal.callout-dialog .modal-dialog {
|
||||
border-color: rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
|
||||
}
|
||||
.modal.callout-dialog .modal-footer {
|
||||
border-top-color: ${this._dialogInteriorBorder};
|
||||
}
|
||||
.callout-arrow:before {
|
||||
background-color: ${this._dialogBodyBackground};
|
||||
border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5);
|
||||
}
|
||||
.hc-black .callout-arrow:before {
|
||||
border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
|
||||
}
|
||||
.callout-arrow.from-left:before {
|
||||
background-color: ${this._dialogBodyBackground};
|
||||
box-shadow: -4px 4px 4px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.05);
|
||||
}`);
|
||||
}
|
||||
|
||||
const newStyles = content.join('\n');
|
||||
if (newStyles !== this._styleElement.innerHTML) {
|
||||
this._styleElement.innerHTML = newStyles;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user