ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -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, "specialValueType": null,
"isIdentity": false, "isIdentity": false,
"name": "asynchronousProcessing", "name": "asynchronousProcessing",
"displayName": "Asynchronous processing enabled", "displayName": "Asynchronous processing",
"description": "When true, enables usage of the Asynchronous functionality in the .Net Framework Data Provider", "description": "When true, enables usage of the Asynchronous functionality in the .Net Framework Data Provider",
"groupName": "Initialization", "groupName": "Initialization",
"valueType": "boolean", "valueType": "boolean",
@@ -387,7 +387,7 @@
"specialValueType": null, "specialValueType": null,
"isIdentity": false, "isIdentity": false,
"name": "columnEncryptionSetting", "name": "columnEncryptionSetting",
"displayName": "Column encryption setting", "displayName": "Column encryption",
"description": "Default column encryption setting for all the commands on the connection", "description": "Default column encryption setting for all the commands on the connection",
"groupName": "Security", "groupName": "Security",
"valueType": "category", "valueType": "category",

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

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

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

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

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

@@ -611,7 +611,7 @@
</body></file> </body></file>
<file original="src/sql/parts/connection/common/connectionActions" source-language="en" datatype="plaintext"><body> <file original="src/sql/parts/connection/common/connectionActions" source-language="en" datatype="plaintext"><body>
<trans-unit id="ClearRecentlyUsedLabel"> <trans-unit id="ClearRecentlyUsedLabel">
<source xml:lang="en">Clear Recent Connections List</source> <source xml:lang="en">Clear List</source>
</trans-unit> </trans-unit>
<trans-unit id="ClearedRecentConnections"> <trans-unit id="ClearedRecentConnections">
<source xml:lang="en">Recent connections list cleared</source> <source xml:lang="en">Recent connections list cleared</source>
@@ -1039,10 +1039,10 @@
<source xml:lang="en">Connection</source> <source xml:lang="en">Connection</source>
</trans-unit> </trans-unit>
<trans-unit id="recentConnectionTitle"> <trans-unit id="recentConnectionTitle">
<source xml:lang="en">Recent connections</source> <source xml:lang="en">Recent Connections</source>
</trans-unit> </trans-unit>
<trans-unit id="savedConnectionTitle"> <trans-unit id="savedConnectionTitle">
<source xml:lang="en">Saved connections</source> <source xml:lang="en">Saved Connections</source>
</trans-unit> </trans-unit>
<trans-unit id="connectType"> <trans-unit id="connectType">
<source xml:lang="en">Connection type</source> <source xml:lang="en">Connection type</source>
@@ -1644,7 +1644,7 @@
</body></file> </body></file>
<file original="src/sql/parts/connection/connectionDialog/advancedPropertiesController" source-language="en" datatype="plaintext"><body> <file original="src/sql/parts/connection/connectionDialog/advancedPropertiesController" source-language="en" datatype="plaintext"><body>
<trans-unit id="connectionAdvancedProperties"> <trans-unit id="connectionAdvancedProperties">
<source xml:lang="en">Advanced properties</source> <source xml:lang="en">Advanced Properties</source>
</trans-unit> </trans-unit>
<trans-unit id="advancedProperties.discard"> <trans-unit id="advancedProperties.discard">
<source xml:lang="en">Discard</source> <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 { .modal .modal-title {
font-size: 15px; font-size: 15px;
font-weight: 600;
} }
.modal .modal-title-icon { .modal .modal-title-icon {
@@ -147,7 +148,7 @@
} }
.modal .footer-button { .modal .footer-button {
margin-right: 5px; margin-left: 5px;
} }
.modal .right-footer .footer-button:last-of-type { .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 { .optionsDialog-options-groups {
padding: 15px; margin-top: 10px;
height: calc(100% - 150px); flex: 1 1;
overflow-y: auto; 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 { .backButtonIcon {
content: url('back.svg'); content: url('back.svg');
width: 20px; width: 20px;
@@ -33,21 +56,42 @@
cursor: pointer; cursor: pointer;
} }
.vs-dark.monaco-shell .backButtonIcon { .hc-black .backButtonIcon,
.vs-dark .backButtonIcon {
content: url('back_inverse.svg'); content: url('back_inverse.svg');
} }
.optionsDialog-description { .optionsDialog-description {
padding: 15px; height: 90px;
overflow-y: auto; 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 { .optionsDialog-options {
height: calc(100% - 30px); height: 100%;
display: flex;
flex-direction: column;
} }
.optionsDialog-description-content { .optionsDialog-description-content {
padding: 10px; padding-top: 10px;
padding-left: 25px;
} }
.optionsDialog-table{ .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); let builder = new Builder(this._body);
builder.div({ class: 'Connection-divider' }, (dividerContainer) => { builder.div({}, (dividerContainer) => {
this._dividerBuilder = 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 { .tabbedPanel .tabList .tab .tabLabel {
text-transform: uppercase; font-size: 14px;
font-size: 13px;
padding-bottom: 4px; padding-bottom: 4px;
font-weight: 600;
} }
.tabbedPanel.vertical .tabList .tab .tabLabel { .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 { .tabbedPanel > .title .tabList .tab .tabLabel.active {
color: ${titleActive}; color: ${titleActive};
border-bottom-color: ${titleActiveBorder}; border-bottom-color: ${titleActiveBorder};
border-bottom-width: 2px;
} }
.tabbedPanel > .title .tabList .tab-header.active { .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 { export class ClearRecentConnectionsAction extends Action {
public static ID = 'clearRecentConnectionsAction'; 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'; public static ICON = 'search-action clear-search-results';
private _onRecentConnectionsRemoved = new Emitter<void>(); private _onRecentConnectionsRemoved = new Emitter<void>();
@@ -83,7 +83,7 @@ export class ClearRecentConnectionsAction extends Action {
{ key: nls.localize('connectionAction.no', 'No'), value: false } { 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); let confirm = choices.find(x => x.key === choice);
resolve(confirm && confirm.value); resolve(confirm && confirm.value);
}); });

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

@@ -38,7 +38,7 @@ export class AdvancedPropertiesController {
public get advancedDialog() { public get advancedDialog() {
if (!this._advancedDialog) { if (!this._advancedDialog) {
this._advancedDialog = this._instantiationService.createInstance( 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.cancelLabel = localize('advancedProperties.discard', 'Discard');
this._advancedDialog.onCloseEvent(() => this._onCloseAdvancedProperties()); this._advancedDialog.onCloseEvent(() => this._onCloseAdvancedProperties());
this._advancedDialog.onOk(() => this.handleOnOk()); 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 * as DOM from 'vs/base/browser/dom';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
export interface OnShowUIResponse { export interface OnShowUIResponse {
selectedProviderType: string; selectedProviderType: string;
@@ -49,7 +50,7 @@ export class ConnectionDialogWidget extends Modal {
private _noRecentConnectionBuilder: Builder; private _noRecentConnectionBuilder: Builder;
private _savedConnectionBuilder: Builder; private _savedConnectionBuilder: Builder;
private _noSavedConnectionBuilder: Builder; private _noSavedConnectionBuilder: Builder;
private _dividerBuilder: Builder; private _connectionDetailTitle: Builder;
private _connectButton: Button; private _connectButton: Button;
private _closeButton: Button; private _closeButton: Button;
private _providerTypeSelectBox: SelectBox; private _providerTypeSelectBox: SelectBox;
@@ -143,7 +144,7 @@ export class ConnectionDialogWidget extends Modal {
this._panel = new TabbedPanel(connectionContainer.getHTMLElement()); this._panel = new TabbedPanel(connectionContainer.getHTMLElement());
this._recentConnectionTabId = this._panel.pushTab({ this._recentConnectionTabId = this._panel.pushTab({
identifier: 'recent_connection', identifier: 'recent_connection',
title: localize('recentConnectionTitle', 'Recent connections'), title: localize('recentConnectionTitle', 'Recent Connections'),
view: { view: {
render: c => { render: c => {
recentConnectionTab.appendTo(c); recentConnectionTab.appendTo(c);
@@ -154,7 +155,7 @@ export class ConnectionDialogWidget extends Modal {
let savedConnectionTabId = this._panel.pushTab({ let savedConnectionTabId = this._panel.pushTab({
identifier: 'saved_connection', identifier: 'saved_connection',
title: localize('savedConnectionTitle', 'Saved connections'), title: localize('savedConnectionTitle', 'Saved Connections'),
view: { view: {
layout: () => { }, layout: () => { },
render: c => { render: c => {
@@ -179,8 +180,9 @@ export class ConnectionDialogWidget extends Modal {
} }
}); });
this._bodyBuilder.div({ class: 'Connection-divider' }, (dividerContainer) => { this._bodyBuilder.div({ class: 'connection-details-title' }, (dividerContainer) => {
this._dividerBuilder = dividerContainer; this._connectionDetailTitle = dividerContainer;
this._connectionDetailTitle.text(localize('connectionDetailsTitle', 'Connection Details'));
}); });
this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => { this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => {
@@ -217,10 +219,12 @@ export class ConnectionDialogWidget extends Modal {
private updateTheme(theme: IColorTheme): void { private updateTheme(theme: IColorTheme): void {
let borderColor = theme.getColor(contrastBorder); let borderColor = theme.getColor(contrastBorder);
let border = borderColor ? borderColor.toString() : null; let border = borderColor ? borderColor.toString() : null;
if (this._dividerBuilder) { let backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);
this._dividerBuilder.style('border-top-width', border ? '1px' : null); if (this._connectionDetailTitle) {
this._dividerBuilder.style('border-top-style', border ? 'solid' : null); this._connectionDetailTitle.style('border-width', border ? '1px 0px' : null);
this._dividerBuilder.style('border-top-color', border); 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 { private createRecentConnectionList(): void {
this._recentConnectionBuilder.div({ class: 'connection-recent-content' }, (recentConnectionContainer) => { this._recentConnectionBuilder.div({ class: 'connection-recent-content' }, (recentConnectionContainer) => {
let recentHistoryLabel = localize('recentHistory', 'Recent history');
recentConnectionContainer.div({ class: 'recent-titles-container' }, (container) => { recentConnectionContainer.div({ class: 'recent-titles-container' }, (container) => {
container.div({ class: 'connection-history-label' }, (recentTitle) => {
recentTitle.text(recentHistoryLabel);
});
container.div({ class: 'connection-history-actions' }, (actionsContainer) => { container.div({ class: 'connection-history-actions' }, (actionsContainer) => {
this._actionbar = this._register(new ActionBar(actionsContainer.getHTMLElement(), { animated: false })); this._actionbar = this._register(new ActionBar(actionsContainer.getHTMLElement(), { animated: false }));
let clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL); let clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL);
clearAction.useConfirmationMessage = true; clearAction.useConfirmationMessage = true;
clearAction.onRecentConnectionsRemoved(() => this.open(false)); 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) => { 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 { .connection-input {
padding-right:8px;
width: 200px; width: 200px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.connection-dialog { .connection-dialog {
height: calc(100% - 20px); height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
} }
.connection-dialog .tabbedPanel { .connection-dialog .tabbedPanel {
border-top-color: transparent; border-top-color: transparent;
height: calc(100% - 350px); flex: 1 1;
display: block;
min-height: 120px; 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 { .connection-recent, .connection-saved {
margin: 15px; margin: 5px;
height: calc(100% - 60px); flex: 1 1;
overflow-y: auto; overflow-y: auto;
} }
@@ -45,6 +55,8 @@
.recent-titles-container { .recent-titles-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 5px;
flex: 0 0 auto;
} }
.connection-provider-info { .connection-provider-info {
@@ -53,7 +65,13 @@
} }
.connection-recent-content { .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 { .connection-table-content {
@@ -66,8 +84,9 @@
} }
.connection-type { .connection-type {
margin: 15px; flex: 0 0 auto;
overflow-y: hidden; overflow: hidden;
margin: 0px 13px;
} }
.connection-dialog .connection-history-actions .action-label.icon { .connection-dialog .connection-history-actions .action-label.icon {
@@ -76,8 +95,9 @@
line-height: 20px; line-height: 20px;
min-width: 20px; min-width: 20px;
background-size: 16px; background-size: 16px;
background-position: center center; background-position: 2px center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 25px;
} }
.search-action.clear-search-results { .search-action.clear-search-results {
@@ -88,3 +108,10 @@
.hc-black .search-action.clear-search-results { .hc-black .search-action.clear-search-results {
background: url('clear-search-results-dark.svg'); 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 { .advanced-button {
width: 100px; width: 100px;
padding-right:8px;
padding-bottom: 5px; 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 }, return new Tree(treeContainer, { dataSource, renderer, controller, dnd, filter, sorter, accessibilityProvider },
{ {
indentPixels: 10, indentPixels: 0,
twistiePixels: 20, twistiePixels: 0,
ariaLabel: nls.localize('treeAriaLabel', "Recent Connections") ariaLabel: nls.localize('treeAriaLabel', "Recent Connections")
}); });
} }