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

connect dialog ux improvement (#3105)

Browse Source 
* connect dialog ux improvement

* more style updates
This commit is contained in:
Alan Ren
2018-11-04 17:10:05 -08:00
committed by GitHub
parent 00cd772cbc
commit f36f3ffd21
15 changed files with 123 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/mssql/package.json
View File

@@ -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",

3
extensions/theme-carbon/themes/dark_carbon.json
View File

@@ -67,7 +67,8 @@
"panel.background": "#212121",
"panel.border": "#515151",
"panelTitle.activeForeground": "#ffffff",
"panelTitle.inactiveForeground": "#888888"
"panelTitle.inactiveForeground": "#888888",
"panelTitle.activeBorder": "#026dc8"
},
"tokenColors": [
{

3
extensions/theme-carbon/themes/light_carbon.json
View File

@@ -77,7 +77,8 @@
"panel.background": "#ffffff",
"panel.border": "#c8c8c8",
"panelTitle.activeForeground": "#212121",
"panelTitle.inactiveForeground": "#757575"
"panelTitle.inactiveForeground": "#757575",
"panelTitle.activeBorder": "#026dc8"
},
"tokenColors": [
{

8
resources/xlf/sqlops-core/sql.xlf
View File

@@ -611,7 +611,7 @@
</body></file>
<file original="src/sql/parts/connection/common/connectionActions" source-language="en" datatype="plaintext"><body>
<trans-unit id="ClearRecentlyUsedLabel">
<source xml:lang="en">Clear Recent Connections List</source>
<source xml:lang="en">Clear List</source>
</trans-unit>
<trans-unit id="ClearedRecentConnections">
<source xml:lang="en">Recent connections list cleared</source>
@@ -1039,10 +1039,10 @@
<source xml:lang="en">Connection</source>
</trans-unit>
<trans-unit id="recentConnectionTitle">
<source xml:lang="en">Recent connections</source>
<source xml:lang="en">Recent Connections</source>
</trans-unit>
<trans-unit id="savedConnectionTitle">
<source xml:lang="en">Saved connections</source>
<source xml:lang="en">Saved Connections</source>
</trans-unit>
<trans-unit id="connectType">
<source xml:lang="en">Connection type</source>
@@ -1644,7 +1644,7 @@
</body></file>
<file original="src/sql/parts/connection/connectionDialog/advancedPropertiesController" source-language="en" datatype="plaintext"><body>
<trans-unit id="connectionAdvancedProperties">
<source xml:lang="en">Advanced properties</source>
<source xml:lang="en">Advanced Properties</source>
</trans-unit>
<trans-unit id="advancedProperties.discard">
<source xml:lang="en">Discard</source>

3
src/sql/base/browser/ui/modal/media/modal.css
View File

@@ -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 {

58
src/sql/base/browser/ui/modal/media/optionsDialog.css
View File

@@ -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{

2
src/sql/base/browser/ui/modal/optionsDialog.ts
View File

@@ -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;
});

4
src/sql/base/browser/ui/panel/media/panel.css
View File

@@ -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 {

1
src/sql/base/browser/ui/panel/panelStyles.ts
View File

@@ -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 {

4
src/sql/parts/connection/common/connectionActions.ts
View File

@@ -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<void>();
@@ -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);
});

2
src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts
View File

@@ -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());

28
src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts
View File

@@ -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) => {

47
src/sql/parts/connection/connectionDialog/media/connectionDialog.css
View File

@@ -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;
}

1
src/sql/parts/connection/connectionDialog/media/sqlConnection.css
View File

@@ -5,6 +5,5 @@
.advanced-button {
width: 100px;
padding-right:8px;
padding-bottom: 5px;
}

4
src/sql/parts/objectExplorer/viewlet/treeCreationUtils.ts
View File

@@ -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")
});
}