Wizard message UI improvement (#2971)

* improve the wizard message experience - WIP

* undo gitignorechanges

* fix expand button issue

* fix the cursor issue

* use flex to control height

* toggle message detail support

* apply style

* new images

* use template string

* address comments
This commit is contained in:
Alan Ren
2018-10-22 23:53:28 -07:00
committed by GitHub
parent 29cc57f52a
commit 82486ee22e
38 changed files with 339 additions and 105 deletions

View File

@@ -33,6 +33,7 @@ import { AccountListRenderer, AccountListDelegate } from 'sql/parts/accountManag
import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
import { FixedListView } from 'sql/platform/views/fixedListView';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
export interface IProviderViewUiComponent {
view: FixedListView<sqlops.Account>;
@@ -72,13 +73,15 @@ export class AccountDialog extends Modal {
@IContextMenuService private _contextMenuService: IContextMenuService,
@IKeybindingService private _keybindingService: IKeybindingService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(
localize('linkedAccounts', 'Linked accounts'),
TelemetryKeys.Accounts,
partService,
telemetryService,
clipboardService,
contextKeyService,
{ hasSpinner: true }
);

View File

@@ -21,6 +21,7 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
export class AutoOAuthDialog extends Modal {
private _copyAndOpenButton: Button;
@@ -45,13 +46,15 @@ export class AutoOAuthDialog extends Modal {
@IThemeService private _themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(
'',
TelemetryKeys.AutoOAuth,
partService,
telemetryService,
clipboardService,
contextKeyService,
{
isFlyout: true,

View File

@@ -29,6 +29,7 @@ import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/st
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { IAccountPickerService } from 'sql/parts/accountManagement/common/interfaces';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
// TODO: Make the help link 1) extensible (01/08/2018, https://github.com/Microsoft/azuredatastudio/issues/450)
// in case that other non-Azure sign in is to be used
@@ -70,12 +71,14 @@ export class FirewallRuleDialog extends Modal {
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IWindowsService private _windowsService: IWindowsService,
@IClipboardService clipboardService: IClipboardService
) {
super(
localize('createNewFirewallRule', 'Create new firewall rule'),
TelemetryKeys.FireWallRule,
partService,
telemetryService,
clipboardService,
contextKeyService,
{
isFlyout: true,

View File

@@ -36,6 +36,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
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';
export interface OnShowUIResponse {
selectedProviderType: string;
@@ -92,9 +93,10 @@ export class ConnectionDialogWidget extends Modal {
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService
@IContextViewService private _contextViewService: IContextViewService,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, contextKeyService, { hasSpinner: true, hasErrors: true });
super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, clipboardService, contextKeyService, { hasSpinner: true, hasErrors: true });
}
public refresh(): void {

View File

@@ -32,6 +32,7 @@ import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { Orientation } from 'sql/base/browser/ui/splitview/splitview';
import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/parts/dashboard/newDashboardTabDialog/newDashboardTabViewModel';
import { IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
class ExtensionListDelegate implements IVirtualDelegate<IDashboardUITab> {
@@ -125,13 +126,15 @@ export class NewDashboardTabDialog extends Modal {
@IContextMenuService private _contextMenuService: IContextMenuService,
@IKeybindingService private _keybindingService: IKeybindingService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(
localize('newDashboardTab.openDashboardExtensions', 'Open dashboard extensions'),
TelemetryKeys.AddNewDashboardTab,
partService,
telemetryService,
clipboardService,
contextKeyService,
{ hasSpinner: true }
);

View File

@@ -18,6 +18,7 @@ import { Builder } from 'vs/base/browser/builder';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
export class BackupDialog extends Modal {
private _bodyBuilder: Builder;
@@ -31,9 +32,10 @@ export class BackupDialog extends Modal {
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IInstantiationService private _instantiationService: IInstantiationService
@IInstantiationService private _instantiationService: IInstantiationService,
@IClipboardService clipboardService: IClipboardService
) {
super('', TelemetryKeys.Backup, partService, telemetryService, contextKeyService, { isAngular: true, hasErrors: true });
super('', TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isAngular: true, hasErrors: true });
}
protected renderBody(container: HTMLElement) {

View File

@@ -42,6 +42,7 @@ import { Dropdown } from 'sql/base/browser/ui/editableDropdown/dropdown';
import { TabbedPanel, PanelTabIdentifier } from 'sql/base/browser/ui/panel/panel';
import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IFileBrowserDialogController } from 'sql/parts/fileBrowser/common/interfaces';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
interface FileListElement {
logicalFileName: string;
@@ -133,9 +134,10 @@ export class RestoreDialog extends Modal {
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController
@IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, clipboardService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
this._restoreTitle = localize('restoreDialog.restoreTitle', 'Restore database');
this._databaseTitle = localize('restoreDialog.database', 'Database');
this._backupFileTitle = localize('restoreDialog.backupFile', 'Backup file');

View File

@@ -34,6 +34,7 @@ import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { IPartService } from 'vs/workbench/services/part/common/partService';
import * as DOM from 'vs/base/browser/dom';
import * as strings from 'vs/base/common/strings';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
export class FileBrowserDialog extends Modal {
private _viewModel: FileBrowserViewModel;
@@ -56,9 +57,10 @@ export class FileBrowserDialog extends Modal {
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(title, TelemetryKeys.Backup, partService, telemetryService, contextKeyService, { isFlyout: true, hasTitleIcon: false, hasBackButton: true, hasSpinner: true });
super(title, TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isFlyout: true, hasTitleIcon: false, hasBackButton: true, hasSpinner: true });
this._viewModel = this._instantiationService.createInstance(FileBrowserViewModel);
this._viewModel.onAddFileTree(args => this.handleOnAddFileTree(args.rootNode, args.selectedNode, args.expandedNodes));
this._viewModel.onPathValidate(args => this.handleOnValidate(args.succeeded, args.message));

View File

@@ -39,6 +39,7 @@ import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { ICommandService } from 'vs/platform/commands/common/commands';
import { MenuRegistry, ExecuteCommandAction } from 'vs/platform/actions/common/actions';
import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
const labelDisplay = nls.localize("insights.item", "Item");
const valueDisplay = nls.localize("insights.value", "Value");
@@ -131,9 +132,10 @@ export class InsightsDialogView extends Modal {
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@ICommandService private _commandService: ICommandService,
@ICapabilitiesService private _capabilitiesService: ICapabilitiesService
@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
@IClipboardService clipboardService: IClipboardService
) {
super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, contextKeyService);
super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, clipboardService, contextKeyService);
this._model.onDataChange(e => this.build());
}

View File

@@ -26,6 +26,7 @@ import { ServerGroupViewModel } from 'sql/parts/objectExplorer/serverGroupDialog
import { attachButtonStyler, attachModalDialogStyler } from 'sql/common/theme/styler';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
export class ServerGroupDialog extends Modal {
private _bodyBuilder: Builder;
@@ -53,9 +54,10 @@ export class ServerGroupDialog extends Modal {
@IThemeService private _themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, contextKeyService);
super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, clipboardService, contextKeyService);
}
public render() {

View File

@@ -26,6 +26,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
class EventItem {
@@ -316,9 +317,10 @@ export class ProfilerColumnEditorDialog extends Modal {
@IThemeService private _themeService: IThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IContextViewService private _contextViewService: IContextViewService
@IContextViewService private _contextViewService: IContextViewService,
@IClipboardService clipboardService: IClipboardService
) {
super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, contextKeyService);
super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, clipboardService, contextKeyService);
}
public render(): void {