ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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
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;
}