diff --git a/extensions/mssql/package.json b/extensions/mssql/package.json index 023e235259..f1822193b1 100644 --- a/extensions/mssql/package.json +++ b/extensions/mssql/package.json @@ -345,7 +345,7 @@ "specialValueType": null, "isIdentity": false, "name": "asynchronousProcessing", - "displayName": "Asynchronous processing enabled", + "displayName": "Asynchronous processing", "description": "When true, enables usage of the Asynchronous functionality in the .Net Framework Data Provider", "groupName": "Initialization", "valueType": "boolean", @@ -387,7 +387,7 @@ "specialValueType": null, "isIdentity": false, "name": "columnEncryptionSetting", - "displayName": "Column encryption setting", + "displayName": "Column encryption", "description": "Default column encryption setting for all the commands on the connection", "groupName": "Security", "valueType": "category", diff --git a/extensions/theme-carbon/themes/dark_carbon.json b/extensions/theme-carbon/themes/dark_carbon.json index 674c8b176d..a7d421b0d7 100644 --- a/extensions/theme-carbon/themes/dark_carbon.json +++ b/extensions/theme-carbon/themes/dark_carbon.json @@ -67,7 +67,8 @@ "panel.background": "#212121", "panel.border": "#515151", "panelTitle.activeForeground": "#ffffff", - "panelTitle.inactiveForeground": "#888888" + "panelTitle.inactiveForeground": "#888888", + "panelTitle.activeBorder": "#026dc8" }, "tokenColors": [ { diff --git a/extensions/theme-carbon/themes/light_carbon.json b/extensions/theme-carbon/themes/light_carbon.json index 4db0a032b2..86c838cbdc 100644 --- a/extensions/theme-carbon/themes/light_carbon.json +++ b/extensions/theme-carbon/themes/light_carbon.json @@ -77,7 +77,8 @@ "panel.background": "#ffffff", "panel.border": "#c8c8c8", "panelTitle.activeForeground": "#212121", - "panelTitle.inactiveForeground": "#757575" + "panelTitle.inactiveForeground": "#757575", + "panelTitle.activeBorder": "#026dc8" }, "tokenColors": [ { diff --git a/resources/xlf/sqlops-core/sql.xlf b/resources/xlf/sqlops-core/sql.xlf index da0ecd7c64..bc2469d8b8 100644 --- a/resources/xlf/sqlops-core/sql.xlf +++ b/resources/xlf/sqlops-core/sql.xlf @@ -611,7 +611,7 @@ - Clear Recent Connections List + Clear List Recent connections list cleared @@ -1039,10 +1039,10 @@ Connection - Recent connections + Recent Connections - Saved connections + Saved Connections Connection type @@ -1644,7 +1644,7 @@ - Advanced properties + Advanced Properties Discard diff --git a/src/sql/base/browser/ui/modal/media/modal.css b/src/sql/base/browser/ui/modal/media/modal.css index abe53a1d80..ec699249c2 100644 --- a/src/sql/base/browser/ui/modal/media/modal.css +++ b/src/sql/base/browser/ui/modal/media/modal.css @@ -56,6 +56,7 @@ .modal .modal-title { font-size: 15px; + font-weight: 600; } .modal .modal-title-icon { @@ -147,7 +148,7 @@ } .modal .footer-button { - margin-right: 5px; + margin-left: 5px; } .modal .right-footer .footer-button:last-of-type { diff --git a/src/sql/base/browser/ui/modal/media/optionsDialog.css b/src/sql/base/browser/ui/modal/media/optionsDialog.css index 1c13032185..c87a8ea065 100644 --- a/src/sql/base/browser/ui/modal/media/optionsDialog.css +++ b/src/sql/base/browser/ui/modal/media/optionsDialog.css @@ -20,11 +20,34 @@ } .optionsDialog-options-groups { - padding: 15px; - height: calc(100% - 150px); + 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; @@ -33,21 +56,42 @@ cursor: pointer; } -.vs-dark.monaco-shell .backButtonIcon { +.hc-black .backButtonIcon, +.vs-dark .backButtonIcon { content: url('back_inverse.svg'); } .optionsDialog-description { - padding: 15px; - overflow-y: auto; + 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: calc(100% - 30px); + height: 100%; + display: flex; + flex-direction: column; } .optionsDialog-description-content { - padding: 10px; + padding-top: 10px; + padding-left: 25px; } .optionsDialog-table{ diff --git a/src/sql/base/browser/ui/modal/optionsDialog.ts b/src/sql/base/browser/ui/modal/optionsDialog.ts index 602d554ff6..30e3767164 100644 --- a/src/sql/base/browser/ui/modal/optionsDialog.ts +++ b/src/sql/base/browser/ui/modal/optionsDialog.ts @@ -125,7 +125,7 @@ export class OptionsDialog extends Modal { }); let builder = new Builder(this._body); - builder.div({ class: 'Connection-divider' }, (dividerContainer) => { + builder.div({}, (dividerContainer) => { this._dividerBuilder = dividerContainer; }); diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index 56b8ca2216..78a0e08024 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -46,9 +46,9 @@ panel { } .tabbedPanel .tabList .tab .tabLabel { - text-transform: uppercase; - font-size: 13px; + font-size: 14px; padding-bottom: 4px; + font-weight: 600; } .tabbedPanel.vertical .tabList .tab .tabLabel { diff --git a/src/sql/base/browser/ui/panel/panelStyles.ts b/src/sql/base/browser/ui/panel/panelStyles.ts index c385fcd843..f34407b983 100644 --- a/src/sql/base/browser/ui/panel/panelStyles.ts +++ b/src/sql/base/browser/ui/panel/panelStyles.ts @@ -19,6 +19,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { .tabbedPanel > .title .tabList .tab .tabLabel.active { color: ${titleActive}; border-bottom-color: ${titleActiveBorder}; + border-bottom-width: 2px; } .tabbedPanel > .title .tabList .tab-header.active { diff --git a/src/sql/parts/connection/common/connectionActions.ts b/src/sql/parts/connection/common/connectionActions.ts index 1ff3c4582b..656e924b6b 100644 --- a/src/sql/parts/connection/common/connectionActions.ts +++ b/src/sql/parts/connection/common/connectionActions.ts @@ -26,7 +26,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService export class ClearRecentConnectionsAction extends Action { public static ID = 'clearRecentConnectionsAction'; - public static LABEL = nls.localize('ClearRecentlyUsedLabel', 'Clear Recent Connections List'); + public static LABEL = nls.localize('ClearRecentlyUsedLabel', 'Clear List'); public static ICON = 'search-action clear-search-results'; private _onRecentConnectionsRemoved = new Emitter(); @@ -83,7 +83,7 @@ export class ClearRecentConnectionsAction extends Action { { key: nls.localize('connectionAction.no', 'No'), value: false } ]; - self._quickOpenService.pick(choices.map(x => x.key), { placeHolder: nls.localize('ClearRecentlyUsedLabel', 'Clear Recent Connections List'), ignoreFocusLost: true }).then((choice) => { + self._quickOpenService.pick(choices.map(x => x.key), { placeHolder: nls.localize('ClearRecentlyUsedLabel', 'Clear List'), ignoreFocusLost: true }).then((choice) => { let confirm = choices.find(x => x.key === choice); resolve(confirm && confirm.value); }); diff --git a/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts b/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts index 66a9f82e61..3ee33eac9f 100644 --- a/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts +++ b/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts @@ -38,7 +38,7 @@ export class AdvancedPropertiesController { public get advancedDialog() { if (!this._advancedDialog) { this._advancedDialog = this._instantiationService.createInstance( - OptionsDialog, localize('connectionAdvancedProperties', 'Advanced properties'), TelemetryKeys.ConnectionAdvancedProperties, { hasBackButton: true }); + OptionsDialog, localize('connectionAdvancedProperties', 'Advanced Properties'), TelemetryKeys.ConnectionAdvancedProperties, { hasBackButton: true }); this._advancedDialog.cancelLabel = localize('advancedProperties.discard', 'Discard'); this._advancedDialog.onCloseEvent(() => this._onCloseAdvancedProperties()); this._advancedDialog.onOk(() => this.handleOnOk()); diff --git a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts index 88237805a2..f52c8ca294 100644 --- a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts @@ -37,6 +37,7 @@ import * as styler from 'vs/platform/theme/common/styler'; import * as DOM from 'vs/base/browser/dom'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; +import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; export interface OnShowUIResponse { selectedProviderType: string; @@ -49,7 +50,7 @@ export class ConnectionDialogWidget extends Modal { private _noRecentConnectionBuilder: Builder; private _savedConnectionBuilder: Builder; private _noSavedConnectionBuilder: Builder; - private _dividerBuilder: Builder; + private _connectionDetailTitle: Builder; private _connectButton: Button; private _closeButton: Button; private _providerTypeSelectBox: SelectBox; @@ -143,7 +144,7 @@ export class ConnectionDialogWidget extends Modal { this._panel = new TabbedPanel(connectionContainer.getHTMLElement()); this._recentConnectionTabId = this._panel.pushTab({ identifier: 'recent_connection', - title: localize('recentConnectionTitle', 'Recent connections'), + title: localize('recentConnectionTitle', 'Recent Connections'), view: { render: c => { recentConnectionTab.appendTo(c); @@ -154,7 +155,7 @@ export class ConnectionDialogWidget extends Modal { let savedConnectionTabId = this._panel.pushTab({ identifier: 'saved_connection', - title: localize('savedConnectionTitle', 'Saved connections'), + title: localize('savedConnectionTitle', 'Saved Connections'), view: { layout: () => { }, render: c => { @@ -179,8 +180,9 @@ export class ConnectionDialogWidget extends Modal { } }); - this._bodyBuilder.div({ class: 'Connection-divider' }, (dividerContainer) => { - this._dividerBuilder = dividerContainer; + this._bodyBuilder.div({ class: 'connection-details-title' }, (dividerContainer) => { + this._connectionDetailTitle = dividerContainer; + this._connectionDetailTitle.text(localize('connectionDetailsTitle', 'Connection Details')); }); this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => { @@ -217,10 +219,12 @@ export class ConnectionDialogWidget extends Modal { 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); + let backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND); + if (this._connectionDetailTitle) { + this._connectionDetailTitle.style('border-width', border ? '1px 0px' : null); + this._connectionDetailTitle.style('border-style', border ? 'solid none' : null); + this._connectionDetailTitle.style('border-color', border); + this._connectionDetailTitle.style('background-color', backgroundColor ? backgroundColor.toString() : null); } } @@ -277,17 +281,13 @@ export class ConnectionDialogWidget extends Modal { private createRecentConnectionList(): void { this._recentConnectionBuilder.div({ class: 'connection-recent-content' }, (recentConnectionContainer) => { - let recentHistoryLabel = localize('recentHistory', 'Recent history'); recentConnectionContainer.div({ class: 'recent-titles-container' }, (container) => { - container.div({ class: 'connection-history-label' }, (recentTitle) => { - recentTitle.text(recentHistoryLabel); - }); container.div({ class: 'connection-history-actions' }, (actionsContainer) => { this._actionbar = this._register(new ActionBar(actionsContainer.getHTMLElement(), { animated: false })); let clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL); clearAction.useConfirmationMessage = true; clearAction.onRecentConnectionsRemoved(() => this.open(false)); - this._actionbar.push(clearAction, { icon: true, label: false }); + this._actionbar.push(clearAction, { icon: true, label: true }); }); }); recentConnectionContainer.div({ class: 'server-explorer-viewlet' }, (divContainer: Builder) => { diff --git a/src/sql/parts/connection/connectionDialog/media/connectionDialog.css b/src/sql/parts/connection/connectionDialog/media/connectionDialog.css index 3e7d15fb92..7f652c7450 100644 --- a/src/sql/parts/connection/connectionDialog/media/connectionDialog.css +++ b/src/sql/parts/connection/connectionDialog/media/connectionDialog.css @@ -9,25 +9,35 @@ } .connection-input { - padding-right:8px; width: 200px; padding-bottom: 5px; } .connection-dialog { - height: calc(100% - 20px); + height: 100%; + display: flex; + flex-direction: column; + overflow-x: hidden; + overflow-y: auto; } .connection-dialog .tabbedPanel { border-top-color: transparent; - height: calc(100% - 350px); - display: block; + flex: 1 1; min-height: 120px; + overflow: hidden; + margin: 0px 11px; +} +.connection-dialog .tabBody { + overflow: hidden; + flex: 1 1; + display: flex; + flex-direction: column; } .connection-recent, .connection-saved { - margin: 15px; - height: calc(100% - 60px); + margin: 5px; + flex: 1 1; overflow-y: auto; } @@ -45,6 +55,8 @@ .recent-titles-container { display: flex; justify-content: space-between; + margin: 5px; + flex: 0 0 auto; } .connection-provider-info { @@ -53,7 +65,13 @@ } .connection-recent-content { - height: calc(100% - 20px); + height: 100%; + display: flex; + flex-direction: column; +} + +.connection-recent-content .server-explorer-viewlet { + flex: 1 1; } .connection-table-content { @@ -66,8 +84,9 @@ } .connection-type { - margin: 15px; - overflow-y: hidden; + flex: 0 0 auto; + overflow: hidden; + margin: 0px 13px; } .connection-dialog .connection-history-actions .action-label.icon { @@ -76,8 +95,9 @@ line-height: 20px; min-width: 20px; background-size: 16px; - background-position: center center; + background-position: 2px center; background-repeat: no-repeat; + padding-left: 25px; } .search-action.clear-search-results { @@ -87,4 +107,11 @@ .vs-dark .search-action.clear-search-results, .hc-black .search-action.clear-search-results { background: url('clear-search-results-dark.svg'); +} + +.connection-details-title { + font-size: 14px; + margin: 5px 0px; + padding: 5px 15px; + font-weight: 600; } \ No newline at end of file diff --git a/src/sql/parts/connection/connectionDialog/media/sqlConnection.css b/src/sql/parts/connection/connectionDialog/media/sqlConnection.css index e25c3b72d5..295b6e55d4 100644 --- a/src/sql/parts/connection/connectionDialog/media/sqlConnection.css +++ b/src/sql/parts/connection/connectionDialog/media/sqlConnection.css @@ -5,6 +5,5 @@ .advanced-button { width: 100px; - padding-right:8px; padding-bottom: 5px; } \ No newline at end of file diff --git a/src/sql/parts/objectExplorer/viewlet/treeCreationUtils.ts b/src/sql/parts/objectExplorer/viewlet/treeCreationUtils.ts index d0828319d3..e10c2f4f78 100644 --- a/src/sql/parts/objectExplorer/viewlet/treeCreationUtils.ts +++ b/src/sql/parts/objectExplorer/viewlet/treeCreationUtils.ts @@ -31,8 +31,8 @@ export class TreeCreationUtils { return new Tree(treeContainer, { dataSource, renderer, controller, dnd, filter, sorter, accessibilityProvider }, { - indentPixels: 10, - twistiePixels: 20, + indentPixels: 0, + twistiePixels: 0, ariaLabel: nls.localize('treeAriaLabel', "Recent Connections") }); }