mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-18 09:35:39 -05:00
Another code layering (#4037)
* working on formatting * fixed basic lint errors; starting moving things to their appropriate location * formatting * update tslint to match the version of vscode we have * remove unused code * work in progress fixing layering * formatting * moved connection management service to platform * formatting * add missing file * moving more servies * formatting * moving more services * formatting * wip * moving more services * formatting * move css file * add missing svgs * moved the rest of services * formatting * changing around some references * formatting * revert tslint * revert some changes that brake things * formatting * fix tests * fix testzx * fix tests * fix tests * fix compile issue
This commit is contained in:
Anthony Dresser
83
src/sql/workbench/browser/modal/dialogHelper.ts
Normal file
83
src/sql/workbench/browser/modal/dialogHelper.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
'use strict';
|
||||
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { Button } from 'sql/base/browser/ui/button/button';
|
||||
|
||||
import { Builder } from 'vs/base/browser/builder';
|
||||
import * as types from 'vs/base/common/types';
|
||||
|
||||
import * as sqlops from 'sqlops';
|
||||
|
||||
export function appendRow(container: Builder, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string): Builder {
|
||||
let cellContainer: Builder;
|
||||
let rowAttributes = rowContainerClass ? { class: rowContainerClass } : {};
|
||||
container.element('tr', rowAttributes, (rowContainer) => {
|
||||
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
|
||||
labelCellContainer.div({}, (labelContainer) => {
|
||||
labelContainer.text(label);
|
||||
});
|
||||
});
|
||||
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
|
||||
cellContainer = inputCellContainer;
|
||||
});
|
||||
});
|
||||
|
||||
return cellContainer;
|
||||
}
|
||||
|
||||
export function appendRowLink(container: Builder, label: string, labelClass: string, cellContainerClass: string): Builder {
|
||||
let rowButton: Button;
|
||||
container.element('tr', {}, (rowContainer) => {
|
||||
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
|
||||
labelCellContainer.div({}, (labelContainer) => {
|
||||
labelContainer.text(label);
|
||||
});
|
||||
});
|
||||
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
|
||||
inputCellContainer.element('div', {}, (rowContainer) => {
|
||||
rowButton = new Button(rowContainer);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return new Builder(rowButton.element);
|
||||
}
|
||||
|
||||
export function appendInputSelectBox(container: Builder, selectBox: SelectBox): SelectBox {
|
||||
selectBox.render(container.getHTMLElement());
|
||||
return selectBox;
|
||||
}
|
||||
|
||||
export function getBooleanValueFromStringOrBoolean(value: any): boolean {
|
||||
if (types.isBoolean(value)) {
|
||||
return value;
|
||||
} else if (types.isString(value)) {
|
||||
return value.toLowerCase() === 'true';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function getCategoryDisplayName(categories: sqlops.CategoryValue[], categoryName: string) {
|
||||
var displayName: string;
|
||||
categories.forEach(c => {
|
||||
if (c.name === categoryName) {
|
||||
displayName = c.displayName;
|
||||
}
|
||||
});
|
||||
return displayName;
|
||||
}
|
||||
|
||||
export function getCategoryName(categories: sqlops.CategoryValue[], categoryDisplayName: string) {
|
||||
var categoryName: string;
|
||||
categories.forEach(c => {
|
||||
if (c.displayName === categoryDisplayName) {
|
||||
categoryName = c.name;
|
||||
}
|
||||
});
|
||||
return categoryName;
|
||||
}
|
||||
1
src/sql/workbench/browser/modal/media/back.svg
Normal file
1
src/sql/workbench/browser/modal/media/back.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#212121;}</style></defs><title>back_16x16</title><path class="cls-1" d="M16.15,8.5H2.1l6.15,6.15-.7.7L.19,8,7.55.65l.7.7L2.1,7.5h14Z"/></svg>
|
||||
|
After Width: | Height: | Size: 259 B |
1
src/sql/workbench/browser/modal/media/back_inverse.svg
Normal file
1
src/sql/workbench/browser/modal/media/back_inverse.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>back_inverse_16x16</title><path class="cls-1" d="M16.15,8.5H2.1l6.15,6.15-.7.7L.19,8,7.55.65l.7.7L2.1,7.5h14Z"/></svg>
|
||||
|
After Width: | Height: | Size: 264 B |
1
src/sql/workbench/browser/modal/media/close.svg
Normal file
1
src/sql/workbench/browser/modal/media/close.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>close</title><path d="M8.82,8.1,15,14.29l-.81.81L8,8.91,1.81,15.1,1,14.29,7.18,8.1,1,1.9l.81-.81L8,7.28,14.19,1.1,15,1.9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 230 B |
1
src/sql/workbench/browser/modal/media/close_inverse.svg
Normal file
1
src/sql/workbench/browser/modal/media/close_inverse.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>close copy</title><path class="cls-1" d="M8.82,8.1,15,14.29l-.81.81L8,8.91,1.81,15.1,1,14.29,7.18,8.1,1,1.9l.81-.81L8,7.28,14.19,1.1,15,1.9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 295 B |
1
src/sql/workbench/browser/modal/media/copy.svg
Normal file
1
src/sql/workbench/browser/modal/media/copy.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>copy</title><path d="M3-.15V3.21H0V15.95H13V12.58h3V-.15ZM12,15H1.08V4.12H12Zm3-3.36H13V3.21h-9V.75H15Z"/></svg>
|
||||
|
After Width: | Height: | Size: 212 B |
1
src/sql/workbench/browser/modal/media/copy_inverse.svg
Normal file
1
src/sql/workbench/browser/modal/media/copy_inverse.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>copy_inverse</title><path class="cls-1" d="M3,0V3.36H0V16.1H13V12.73h3V0Zm9,15.19H1.08V4.27H12Zm3-3.36H13V3.36H4V.9H15Z"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>error_notification</title><path d="M8,0a7.92,7.92,0,0,1,4,1.09A8.15,8.15,0,0,1,14.91,4a8,8,0,0,1,.81,1.91,8,8,0,0,1-.81,6.16A8.15,8.15,0,0,1,12,14.92a8,8,0,0,1-8.07,0,8.15,8.15,0,0,1-2.87-2.87A8,8,0,0,1,1.09,4,8.15,8.15,0,0,1,4,1.11,7.92,7.92,0,0,1,8,0ZM8,15a6.88,6.88,0,0,0,1.86-.25,7,7,0,0,0,4.89-4.89,7.07,7.07,0,0,0,0-3.73A7,7,0,0,0,9.86,1.27a7.07,7.07,0,0,0-3.73,0A7,7,0,0,0,1.25,6.15a7.07,7.07,0,0,0,0,3.73,7,7,0,0,0,4.89,4.89A6.88,6.88,0,0,0,8,15Zm3.46-9.76L8.71,8l2.75,2.76-.7.7L8,8.73,5.24,11.48l-.7-.7L7.29,8,4.54,5.26l.7-.7L8,7.31l2.76-2.75Z"/></svg>
|
||||
|
After Width: | Height: | Size: 661 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>error_notification_inverse</title><path class="cls-1" d="M8,0a7.92,7.92,0,0,1,4,1.09A8.15,8.15,0,0,1,14.91,4a8,8,0,0,1,.81,1.91,8,8,0,0,1-.81,6.16A8.15,8.15,0,0,1,12,14.92a8,8,0,0,1-8.07,0,8.15,8.15,0,0,1-2.87-2.87A8,8,0,0,1,1.09,4,8.15,8.15,0,0,1,4,1.11,7.92,7.92,0,0,1,8,0ZM8,15a6.88,6.88,0,0,0,1.86-.25,7,7,0,0,0,4.89-4.89,7.07,7.07,0,0,0,0-3.73A7,7,0,0,0,9.86,1.27a7.07,7.07,0,0,0-3.73,0A7,7,0,0,0,1.25,6.15a7.07,7.07,0,0,0,0,3.73,7,7,0,0,0,4.89,4.89A6.88,6.88,0,0,0,8,15Zm3.46-9.76L8.71,8l2.75,2.76-.7.7L8,8.73,5.24,11.48l-.7-.7L7.29,8,4.54,5.26l.7-.7L8,7.31l2.76-2.75Z"/></svg>
|
||||
|
After Width: | Height: | Size: 729 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>info_notification</title><path d="M8,16a7.93,7.93,0,0,1-2.13-.28A8,8,0,0,1,4,14.91,8,8,0,0,1,0,8,7.94,7.94,0,0,1,.28,5.88,8,8,0,0,1,1.09,4,8,8,0,0,1,4,1.1,8.08,8.08,0,0,1,5.86.3a8.13,8.13,0,0,1,4.25,0,8,8,0,0,1,3.53,2.05A8,8,0,0,1,14.9,4a8,8,0,0,1,.8,1.91,8,8,0,0,1-2.05,7.78A7.93,7.93,0,0,1,12,14.91a8,8,0,0,1-1.91.8A7.93,7.93,0,0,1,8,16ZM8,1.08a6.72,6.72,0,0,0-1.84.25A7.09,7.09,0,0,0,4.5,2,6.92,6.92,0,0,0,2,4.52a7.09,7.09,0,0,0-.7,1.66,6.87,6.87,0,0,0,0,3.67A7.07,7.07,0,0,0,2,11.5,6.92,6.92,0,0,0,4.5,14a7.09,7.09,0,0,0,1.65.7,6.89,6.89,0,0,0,3.68,0,7.07,7.07,0,0,0,1.66-.7A6.92,6.92,0,0,0,14,11.5a7.08,7.08,0,0,0,.7-1.65,6.89,6.89,0,0,0,0-3.68A7.09,7.09,0,0,0,14,4.52,6.92,6.92,0,0,0,11.48,2a7.07,7.07,0,0,0-1.66-.7A6.74,6.74,0,0,0,8,1.08Zm-.53,3.2H8.52V5.34H7.46Zm0,2.13H8.52v5.33H7.46Z"/></svg>
|
||||
|
After Width: | Height: | Size: 902 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>info_notification_inverse</title><path class="cls-1" d="M8,16a7.93,7.93,0,0,1-2.13-.28A8,8,0,0,1,4,14.91,8,8,0,0,1,0,8,7.94,7.94,0,0,1,.28,5.88,8,8,0,0,1,1.09,4,8,8,0,0,1,4,1.1,8.08,8.08,0,0,1,5.86.3a8.13,8.13,0,0,1,4.25,0,8,8,0,0,1,3.53,2.05A8,8,0,0,1,14.9,4a8,8,0,0,1,.8,1.91,8,8,0,0,1-2.05,7.78A7.93,7.93,0,0,1,12,14.91a8,8,0,0,1-1.91.8A7.93,7.93,0,0,1,8,16ZM8,1.08a6.72,6.72,0,0,0-1.84.25A7.09,7.09,0,0,0,4.5,2,6.92,6.92,0,0,0,2,4.52a7.09,7.09,0,0,0-.7,1.66,6.87,6.87,0,0,0,0,3.67A7.07,7.07,0,0,0,2,11.5,6.92,6.92,0,0,0,4.5,14a7.09,7.09,0,0,0,1.65.7,6.89,6.89,0,0,0,3.68,0,7.07,7.07,0,0,0,1.66-.7A6.92,6.92,0,0,0,14,11.5a7.08,7.08,0,0,0,.7-1.65,6.89,6.89,0,0,0,0-3.68A7.09,7.09,0,0,0,14,4.52,6.92,6.92,0,0,0,11.48,2a7.07,7.07,0,0,0-1.66-.7A6.74,6.74,0,0,0,8,1.08Zm-.53,3.2H8.52V5.34H7.46Zm0,2.13H8.52v5.33H7.46Z"/></svg>
|
||||
|
After Width: | Height: | Size: 970 B |
285
src/sql/workbench/browser/modal/media/modal.css
Normal file
285
src/sql/workbench/browser/modal/media/modal.css
Normal file
@@ -0,0 +1,285 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-shell .modal {
|
||||
background-color: rgba(204, 204, 204, 0.6);
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.monaco-shell .modal:not(.flyout-dialog) .modal-dialog {
|
||||
margin: auto;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.modal .modal-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .modal-footer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .icon.in-progress {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.monaco-shell .modal.flyout-dialog .modal-dialog {
|
||||
margin: auto auto auto auto;
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.monaco-shell .modal.flyout-dialog.wide .modal-dialog {
|
||||
width: 1200px;
|
||||
max-width: 95%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.monaco-shell .modal.flyout-dialog .modal-content {
|
||||
height: 100%;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal .modal-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal .modal-title-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.monaco-shell .modal.flyout-dialog .modal-body,
|
||||
.monaco-shell .modal.flyout-dialog .angular-modal-body,
|
||||
/* Style for body and footer in modal dialog. This should be applied to dialog created with angular component. */
|
||||
.monaco-shell .modal.flyout-dialog .modal-body-and-footer {
|
||||
flex: 1 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* modl body content style(excluding dialogErrorMessage section) for angulr component dialog */
|
||||
.angular-modal-body-content {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .angular-form {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-label {
|
||||
width: 100%;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Add space in the bottom to separate each input elements */
|
||||
.modal.flyout-dialog .input-divider {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 25px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.vs-dark.monaco-shell .modal.flyout-dialog .input {
|
||||
background-color: #3C3C3C;
|
||||
}
|
||||
|
||||
.vs-dark.monaco-shell .modal.flyout-dialog input:disabled {
|
||||
background-color: #E1E1E1;
|
||||
color: #3C3C3C;
|
||||
}
|
||||
|
||||
.modal .select-box,
|
||||
.modal .monaco-select-box {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
color: #6C6C6C;
|
||||
font-size: 11px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.modal .modal-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal .modal-footer .left-footer {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.modal .modal-footer .right-footer {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal .footer-button a.monaco-button.monaco-text-button {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.vs .monaco-text-button:focus {
|
||||
outline-width: 1px;
|
||||
}
|
||||
|
||||
.modal .footer-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.modal .right-footer .footer-button:last-of-type {
|
||||
margin-right: none;
|
||||
}
|
||||
|
||||
|
||||
.modal.flyout-dialog .dialog-message {
|
||||
padding: 6px 10px 10px 10px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vs .modal.flyout-dialog .dialog-message.error,
|
||||
.vs-dark .modal.flyout-dialog .dialog-message.error {
|
||||
background-color:#B62E00 !important;
|
||||
color:#FFFFFF !important;
|
||||
}
|
||||
|
||||
.vs .modal.flyout-dialog .dialog-message.warning,
|
||||
.vs-dark .modal.flyout-dialog .dialog-message.warning {
|
||||
background-color:#F9E385 !important;
|
||||
color:#4A4A4A !important;
|
||||
}
|
||||
|
||||
.vs .modal.flyout-dialog .dialog-message.info,
|
||||
.vs-dark .modal.flyout-dialog .dialog-message.info {
|
||||
background-color:#0078D7 !important;
|
||||
color:#FFFFFF !important;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-header {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-body {
|
||||
margin-left: 26px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
max-height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-icon {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-severity {
|
||||
margin-right: auto;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-button {
|
||||
min-width: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-button > a {
|
||||
background-position-x: 2px !important;
|
||||
background-color: inherit !important;
|
||||
color:inherit !important;
|
||||
padding-left: 22px !important;
|
||||
background-size: 16px 16px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-summary {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-summary.expanded {
|
||||
white-space: normal;
|
||||
overflow-x: unset;
|
||||
}
|
||||
|
||||
.modal.flyout-dialog .dialog-message-detail {
|
||||
margin-top: 5px;
|
||||
white-space: pre-wrap;
|
||||
user-select: text;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.hc-black .dialog-message.warning .close-message-icon,
|
||||
.close-message-icon {
|
||||
background: url('close_inverse.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.warning .close-message-icon {
|
||||
background: url('close.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.hc-black .dialog-message.warning .copy-message-icon,
|
||||
.copy-message-icon {
|
||||
background: url('copy_inverse.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.warning .copy-message-icon {
|
||||
background: url('copy.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.hc-black .dialog-message.warning .message-details-icon,
|
||||
.message-details-icon {
|
||||
background: url('show_details_inverse.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.warning .message-details-icon {
|
||||
background: url('show_details.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.info .dialog-message-icon {
|
||||
background: url('info_notification_inverse.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.hc-black .dialog-message.warning .dialog-message-icon {
|
||||
background: url('warning_notification_inverse.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.warning .dialog-message-icon {
|
||||
background: url('warning_notification.svg') center center no-repeat;
|
||||
}
|
||||
|
||||
.dialog-message.error .dialog-message-icon {
|
||||
background: url('error_notification_inverse.svg') center center no-repeat;
|
||||
}
|
||||
104
src/sql/workbench/browser/modal/media/optionsDialog.css
Normal file
104
src/sql/workbench/browser/modal/media/optionsDialog.css
Normal file
@@ -0,0 +1,104 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.optionsDialog-label {
|
||||
width: 120px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.optionsDialog-input {
|
||||
width: 200px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.options-dialog .select-box {
|
||||
width: 321px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.optionsDialog-options-groups {
|
||||
margin-top: 10px;
|
||||
flex: 1 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.optionsDialog-options-groups {
|
||||
margin: 10px 0px;
|
||||
flex: 1 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.vs .optionsDialog-options-groups {
|
||||
box-shadow: 0 1px 4px 1px rgba(220, 220, 220, 0.71);
|
||||
}
|
||||
|
||||
.vs-dark .optionsDialog-options-groups {
|
||||
box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71);
|
||||
}
|
||||
|
||||
.optionsDialog-options-groups .split-view-view .header {
|
||||
padding-left: 28px !important;
|
||||
background-position-x: 8px !important;
|
||||
}
|
||||
|
||||
.optionsDialog-options-groups .split-view-view .body {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.backButtonIcon {
|
||||
content: url('back.svg');
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hc-black .backButtonIcon,
|
||||
.vs-dark .backButtonIcon {
|
||||
content: url('back_inverse.svg');
|
||||
}
|
||||
|
||||
.optionsDialog-description {
|
||||
height: 90px;
|
||||
margin: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.optionsDialog-description .modal-title {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px center;
|
||||
padding-left: 25px;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.vs .optionsDialog-description .modal-title {
|
||||
background-image: url('info_notification.svg')
|
||||
}
|
||||
|
||||
.vs-dark .optionsDialog-description .modal-title,
|
||||
.hc-black .optionsDialog-description .modal-title {
|
||||
background-image: url('info_notification_inverse.svg')
|
||||
}
|
||||
|
||||
.optionsDialog-options {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.optionsDialog-description-content {
|
||||
padding-top: 10px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.optionsDialog-table{
|
||||
width:100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
td.optionsDialog-input.select-container {
|
||||
padding-right: 9px;
|
||||
}
|
||||
1
src/sql/workbench/browser/modal/media/show_details.svg
Normal file
1
src/sql/workbench/browser/modal/media/show_details.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>show_details</title><path d="M1,0H15V16H1ZM14,15V1H2V15ZM13,3V4H3V3Zm0,2V6H3V5Zm0,2V8H3V7Zm0,2v1H3V9Zm0,2v1H3V11Z"/></svg>
|
||||
|
After Width: | Height: | Size: 222 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>show_details_inverse</title><path class="cls-1" d="M1,0H15V16H1ZM14,15V1H2V15ZM13,3V4H3V3Zm0,2V6H3V5Zm0,2V8H3V7Zm0,2v1H3V9Zm0,2v1H3V11Z"/></svg>
|
||||
|
After Width: | Height: | Size: 290 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>warning_notification</title><path d="M8,0l8,16H0ZM8,2.4,1.73,15H14.28Zm-.53,4H8.53v5.33H7.47Zm0,7.47V12.82H8.53v1.07Z"/></svg>
|
||||
|
After Width: | Height: | Size: 226 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>warning_notification_inverse</title><path class="cls-1" d="M8,0l8,16H0ZM8,2.4,1.73,15H14.28Zm-.53,4H8.53v5.33H7.47Zm0,7.47V12.82H8.53v1.07Z"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
643
src/sql/workbench/browser/modal/modal.ts
Normal file
643
src/sql/workbench/browser/modal/modal.ts
Normal file
@@ -0,0 +1,643 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import 'vs/css!./media/modal';
|
||||
import { IThemable, attachButtonStyler } from 'vs/platform/theme/common/styler';
|
||||
import { Color } from 'vs/base/common/color';
|
||||
import { IPartService } from 'vs/workbench/services/part/common/partService';
|
||||
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
|
||||
import { mixin } from 'vs/base/common/objects';
|
||||
import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
|
||||
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { Builder, $ } from 'vs/base/browser/builder';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
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 TelemetryUtils from 'sql/common/telemetryUtilities';
|
||||
import * as TelemetryKeys from 'sql/common/telemetryKeys';
|
||||
import { localize } from 'vs/nls';
|
||||
import { MessageLevel } from 'sql/workbench/api/common/sqlExtHostTypes';
|
||||
import * as os from 'os';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
|
||||
export const MODAL_SHOWING_KEY = 'modalShowing';
|
||||
export const MODAL_SHOWING_CONTEXT = new RawContextKey<Array<string>>(MODAL_SHOWING_KEY, []);
|
||||
const INFO_ALT_TEXT = localize('infoAltText', 'Information');
|
||||
const WARNING_ALT_TEXT = localize('warningAltText', 'Warning');
|
||||
const ERROR_ALT_TEXT = localize('errorAltText', 'Error');
|
||||
const SHOW_DETAILS_TEXT = localize('showMessageDetails', 'Show Details');
|
||||
const HIDE_DETAILS_TEXT = localize('hideMessageDetails', 'Hide Details');
|
||||
const COPY_TEXT = localize('copyMessage', 'Copy');
|
||||
const CLOSE_TEXT = localize('closeMessage', 'Close');
|
||||
const MESSAGE_EXPANDED_MODE_CLASS = 'expanded';
|
||||
|
||||
export interface IModalDialogStyles {
|
||||
dialogForeground?: Color;
|
||||
dialogBorder?: Color;
|
||||
dialogHeaderAndFooterBackground?: Color;
|
||||
dialogBodyBackground?: Color;
|
||||
}
|
||||
|
||||
export interface IModalOptions {
|
||||
isFlyout?: boolean;
|
||||
isWide?: boolean;
|
||||
isAngular?: boolean;
|
||||
hasBackButton?: boolean;
|
||||
hasTitleIcon?: boolean;
|
||||
hasErrors?: boolean;
|
||||
hasSpinner?: boolean;
|
||||
}
|
||||
|
||||
// Needed for angular component dialogs to style modal footer
|
||||
export class ModalFooterStyle {
|
||||
public static backgroundColor;
|
||||
public static borderTopWidth;
|
||||
public static borderTopStyle;
|
||||
public static borderTopColor;
|
||||
}
|
||||
|
||||
const defaultOptions: IModalOptions = {
|
||||
isFlyout: true,
|
||||
isWide: false,
|
||||
isAngular: false,
|
||||
hasBackButton: false,
|
||||
hasTitleIcon: false,
|
||||
hasErrors: false,
|
||||
hasSpinner: false
|
||||
};
|
||||
|
||||
export abstract class Modal extends Disposable implements IThemable {
|
||||
protected _useDefaultMessageBoxLocation: boolean = true;
|
||||
protected _messageElement: HTMLElement;
|
||||
private _messageIcon: HTMLElement;
|
||||
private _messageSeverity: Builder;
|
||||
private _messageSummary: Builder;
|
||||
private _messageSummaryElement: HTMLElement;
|
||||
private _messageDetail: Builder;
|
||||
private _messageDetailElement: HTMLElement;
|
||||
private _toggleMessageDetailButton: Button;
|
||||
private _copyMessageButton: Button;
|
||||
private _closeMessageButton: Button;
|
||||
private _messageSummaryText: string;
|
||||
private _messageDetailText: string;
|
||||
|
||||
private _spinnerElement: HTMLElement;
|
||||
private _focusableElements: NodeListOf<Element>;
|
||||
private _firstFocusableElement: HTMLElement;
|
||||
private _lastFocusableElement: HTMLElement;
|
||||
private _focusedElementBeforeOpen: HTMLElement;
|
||||
|
||||
private _dialogForeground: Color;
|
||||
private _dialogBorder: Color;
|
||||
private _dialogHeaderAndFooterBackground: Color;
|
||||
private _dialogBodyBackground: Color;
|
||||
|
||||
private _modalDialog: Builder;
|
||||
private _modalHeaderSection: Builder;
|
||||
private _modalMessageSection: Builder;
|
||||
private _modalBodySection: HTMLElement;
|
||||
private _modalFooterSection: Builder;
|
||||
private _closeButtonInHeader: Builder;
|
||||
private _builder: Builder;
|
||||
private _footerBuilder: Builder;
|
||||
private _modalTitle: Builder;
|
||||
private _modalTitleIcon: HTMLElement;
|
||||
private _leftFooter: Builder;
|
||||
private _rightFooter: Builder;
|
||||
private _footerButtons: Button[];
|
||||
|
||||
private _keydownListener: IDisposable;
|
||||
private _resizeListener: IDisposable;
|
||||
|
||||
private _modalOptions: IModalOptions;
|
||||
private _backButton: Button;
|
||||
|
||||
private _modalShowingContext: IContextKey<Array<string>>;
|
||||
private readonly _staticKey: string;
|
||||
|
||||
/**
|
||||
* Get the back button, only available after render and if the hasBackButton option is true
|
||||
*/
|
||||
protected get backButton(): Button {
|
||||
return this._backButton;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the dialog to have wide layout dynamically.
|
||||
* Temporary solution to render file browser as wide or narrow layout.
|
||||
* This will be removed once backup dialog is changed to wide layout.
|
||||
* (hyoshi - 10/2/2017 tracked by https://github.com/Microsoft/carbon/issues/1836)
|
||||
*/
|
||||
public setWide(isWide: boolean): void {
|
||||
if (this._builder.hasClass('wide') && isWide === false) {
|
||||
this._builder.removeClass('wide');
|
||||
} else if (!this._builder.hasClass('wide') && isWide === true) {
|
||||
this._builder.addClass('wide');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructor for modal
|
||||
* @param _title Title of the modal, if undefined, the title section is not rendered
|
||||
* @param _name Name of the modal, used for telemetry
|
||||
* @param _partService
|
||||
* @param options Modal options
|
||||
*/
|
||||
constructor(
|
||||
private _title: string,
|
||||
private _name: string,
|
||||
private _partService: IPartService,
|
||||
private _telemetryService: ITelemetryService,
|
||||
protected _clipboardService: IClipboardService,
|
||||
protected _themeService: IThemeService,
|
||||
_contextKeyService: IContextKeyService,
|
||||
options?: IModalOptions
|
||||
) {
|
||||
super();
|
||||
this._modalOptions = options || Object.create(null);
|
||||
mixin(this._modalOptions, defaultOptions, false);
|
||||
this._staticKey = generateUuid();
|
||||
this._modalShowingContext = MODAL_SHOWING_CONTEXT.bindTo(_contextKeyService);
|
||||
this._footerButtons = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Build and render the modal, will call {@link Modal#renderBody}
|
||||
*/
|
||||
public render() {
|
||||
let modalBodyClass = (this._modalOptions.isAngular === false ? 'modal-body' : 'modal-body-and-footer');
|
||||
let parts: Array<HTMLElement> = [];
|
||||
// This modal header section refers to the header of of the dialog
|
||||
// will not be rendered if the title is passed in as undefined
|
||||
if (this._title !== undefined) {
|
||||
this._modalHeaderSection = $().div({ class: 'modal-header' }, (modalHeader) => {
|
||||
if (this._modalOptions.hasBackButton) {
|
||||
modalHeader.div({ class: 'modal-go-back' }, (cellContainer) => {
|
||||
this._backButton = new Button(cellContainer);
|
||||
this._backButton.icon = 'backButtonIcon';
|
||||
this._backButton.title = localize('modalBack', "Back");
|
||||
});
|
||||
}
|
||||
if (this._modalOptions.hasTitleIcon) {
|
||||
modalHeader.div({ class: 'modal-title-icon' }, (modalIcon) => {
|
||||
this._modalTitleIcon = modalIcon.getHTMLElement();
|
||||
});
|
||||
}
|
||||
modalHeader.div({ class: 'modal-title' }, (modalTitle) => {
|
||||
this._modalTitle = modalTitle;
|
||||
modalTitle.text(this._title);
|
||||
});
|
||||
});
|
||||
parts.push(this._modalHeaderSection.getHTMLElement());
|
||||
}
|
||||
|
||||
if (this._modalOptions.isAngular === false && this._modalOptions.hasErrors) {
|
||||
|
||||
this._modalMessageSection = $().div({ class: 'dialog-message error' }, (messageContainer) => {
|
||||
messageContainer.div({ class: 'dialog-message-header' }, (headerContainer) => {
|
||||
headerContainer.div({ class: 'dialog-message-icon' }, (iconContainer) => {
|
||||
this._messageIcon = iconContainer.getHTMLElement();
|
||||
});
|
||||
headerContainer.div({ class: 'dialog-message-severity' }, (messageSeverityContainer) => {
|
||||
this._messageSeverity = messageSeverityContainer;
|
||||
});
|
||||
headerContainer.div({ class: 'dialog-message-button' }, (buttonContainer) => {
|
||||
this._toggleMessageDetailButton = new Button(buttonContainer);
|
||||
this._toggleMessageDetailButton.icon = 'message-details-icon';
|
||||
this._toggleMessageDetailButton.label = SHOW_DETAILS_TEXT;
|
||||
this._toggleMessageDetailButton.onDidClick((e) => {
|
||||
this.toggleMessageDetail();
|
||||
});
|
||||
});
|
||||
headerContainer.div({ class: 'dialog-message-button' }, (buttonContainer) => {
|
||||
this._copyMessageButton = new Button(buttonContainer);
|
||||
this._copyMessageButton.icon = 'copy-message-icon';
|
||||
this._copyMessageButton.label = COPY_TEXT;
|
||||
this._copyMessageButton.onDidClick((e) => {
|
||||
this._clipboardService.writeText(this.getTextForClipboard());
|
||||
});
|
||||
});
|
||||
headerContainer.div({ class: 'dialog-message-button' }, (buttonContainer) => {
|
||||
this._closeMessageButton = new Button(buttonContainer);
|
||||
this._closeMessageButton.icon = 'close-message-icon';
|
||||
this._closeMessageButton.label = CLOSE_TEXT;
|
||||
this._closeMessageButton.onDidClick((e) => {
|
||||
this.setError(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
attachButtonStyler(this._toggleMessageDetailButton, this._themeService);
|
||||
attachButtonStyler(this._copyMessageButton, this._themeService);
|
||||
attachButtonStyler(this._closeMessageButton, this._themeService);
|
||||
});
|
||||
messageContainer.div({ class: 'dialog-message-body' }, (messageBody) => {
|
||||
messageBody.div({ class: 'dialog-message-summary' }, (summaryContainer) => {
|
||||
this._messageSummary = summaryContainer;
|
||||
this._messageSummaryElement = summaryContainer.getHTMLElement();
|
||||
this._messageSummaryElement.onclick = (e) => {
|
||||
this.toggleMessageDetail();
|
||||
};
|
||||
});
|
||||
messageBody.div({ class: 'dialog-message-detail' }, (detailContainer) => {
|
||||
this._messageDetail = detailContainer;
|
||||
this._messageDetailElement = detailContainer.getHTMLElement();
|
||||
this._messageDetailElement.style.display = 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
this._messageElement = this._modalMessageSection.getHTMLElement();
|
||||
this.updateElementVisibility(this._messageElement, false);
|
||||
|
||||
if (this._useDefaultMessageBoxLocation) {
|
||||
parts.push(this._messageElement);
|
||||
}
|
||||
}
|
||||
|
||||
// This modal body section refers to the body of of the dialog
|
||||
let body: Builder;
|
||||
$().div({ class: modalBodyClass }, (builder) => {
|
||||
body = builder;
|
||||
});
|
||||
|
||||
this._modalBodySection = body.getHTMLElement();
|
||||
parts.push(body.getHTMLElement());
|
||||
|
||||
this.renderBody(body.getHTMLElement());
|
||||
|
||||
// This modal footer section refers to the footer of of the dialog
|
||||
if (this._modalOptions.isAngular === false) {
|
||||
this._modalFooterSection = $().div({ class: 'modal-footer' }, (modelFooter) => {
|
||||
if (this._modalOptions.hasSpinner) {
|
||||
modelFooter.div({ 'class': 'icon in-progress' }, (spinnerContainer) => {
|
||||
this._spinnerElement = spinnerContainer.getHTMLElement();
|
||||
this._spinnerElement.style.visibility = 'hidden';
|
||||
});
|
||||
}
|
||||
modelFooter.div({ 'class': 'left-footer' }, (leftFooter) => {
|
||||
this._leftFooter = leftFooter;
|
||||
});
|
||||
modelFooter.div({ 'class': 'right-footer' }, (rightFooter) => {
|
||||
this._rightFooter = rightFooter;
|
||||
});
|
||||
this._footerBuilder = modelFooter;
|
||||
});
|
||||
parts.push(this._modalFooterSection.getHTMLElement());
|
||||
}
|
||||
|
||||
let builderClass = 'modal fade';
|
||||
if (this._modalOptions.isFlyout) {
|
||||
builderClass += ' flyout-dialog';
|
||||
}
|
||||
if (this._modalOptions.isWide) {
|
||||
builderClass += ' wide';
|
||||
}
|
||||
|
||||
// The builder builds the dialog. It append header, body and footer sections.
|
||||
this._builder = $().div({ class: builderClass, 'role': 'dialog', 'aria-label': this._title }, (dialogContainer) => {
|
||||
this._modalDialog = dialogContainer.div({ class: 'modal-dialog ', role: 'document' }, (modalDialog) => {
|
||||
modalDialog.div({ class: 'modal-content' }, (modelContent) => {
|
||||
parts.forEach((part) => {
|
||||
modelContent.append(part);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called for extended classes to render the body
|
||||
* @param container The parent container to attach the rendered body to
|
||||
*/
|
||||
protected abstract renderBody(container: HTMLElement): void;
|
||||
|
||||
/**
|
||||
* Overridable to change behavior of escape key
|
||||
*/
|
||||
protected onClose(e: StandardKeyboardEvent) {
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Overridable to change behavior of enter key
|
||||
*/
|
||||
protected onAccept(e: StandardKeyboardEvent) {
|
||||
this.hide();
|
||||
}
|
||||
|
||||
private handleBackwardTab(e: KeyboardEvent) {
|
||||
if (this._firstFocusableElement && this._lastFocusableElement && document.activeElement === this._firstFocusableElement) {
|
||||
e.preventDefault();
|
||||
this._lastFocusableElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private handleForwardTab(e: KeyboardEvent) {
|
||||
if (this._firstFocusableElement && this._lastFocusableElement && document.activeElement === this._lastFocusableElement) {
|
||||
e.preventDefault();
|
||||
this._firstFocusableElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private getTextForClipboard(): string {
|
||||
return this._messageDetailText === '' ? this._messageSummaryText : `${this._messageSummaryText}${os.EOL}========================${os.EOL}${this._messageDetailText}`;
|
||||
}
|
||||
|
||||
private updateElementVisibility(element: HTMLElement, visible: boolean) {
|
||||
element.style.display = visible ? 'block' : 'none';
|
||||
}
|
||||
|
||||
private updateExpandMessageState() {
|
||||
this._messageSummaryElement.style.cursor = this.shouldShowExpandMessageButton ? 'pointer' : 'default';
|
||||
this._messageSummaryElement.classList.remove(MESSAGE_EXPANDED_MODE_CLASS);
|
||||
this.updateElementVisibility(this._toggleMessageDetailButton.element, this.shouldShowExpandMessageButton);
|
||||
}
|
||||
|
||||
private toggleMessageDetail() {
|
||||
let isExpanded = this._messageSummaryElement.classList.contains(MESSAGE_EXPANDED_MODE_CLASS);
|
||||
if (isExpanded) {
|
||||
this._messageSummaryElement.classList.remove(MESSAGE_EXPANDED_MODE_CLASS);
|
||||
this._toggleMessageDetailButton.label = SHOW_DETAILS_TEXT;
|
||||
} else {
|
||||
this._messageSummaryElement.classList.add(MESSAGE_EXPANDED_MODE_CLASS);
|
||||
this._toggleMessageDetailButton.label = HIDE_DETAILS_TEXT;
|
||||
}
|
||||
|
||||
if (this._messageDetailText !== '') {
|
||||
this.updateElementVisibility(this._messageDetailElement, !isExpanded);
|
||||
}
|
||||
}
|
||||
|
||||
private get shouldShowExpandMessageButton(): boolean {
|
||||
return this._messageDetailText !== '' || this._messageSummaryElement.scrollWidth > this._messageSummaryElement.offsetWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set focusable elements in the modal dialog
|
||||
*/
|
||||
public setFocusableElements() {
|
||||
this._focusableElements = this._builder.getHTMLElement().querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
|
||||
if (this._focusableElements && this._focusableElements.length > 0) {
|
||||
this._firstFocusableElement = <HTMLElement>this._focusableElements[0];
|
||||
this._lastFocusableElement = <HTMLElement>this._focusableElements[this._focusableElements.length - 1];
|
||||
}
|
||||
|
||||
this._focusedElementBeforeOpen = <HTMLElement>document.activeElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the modal and attaches key listeners
|
||||
*/
|
||||
protected show() {
|
||||
this._modalShowingContext.get().push(this._staticKey);
|
||||
this._builder.appendTo(document.getElementById(this._partService.getWorkbenchElementId()));
|
||||
|
||||
this.setFocusableElements();
|
||||
|
||||
this._keydownListener = DOM.addDisposableListener(document, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
|
||||
let context = this._modalShowingContext.get();
|
||||
if (context[context.length - 1] === this._staticKey) {
|
||||
let event = new StandardKeyboardEvent(e);
|
||||
if (event.equals(KeyCode.Enter)) {
|
||||
this.onAccept(event);
|
||||
} else if (event.equals(KeyCode.Escape)) {
|
||||
this.onClose(event);
|
||||
} else if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
|
||||
this.handleBackwardTab(e);
|
||||
} else if (event.equals(KeyCode.Tab)) {
|
||||
this.handleForwardTab(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
this._resizeListener = DOM.addDisposableListener(window, DOM.EventType.RESIZE, (e: Event) => {
|
||||
this.layout(DOM.getTotalHeight(this._modalBodySection));
|
||||
});
|
||||
|
||||
this.layout(DOM.getTotalHeight(this._modalBodySection));
|
||||
TelemetryUtils.addTelemetry(this._telemetryService, TelemetryKeys.ModalDialogOpened, { name: this._name });
|
||||
}
|
||||
|
||||
/**
|
||||
* Required to be implemented so that scrolling and other functions operate correctly. Should re-layout controls in the modal
|
||||
*/
|
||||
protected abstract layout(height: number): void;
|
||||
|
||||
/**
|
||||
* Hides the modal and removes key listeners
|
||||
*/
|
||||
protected hide() {
|
||||
this._modalShowingContext.get().pop();
|
||||
this._builder.offDOM();
|
||||
if (this._focusedElementBeforeOpen) {
|
||||
this._focusedElementBeforeOpen.focus();
|
||||
}
|
||||
this._keydownListener.dispose();
|
||||
this._resizeListener.dispose();
|
||||
TelemetryUtils.addTelemetry(this._telemetryService, TelemetryKeys.ModalDialogClosed, { name: this._name });
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a button to the footer of the modal
|
||||
* @param label Label to show on the button
|
||||
* @param onSelect The callback to call when the button is selected
|
||||
*/
|
||||
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right'): Button {
|
||||
let footerButton = $('div.footer-button');
|
||||
let button = new Button(footerButton);
|
||||
button.label = label;
|
||||
button.onDidClick(() => onSelect());
|
||||
if (orientation === 'left') {
|
||||
footerButton.appendTo(this._leftFooter);
|
||||
} else {
|
||||
footerButton.appendTo(this._rightFooter);
|
||||
}
|
||||
this._footerButtons.push(button);
|
||||
return button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a footer button matching the provided label
|
||||
* @param label Label to show on the button
|
||||
* @param onSelect The callback to call when the button is selected
|
||||
*/
|
||||
protected findFooterButton(label: string): Button {
|
||||
return this._footerButtons.find(e => {
|
||||
try {
|
||||
return e && e.element.innerText === label;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an error in the error message element
|
||||
* @param message Text to show in the message
|
||||
* @param level Severity level of the message
|
||||
* @param description Description of the message
|
||||
*/
|
||||
protected setError(message: string, level: MessageLevel = MessageLevel.Error, description: string = '') {
|
||||
if (this._modalOptions.hasErrors) {
|
||||
this._messageSummaryText = message ? message : '';
|
||||
this._messageDetailText = description ? description : '';
|
||||
|
||||
if (this._messageSummaryText !== '') {
|
||||
const levelClasses = ['info', 'warning', 'error'];
|
||||
let selectedLevel = levelClasses[2];
|
||||
let severityText = ERROR_ALT_TEXT;
|
||||
if (level === MessageLevel.Information) {
|
||||
selectedLevel = levelClasses[0];
|
||||
severityText = INFO_ALT_TEXT;
|
||||
} else if (level === MessageLevel.Warning) {
|
||||
selectedLevel = levelClasses[1];
|
||||
severityText = WARNING_ALT_TEXT;
|
||||
}
|
||||
levelClasses.forEach(level => {
|
||||
if (selectedLevel === level) {
|
||||
this._messageIcon.classList.add(level);
|
||||
this._messageElement.classList.add(level);
|
||||
} else {
|
||||
this._messageIcon.classList.remove(level);
|
||||
this._messageElement.classList.remove(level);
|
||||
}
|
||||
});
|
||||
|
||||
this._messageIcon.title = severityText;
|
||||
this._messageSeverity.text(severityText);
|
||||
this._messageSummary.text(message);
|
||||
this._messageSummary.title(message);
|
||||
this._messageDetail.text(description);
|
||||
}
|
||||
this.updateElementVisibility(this._messageDetailElement, false);
|
||||
this.updateElementVisibility(this._messageElement, this._messageSummaryText !== '');
|
||||
this.updateExpandMessageState();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the spinner element that shows something is happening, hidden by default
|
||||
*/
|
||||
protected showSpinner(): void {
|
||||
if (this._modalOptions.hasSpinner) {
|
||||
this._spinnerElement.style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the spinner element to show that something was happening, hidden by default
|
||||
*/
|
||||
protected hideSpinner(): void {
|
||||
if (this._modalOptions.hasSpinner) {
|
||||
this._spinnerElement.style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set spinner element to show or hide
|
||||
*/
|
||||
public set spinner(show: boolean) {
|
||||
if (show) {
|
||||
this.showSpinner();
|
||||
} else {
|
||||
this.hideSpinner();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Return background color of header and footer
|
||||
*/
|
||||
protected get headerAndFooterBackground(): string {
|
||||
return this._dialogHeaderAndFooterBackground ? this._dialogHeaderAndFooterBackground.toString() : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the title of the modal
|
||||
* @param title
|
||||
*/
|
||||
protected set title(title: string) {
|
||||
if (this._title !== undefined) {
|
||||
this._modalTitle.text(title);
|
||||
}
|
||||
}
|
||||
|
||||
protected get title(): string {
|
||||
return this._title;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the icon title class name
|
||||
* @param iconClassName
|
||||
*/
|
||||
protected set titleIconClassName(iconClassName: string) {
|
||||
if (this._modalTitleIcon) {
|
||||
this._modalTitleIcon.className = 'modal-title-icon ' + iconClassName;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by the theme registry on theme change to style the component
|
||||
*/
|
||||
public style(styles: IModalDialogStyles): void {
|
||||
this._dialogForeground = styles.dialogForeground;
|
||||
this._dialogBorder = styles.dialogBorder;
|
||||
this._dialogHeaderAndFooterBackground = styles.dialogHeaderAndFooterBackground;
|
||||
this._dialogBodyBackground = styles.dialogBodyBackground;
|
||||
this.applyStyles();
|
||||
}
|
||||
|
||||
private applyStyles(): void {
|
||||
const foreground = this._dialogForeground ? this._dialogForeground.toString() : null;
|
||||
const border = this._dialogBorder ? this._dialogBorder.toString() : null;
|
||||
const headerAndFooterBackground = this._dialogHeaderAndFooterBackground ? this._dialogHeaderAndFooterBackground.toString() : null;
|
||||
const bodyBackground = this._dialogBodyBackground ? this._dialogBodyBackground.toString() : null;
|
||||
ModalFooterStyle.backgroundColor = headerAndFooterBackground;
|
||||
ModalFooterStyle.borderTopWidth = border ? '1px' : null;
|
||||
ModalFooterStyle.borderTopStyle = border ? 'solid' : null;
|
||||
ModalFooterStyle.borderTopColor = border;
|
||||
|
||||
if (this._closeButtonInHeader) {
|
||||
this._closeButtonInHeader.style('color', foreground);
|
||||
}
|
||||
if (this._modalDialog) {
|
||||
this._modalDialog.style('color', foreground);
|
||||
this._modalDialog.style('border-width', border ? '1px' : null);
|
||||
this._modalDialog.style('border-style', border ? 'solid' : null);
|
||||
this._modalDialog.style('border-color', border);
|
||||
}
|
||||
|
||||
if (this._modalHeaderSection) {
|
||||
this._modalHeaderSection.style('background-color', headerAndFooterBackground);
|
||||
this._modalHeaderSection.style('border-bottom-width', border ? '1px' : null);
|
||||
this._modalHeaderSection.style('border-bottom-style', border ? 'solid' : null);
|
||||
this._modalHeaderSection.style('border-bottom-color', border);
|
||||
}
|
||||
|
||||
if (this._modalMessageSection) {
|
||||
this._modalMessageSection.style('background-color', headerAndFooterBackground);
|
||||
this._modalMessageSection.style('border-bottom-width', border ? '1px' : null);
|
||||
this._modalMessageSection.style('border-bottom-style', border ? 'solid' : null);
|
||||
this._modalMessageSection.style('border-bottom-color', border);
|
||||
}
|
||||
|
||||
if (this._modalBodySection) {
|
||||
this._modalBodySection.style.backgroundColor = bodyBackground;
|
||||
}
|
||||
|
||||
if (this._modalFooterSection) {
|
||||
this._modalFooterSection.style('background-color', ModalFooterStyle.backgroundColor);
|
||||
this._modalFooterSection.style('border-top-width', ModalFooterStyle.borderTopWidth);
|
||||
this._modalFooterSection.style('border-top-style', ModalFooterStyle.borderTopStyle);
|
||||
this._modalFooterSection.style('border-top-color', ModalFooterStyle.borderTopColor);
|
||||
}
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
super.dispose();
|
||||
this._keydownListener.dispose();
|
||||
this._footerButtons = [];
|
||||
}
|
||||
}
|
||||
273
src/sql/workbench/browser/modal/optionsDialog.ts
Normal file
273
src/sql/workbench/browser/modal/optionsDialog.ts
Normal file
@@ -0,0 +1,273 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import 'vs/css!./media/optionsDialog';
|
||||
import * as DialogHelper from './dialogHelper';
|
||||
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { IModalOptions, Modal } from './modal';
|
||||
import * as OptionsDialogHelper from './optionsDialogHelper';
|
||||
import { attachButtonStyler, attachModalDialogStyler, attachPanelStyler } from 'sql/platform/theme/common/styler';
|
||||
import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
|
||||
import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
|
||||
|
||||
import * as sqlops from 'sqlops';
|
||||
|
||||
import { IPartService } from 'vs/workbench/services/part/common/partService';
|
||||
import { Event, Emitter } from 'vs/base/common/event';
|
||||
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
|
||||
import { IContextViewService, IContextMenuService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { localize } from 'vs/nls';
|
||||
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
|
||||
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
|
||||
import * as styler from 'vs/platform/theme/common/styler';
|
||||
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { Builder, $ } from 'vs/base/browser/builder';
|
||||
import { Widget } from 'vs/base/browser/ui/widget';
|
||||
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
|
||||
import { IViewletPanelOptions, ViewletPanel } from 'vs/workbench/browser/parts/views/panelViewlet';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
|
||||
export class CategoryView extends ViewletPanel {
|
||||
|
||||
constructor(
|
||||
private contentElement: HTMLElement,
|
||||
private size: number,
|
||||
options: IViewletPanelOptions,
|
||||
@IKeybindingService keybindingService: IKeybindingService,
|
||||
@IContextMenuService contextMenuService: IContextMenuService,
|
||||
@IConfigurationService configurationService: IConfigurationService
|
||||
) {
|
||||
super(options, keybindingService, contextMenuService, configurationService);
|
||||
}
|
||||
|
||||
// we want a fixed size, so when we render to will measure our content and set that to be our
|
||||
// minimum and max size
|
||||
protected renderBody(container: HTMLElement): void {
|
||||
container.appendChild(this.contentElement);
|
||||
this.maximumBodySize = this.size;
|
||||
this.minimumBodySize = this.size;
|
||||
}
|
||||
|
||||
protected layoutBody(size: number): void {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
export interface IOptionsDialogOptions extends IModalOptions {
|
||||
cancelLabel?: string;
|
||||
}
|
||||
|
||||
export class OptionsDialog extends Modal {
|
||||
private _body: HTMLElement;
|
||||
private _optionGroups: HTMLElement;
|
||||
private _dividerBuilder: Builder;
|
||||
private _optionTitle: Builder;
|
||||
private _optionDescription: Builder;
|
||||
private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
|
||||
private _optionValues: { [optionName: string]: string };
|
||||
private _optionRowSize = 31;
|
||||
private _optionCategoryPadding = 30;
|
||||
private height: number;
|
||||
private splitview: ScrollableSplitView;
|
||||
|
||||
private _onOk = new Emitter<void>();
|
||||
public onOk: Event<void> = this._onOk.event;
|
||||
|
||||
private _onCloseEvent = new Emitter<void>();
|
||||
public onCloseEvent: Event<void> = this._onCloseEvent.event;
|
||||
|
||||
constructor(
|
||||
title: string,
|
||||
name: string,
|
||||
private options: IOptionsDialogOptions,
|
||||
@IPartService partService: IPartService,
|
||||
@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
|
||||
@IContextViewService private _contextViewService: IContextViewService,
|
||||
@IInstantiationService private _instantiationService: IInstantiationService,
|
||||
@ITelemetryService telemetryService: ITelemetryService,
|
||||
@IContextKeyService contextKeyService: IContextKeyService,
|
||||
@IClipboardService clipboardService: IClipboardService
|
||||
) {
|
||||
super(title, name, partService, telemetryService, clipboardService, _workbenchThemeService, contextKeyService, options);
|
||||
}
|
||||
|
||||
public render() {
|
||||
super.render();
|
||||
attachModalDialogStyler(this, this._themeService);
|
||||
if (this.backButton) {
|
||||
this.backButton.onDidClick(() => this.cancel());
|
||||
attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
|
||||
}
|
||||
let okButton = this.addFooterButton(localize('optionsDialog.ok', 'OK'), () => this.ok());
|
||||
let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', 'Cancel'), () => this.cancel());
|
||||
// Theme styler
|
||||
attachButtonStyler(okButton, this._themeService);
|
||||
attachButtonStyler(closeButton, this._themeService);
|
||||
this._register(this._workbenchThemeService.onDidColorThemeChange(e => this.updateTheme(e)));
|
||||
this.updateTheme(this._workbenchThemeService.getColorTheme());
|
||||
}
|
||||
|
||||
protected renderBody(container: HTMLElement) {
|
||||
new Builder(container).div({ class: 'optionsDialog-options' }, (bodyBuilder) => {
|
||||
this._body = bodyBuilder.getHTMLElement();
|
||||
});
|
||||
|
||||
let builder = new Builder(this._body);
|
||||
builder.div({}, (dividerContainer) => {
|
||||
this._dividerBuilder = dividerContainer;
|
||||
});
|
||||
|
||||
builder.div({ class: 'optionsDialog-description' }, (descriptionContainer) => {
|
||||
descriptionContainer.div({ class: 'modal-title' }, (optionTitle) => {
|
||||
this._optionTitle = optionTitle;
|
||||
});
|
||||
descriptionContainer.div({ class: 'optionsDialog-description-content' }, (optionDescription) => {
|
||||
this._optionDescription = optionDescription;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update theming that is specific to options dialog flyout body
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let borderColor = theme.getColor(contrastBorder);
|
||||
let border = borderColor ? borderColor.toString() : null;
|
||||
if (this._dividerBuilder) {
|
||||
this._dividerBuilder.style('border-top-width', border ? '1px' : null);
|
||||
this._dividerBuilder.style('border-top-style', border ? 'solid' : null);
|
||||
this._dividerBuilder.style('border-top-color', border);
|
||||
}
|
||||
}
|
||||
|
||||
private onOptionLinkClicked(optionName: string): void {
|
||||
let option = this._optionElements[optionName].option;
|
||||
this._optionTitle.text(option.displayName);
|
||||
this._optionDescription.text(option.description);
|
||||
}
|
||||
|
||||
private fillInOptions(container: Builder, options: sqlops.ServiceOption[]): void {
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
let option: sqlops.ServiceOption = options[i];
|
||||
let rowContainer = DialogHelper.appendRow(container, option.displayName, 'optionsDialog-label', 'optionsDialog-input');
|
||||
OptionsDialogHelper.createOptionElement(option, rowContainer, this._optionValues, this._optionElements, this._contextViewService, (name) => this.onOptionLinkClicked(name));
|
||||
}
|
||||
}
|
||||
|
||||
private registerStyling(): void {
|
||||
// Theme styler
|
||||
for (let optionName in this._optionElements) {
|
||||
let widget: Widget = this._optionElements[optionName].optionWidget;
|
||||
let option = this._optionElements[optionName].option;
|
||||
switch (option.valueType) {
|
||||
case ServiceOptionType.category:
|
||||
case ServiceOptionType.boolean:
|
||||
this._register(styler.attachSelectBoxStyler(<SelectBox>widget, this._themeService));
|
||||
break;
|
||||
case ServiceOptionType.string:
|
||||
case ServiceOptionType.password:
|
||||
case ServiceOptionType.number:
|
||||
this._register(styler.attachInputBoxStyler(<InputBox>widget, this._themeService));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public get optionValues(): { [name: string]: any } {
|
||||
return this._optionValues;
|
||||
}
|
||||
|
||||
public hideError() {
|
||||
this.setError('');
|
||||
}
|
||||
|
||||
public showError(err: string) {
|
||||
this.setError(err);
|
||||
}
|
||||
|
||||
/* Overwrite escape key behavior */
|
||||
protected onClose() {
|
||||
this.close();
|
||||
}
|
||||
|
||||
/* Overwrite enter key behavior */
|
||||
protected onAccept() {
|
||||
this.ok();
|
||||
}
|
||||
|
||||
public ok(): void {
|
||||
if (OptionsDialogHelper.validateInputs(this._optionElements)) {
|
||||
OptionsDialogHelper.updateOptions(this._optionValues, this._optionElements);
|
||||
this._onOk.fire();
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.close();
|
||||
}
|
||||
|
||||
public close() {
|
||||
this._optionGroups.remove();
|
||||
this.dispose();
|
||||
this.hide();
|
||||
this._onCloseEvent.fire();
|
||||
}
|
||||
|
||||
public open(options: sqlops.ServiceOption[], optionValues: { [name: string]: any }) {
|
||||
this._optionValues = optionValues;
|
||||
let firstOption: string;
|
||||
let containerGroup: Builder;
|
||||
let optionsContentBuilder: Builder = $().div({ class: 'optionsDialog-options-groups monaco-panel-view' }, (container) => {
|
||||
containerGroup = container;
|
||||
this._optionGroups = container.getHTMLElement();
|
||||
});
|
||||
this.splitview = new ScrollableSplitView(containerGroup.getHTMLElement(), { enableResizing: false, scrollDebounce: 0 });
|
||||
let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
|
||||
for (let category in categoryMap) {
|
||||
let serviceOptions: sqlops.ServiceOption[] = categoryMap[category];
|
||||
let bodyContainer = $().element('table', { class: 'optionsDialog-table' }, (tableContainer: Builder) => {
|
||||
this.fillInOptions(tableContainer, serviceOptions);
|
||||
});
|
||||
|
||||
let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
|
||||
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer.getHTMLElement(), viewSize, { title: category, ariaHeaderLabel: category, id: category });
|
||||
this.splitview.addView(categoryView, viewSize);
|
||||
categoryView.render();
|
||||
attachPanelStyler(categoryView, this._themeService);
|
||||
|
||||
if (!firstOption) {
|
||||
firstOption = serviceOptions[0].name;
|
||||
}
|
||||
}
|
||||
if (this.height) {
|
||||
this.splitview.layout(this.height - 120);
|
||||
}
|
||||
let body = new Builder(this._body);
|
||||
body.append(optionsContentBuilder.getHTMLElement(), 0);
|
||||
this.show();
|
||||
let firstOptionWidget = this._optionElements[firstOption].optionWidget;
|
||||
this.registerStyling();
|
||||
firstOptionWidget.focus();
|
||||
}
|
||||
|
||||
protected layout(height?: number): void {
|
||||
this.height = height;
|
||||
// account for padding and the details view
|
||||
this.splitview.layout(this.height - 120 - 20);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
super.dispose();
|
||||
for (let optionName in this._optionElements) {
|
||||
let widget: Widget = this._optionElements[optionName].optionWidget;
|
||||
widget.dispose();
|
||||
delete this._optionElements[optionName];
|
||||
}
|
||||
}
|
||||
}
|
||||
179
src/sql/workbench/browser/modal/optionsDialogHelper.ts
Normal file
179
src/sql/workbench/browser/modal/optionsDialogHelper.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import * as DialogHelper from './dialogHelper';
|
||||
import { Builder } from 'vs/base/browser/builder';
|
||||
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
|
||||
import * as types from 'vs/base/common/types';
|
||||
import * as sqlops from 'sqlops';
|
||||
import { localize } from 'vs/nls';
|
||||
import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
|
||||
|
||||
export interface IOptionElement {
|
||||
optionWidget: any;
|
||||
option: sqlops.ServiceOption;
|
||||
optionValue: any;
|
||||
}
|
||||
|
||||
export function createOptionElement(option: sqlops.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
|
||||
optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
|
||||
let possibleInputs: string[] = [];
|
||||
let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
|
||||
let optionWidget: any;
|
||||
let inputElement: HTMLElement;
|
||||
let missingErrorMessage = localize('optionsDialog.missingRequireField', ' is required.');
|
||||
let invalidInputMessage = localize('optionsDialog.invalidInput', 'Invalid input. Numeric value expected.');
|
||||
|
||||
if (option.valueType === ServiceOptionType.number) {
|
||||
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => {
|
||||
if (!value && option.isRequired) {
|
||||
return { type: MessageType.ERROR, content: option.displayName + missingErrorMessage };
|
||||
} else if (!types.isNumber(Number(value))) {
|
||||
return { type: MessageType.ERROR, content: invalidInputMessage };
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
ariaLabel: option.displayName
|
||||
});
|
||||
optionWidget.value = optionValue;
|
||||
inputElement = findElement(rowContainer, 'input');
|
||||
} else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) {
|
||||
optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService, undefined, { ariaLabel: option.displayName });
|
||||
DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
|
||||
inputElement = findElement(rowContainer, 'monaco-select-box');
|
||||
} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
|
||||
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
|
||||
},
|
||||
ariaLabel: option.displayName
|
||||
});
|
||||
optionWidget.value = optionValue;
|
||||
if (option.valueType === ServiceOptionType.password) {
|
||||
optionWidget.inputElement.type = 'password';
|
||||
}
|
||||
inputElement = findElement(rowContainer, 'input');
|
||||
}
|
||||
optionsMap[option.name] = { optionWidget: optionWidget, option: option, optionValue: optionValue };
|
||||
inputElement.onfocus = () => onFocus(option.name);
|
||||
}
|
||||
|
||||
export function getOptionValueAndCategoryValues(option: sqlops.ServiceOption, options: { [optionName: string]: any }, possibleInputs: string[]): any {
|
||||
var optionValue = option.defaultValue;
|
||||
if (options[option.name]) {
|
||||
// if the value type is boolean, the option value can be either boolean or string
|
||||
if (option.valueType === ServiceOptionType.boolean) {
|
||||
if (options[option.name] === true || options[option.name] === trueInputValue) {
|
||||
optionValue = trueInputValue;
|
||||
} else {
|
||||
optionValue = falseInputValue;
|
||||
}
|
||||
} else {
|
||||
optionValue = options[option.name];
|
||||
}
|
||||
}
|
||||
|
||||
if (option.valueType === ServiceOptionType.boolean || option.valueType === ServiceOptionType.category) {
|
||||
// If the option is not required, the empty string should be add at the top of possible choices
|
||||
if (!option.isRequired) {
|
||||
possibleInputs.push('');
|
||||
}
|
||||
|
||||
if (option.valueType === ServiceOptionType.boolean) {
|
||||
possibleInputs.push(trueInputValue, falseInputValue);
|
||||
} else {
|
||||
option.categoryValues.map(c => possibleInputs.push(c.name));
|
||||
}
|
||||
|
||||
// If the option value is not set and default value is null, the option value should be set to the first possible input.
|
||||
if (optionValue === null || optionValue === undefined) {
|
||||
optionValue = possibleInputs[0];
|
||||
}
|
||||
}
|
||||
return optionValue;
|
||||
}
|
||||
|
||||
export function validateInputs(optionsMap: { [optionName: string]: IOptionElement }): boolean {
|
||||
let isValid = true;
|
||||
let isFocused = false;
|
||||
for (var optionName in optionsMap) {
|
||||
var optionElement: IOptionElement = optionsMap[optionName];
|
||||
var widget = optionElement.optionWidget;
|
||||
var isInputBox = (optionElement.option.valueType === ServiceOptionType.string ||
|
||||
optionElement.option.valueType === ServiceOptionType.password ||
|
||||
optionElement.option.valueType === ServiceOptionType.number);
|
||||
|
||||
if (isInputBox) {
|
||||
if (!widget.validate()) {
|
||||
isValid = false;
|
||||
if (!isFocused) {
|
||||
isFocused = true;
|
||||
widget.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return isValid;
|
||||
}
|
||||
|
||||
export function updateOptions(options: { [optionName: string]: any }, optionsMap: { [optionName: string]: IOptionElement }): void {
|
||||
for (var optionName in optionsMap) {
|
||||
var optionElement: IOptionElement = optionsMap[optionName];
|
||||
if (optionElement.optionWidget.value !== options[optionName]) {
|
||||
if (!optionElement.optionWidget.value && options[optionName]) {
|
||||
delete options[optionName];
|
||||
}
|
||||
if (optionElement.optionWidget.value) {
|
||||
if (optionElement.option.valueType === ServiceOptionType.boolean) {
|
||||
options[optionName] = (optionElement.optionWidget.value === trueInputValue) ? true : false;
|
||||
} else {
|
||||
options[optionName] = optionElement.optionWidget.value;
|
||||
}
|
||||
}
|
||||
optionElement.optionValue = options[optionName];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export let trueInputValue: string = 'True';
|
||||
export let falseInputValue: string = 'False';
|
||||
|
||||
export function findElement(container: Builder, className: string): HTMLElement {
|
||||
var elementBuilder: Builder = container;
|
||||
while (elementBuilder.getHTMLElement()) {
|
||||
var htmlElement = elementBuilder.getHTMLElement();
|
||||
if (htmlElement.className.startsWith(className)) {
|
||||
break;
|
||||
}
|
||||
elementBuilder = elementBuilder.child(0);
|
||||
}
|
||||
return elementBuilder.getHTMLElement();
|
||||
}
|
||||
|
||||
export function groupOptionsByCategory(options: sqlops.ServiceOption[]): { [category: string]: sqlops.ServiceOption[] } {
|
||||
var connectionOptionsMap: { [category: string]: sqlops.ServiceOption[] } = {};
|
||||
options.forEach(option => {
|
||||
var groupName = option.groupName;
|
||||
if (groupName === null || groupName === undefined) {
|
||||
groupName = 'General';
|
||||
}
|
||||
|
||||
if (!!connectionOptionsMap[groupName]) {
|
||||
connectionOptionsMap[groupName].push(option);
|
||||
} else {
|
||||
connectionOptionsMap[groupName] = [option];
|
||||
}
|
||||
});
|
||||
return connectionOptionsMap;
|
||||
}
|
||||
Reference in New Issue
Block a user