ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 17:23:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Alanren/modal message high contrast fix (#3018)

Browse Source 
* make modal dialog message section HC aware

* handle warning icon
This commit is contained in:
Alan Ren
2018-10-26 15:38:51 -07:00
committed by GitHub
parent ff5a248240
commit 3237507bb2
18 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -167,17 +167,20 @@
flex-direction: column;
}
.modal.flyout-dialog .dialog-message.error {
.vs .modal.flyout-dialog .dialog-message.error,
.vs-dark .modal.flyout-dialog .dialog-message.error {
background-color:#B62E00 !important;
color:#FFFFFF !important;
}
.modal.flyout-dialog .dialog-message.warning {
.vs .modal.flyout-dialog .dialog-message.warning,
.vs-dark .modal.flyout-dialog .dialog-message.warning {
background-color:#F9E385 !important;
color:#4A4A4A !important;
}
.modal.flyout-dialog .dialog-message.info {
.vs .modal.flyout-dialog .dialog-message.info,
.vs-dark .modal.flyout-dialog .dialog-message.info {
background-color:#0078D7 !important;
color:#FFFFFF !important;
}
@@ -243,6 +246,7 @@
font-size: 11px;
}
.hc-black .dialog-message.warning .close-message-icon,
.close-message-icon {
background: url('close_inverse.svg') center center no-repeat;
}
@@ -251,6 +255,7 @@
background: url('close.svg') center center no-repeat;
}
.hc-black .dialog-message.warning .copy-message-icon,
.copy-message-icon {
background: url('copy_inverse.svg') center center no-repeat;
}
@@ -259,6 +264,7 @@
background: url('copy.svg') center center no-repeat;
}
.hc-black .dialog-message.warning .message-details-icon,
.message-details-icon {
background: url('show_details_inverse.svg') center center no-repeat;
}
@@ -271,6 +277,10 @@
background: url('info_notification_inverse.svg') center center no-repeat;
}
.hc-black .dialog-message.warning .dialog-message-icon {
background: url('warning_notification_inverse.svg') center center no-repeat;
}
.dialog-message.warning .dialog-message-icon {
background: url('warning_notification.svg') center center no-repeat;
}

16
src/sql/base/browser/ui/modal/modal.ts
View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/modal';
import { IThemable } from 'vs/platform/theme/common/styler';
import { IThemable, attachButtonStyler } from 'vs/platform/theme/common/styler';
import { Color } from 'vs/base/common/color';
import { IPartService } from 'vs/workbench/services/part/common/partService';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
@@ -23,6 +23,7 @@ import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { localize } from 'vs/nls';
import { MessageLevel } from 'sql/workbench/api/common/sqlExtHostTypes';
import * as os from 'os';
import { IThemeService } from 'vs/platform/theme/common/themeService';
export const MODAL_SHOWING_KEY = 'modalShowing';
export const MODAL_SHOWING_CONTEXT = new RawContextKey<Array<string>>(MODAL_SHOWING_KEY, []);
@@ -153,6 +154,7 @@ export abstract class Modal extends Disposable implements IThemable {
private _partService: IPartService,
private _telemetryService: ITelemetryService,
protected _clipboardService: IClipboardService,
protected _themeService: IThemeService,
_contextKeyService: IContextKeyService,
options?: IModalOptions
) {
@@ -228,6 +230,10 @@ export abstract class Modal extends Disposable implements IThemable {
this.setError(undefined);
});
});
attachButtonStyler(this._toggleMessageDetailButton, this._themeService);
attachButtonStyler(this._copyMessageButton, this._themeService);
attachButtonStyler(this._closeMessageButton, this._themeService);
});
messageContainer.div({ class: 'dialog-message-body' }, (messageBody) => {
messageBody.div({ class: 'dialog-message-summary' }, (summaryContainer) => {
@@ -601,6 +607,7 @@ export abstract class Modal extends Disposable implements IThemable {
this._modalDialog.style('border-style', border ? 'solid' : null);
this._modalDialog.style('border-color', border);
}
if (this._modalHeaderSection) {
this._modalHeaderSection.style('background-color', headerAndFooterBackground);
this._modalHeaderSection.style('border-bottom-width', border ? '1px' : null);
@@ -608,6 +615,13 @@ export abstract class Modal extends Disposable implements IThemable {
this._modalHeaderSection.style('border-bottom-color', border);
}
if (this._modalMessageSection) {
this._modalMessageSection.style('background-color', headerAndFooterBackground);
this._modalMessageSection.style('border-bottom-width', border ? '1px' : null);
this._modalMessageSection.style('border-bottom-style', border ? 'solid' : null);
this._modalMessageSection.style('border-bottom-color', border);
}
if (this._modalBodySection) {
this._modalBodySection.style.backgroundColor = bodyBackground;
}

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

@@ -93,13 +93,13 @@ export class OptionsDialog extends Modal {
name: string,
options: IModalOptions,
@IPartService partService: IPartService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(title, name, partService, telemetryService, clipboardService, contextKeyService, options);
super(title, name, partService, telemetryService, clipboardService, _workbenchThemeService, contextKeyService, options);
}
public render() {
@@ -115,8 +115,8 @@ export class OptionsDialog extends Modal {
attachButtonStyler(this._okButton, this._themeService);
attachButtonStyler(this._closeButton, this._themeService);
let self = this;
this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
self.updateTheme(self._themeService.getColorTheme());
this._register(self._workbenchThemeService.onDidColorThemeChange(e => self.updateTheme(e)));
self.updateTheme(self._workbenchThemeService.getColorTheme());
}
protected renderBody(container: HTMLElement) {

4
src/sql/base/browser/ui/modal/webViewDialog.ts
View File

@@ -45,7 +45,7 @@ export class WebViewDialog extends Modal {
protected findInputFocusContextKey: IContextKey<boolean>;
constructor(
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IClipboardService clipboardService: IClipboardService,
@IPartService private _webViewPartService: IPartService,
@ITelemetryService telemetryService: ITelemetryService,
@@ -54,7 +54,7 @@ export class WebViewDialog extends Modal {
@IEnvironmentService private _environmentService: IEnvironmentService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super('', TelemetryKeys.WebView, _webViewPartService, telemetryService, clipboardService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
super('', TelemetryKeys.WebView, _webViewPartService, telemetryService, clipboardService, themeService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
this._okLabel = localize('webViewDialog.ok', 'OK');
this._closeLabel = localize('webViewDialog.close', 'Close');
}

3
src/sql/parts/accountManagement/accountDialog/accountDialog.ts
View File

@@ -67,7 +67,7 @@ export class AccountDialog extends Modal {
constructor(
@IPartService partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IListService private _listService: IListService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -82,6 +82,7 @@ export class AccountDialog extends Modal {
partService,
telemetryService,
clipboardService,
themeService,
contextKeyService,
{ hasSpinner: true }
);

3
src/sql/parts/accountManagement/autoOAuthDialog/autoOAuthDialog.ts
View File

@@ -43,7 +43,7 @@ export class AutoOAuthDialog extends Modal {
constructor(
@IPartService partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@@ -55,6 +55,7 @@ export class AutoOAuthDialog extends Modal {
partService,
telemetryService,
clipboardService,
themeService,
contextKeyService,
{
isFlyout: true,

7
src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialog.ts
View File

@@ -65,7 +65,7 @@ export class FirewallRuleDialog extends Modal {
constructor(
@IAccountPickerService private _accountPickerService: IAccountPickerService,
@IPartService partService: IPartService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@@ -79,6 +79,7 @@ export class FirewallRuleDialog extends Modal {
partService,
telemetryService,
clipboardService,
_workbenchThemeService,
contextKeyService,
{
isFlyout: true,
@@ -205,8 +206,8 @@ export class FirewallRuleDialog extends Modal {
builder.append(firewallRuleSection);
});
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getColorTheme());
this._register(this._workbenchThemeService.onDidColorThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._workbenchThemeService.getColorTheme());
$(this._IPAddressInput).on(DOM.EventType.CLICK, () => {
this.onFirewallRuleOptionSelected(true);

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

@@ -88,7 +88,7 @@ export class ConnectionDialogWidget extends Modal {
private providerNameToDisplayNameMap: { [providerDisplayName: string]: string },
@IInstantiationService private _instantiationService: IInstantiationService,
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
@IPartService _partService: IPartService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@@ -96,7 +96,7 @@ export class ConnectionDialogWidget extends Modal {
@IContextViewService private _contextViewService: IContextViewService,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, clipboardService, contextKeyService, { hasSpinner: true, hasErrors: true });
super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, clipboardService, _workbenchThemeService, contextKeyService, { hasSpinner: true, hasErrors: true });
}
public refresh(): void {
@@ -194,8 +194,8 @@ export class ConnectionDialogWidget extends Modal {
this.$connectionUIContainer.appendTo(this._bodyBuilder);
let self = this;
this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
self.updateTheme(self._themeService.getColorTheme());
this._register(self._workbenchThemeService.onDidColorThemeChange(e => self.updateTheme(e)));
self.updateTheme(self._workbenchThemeService.getColorTheme());
}
/**

3
src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
View File

@@ -120,7 +120,7 @@ export class NewDashboardTabDialog extends Modal {
constructor(
@IPartService partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IListService private _listService: IListService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -135,6 +135,7 @@ export class NewDashboardTabDialog extends Modal {
partService,
telemetryService,
clipboardService,
themeService,
contextKeyService,
{ hasSpinner: true }
);

4
src/sql/parts/disasterRecovery/backup/backupDialog.ts
View File

@@ -27,7 +27,7 @@ export class BackupDialog extends Modal {
private _moduleRef: any;
constructor(
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IPartService partService: IPartService,
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@ITelemetryService telemetryService: ITelemetryService,
@@ -35,7 +35,7 @@ export class BackupDialog extends Modal {
@IInstantiationService private _instantiationService: IInstantiationService,
@IClipboardService clipboardService: IClipboardService
) {
super('', TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isAngular: true, hasErrors: true });
super('', TelemetryKeys.Backup, partService, telemetryService, clipboardService, themeService, contextKeyService, { isAngular: true, hasErrors: true });
}
protected renderBody(container: HTMLElement) {

4
src/sql/parts/disasterRecovery/restore/restoreDialog.ts
View File

@@ -130,14 +130,14 @@ export class RestoreDialog extends Modal {
constructor(
optionsMetadata: sqlops.ServiceOption[],
@IPartService partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, clipboardService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, clipboardService, themeService, 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');

6
src/sql/parts/fileBrowser/fileBrowserDialog.ts
View File

@@ -53,14 +53,14 @@ export class FileBrowserDialog extends Modal {
constructor(title: string,
@IPartService partService: IPartService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService private _workbenchthemeService: IWorkbenchThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(title, TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isFlyout: true, hasTitleIcon: false, hasBackButton: true, hasSpinner: true });
super(title, TelemetryKeys.Backup, partService, telemetryService, clipboardService, _workbenchthemeService, 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));
@@ -238,7 +238,7 @@ export class FileBrowserDialog extends Modal {
this._register(attachButtonStyler(this._okButton, this._themeService));
this._register(attachButtonStyler(this._cancelButton, this._themeService));
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme()));
this._register(this._workbenchthemeService.onDidColorThemeChange(e => this.updateTheme()));
}
// Update theming that is specific to file browser

4
src/sql/parts/insights/browser/insightsDialogView.ts
View File

@@ -125,7 +125,7 @@ export class InsightsDialogView extends Modal {
constructor(
private _model: IInsightsDialogModel,
@IInstantiationService private _instantiationService: IInstantiationService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IListService private _listService: IListService,
@IPartService partService: IPartService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -135,7 +135,7 @@ export class InsightsDialogView extends Modal {
@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
@IClipboardService clipboardService: IClipboardService
) {
super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, clipboardService, contextKeyService);
super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, clipboardService, themeService, contextKeyService);
this._model.onDataChange(e => this.build());
}

4
src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts
View File

@@ -51,13 +51,13 @@ export class ServerGroupDialog extends Modal {
constructor(
@IPartService partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService
) {
super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, clipboardService, contextKeyService);
super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, clipboardService, themeService, contextKeyService);
}
public render() {

4
src/sql/parts/profiler/dialog/profilerColumnEditorDialog.ts
View File

@@ -314,13 +314,13 @@ export class ProfilerColumnEditorDialog extends Modal {
constructor(
@IPartService _partService: IPartService,
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IContextViewService private _contextViewService: IContextViewService,
@IClipboardService clipboardService: IClipboardService
) {
super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, clipboardService, contextKeyService);
super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, clipboardService, themeService, contextKeyService);
}
public render(): void {

4
src/sql/platform/dialog/dialogModal.ts
View File

@@ -41,13 +41,13 @@ export class DialogModal extends Modal {
name: string,
options: IModalOptions,
@IPartService partService: IPartService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService themeService: IWorkbenchThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super(_dialog.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
super(_dialog.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options);
}
public layout(): void {

4
src/sql/platform/dialog/wizardModal.ts
View File

@@ -46,13 +46,13 @@ export class WizardModal extends Modal {
name: string,
options: IModalOptions,
@IPartService partService: IPartService,
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@IWorkbenchThemeService themeService: IWorkbenchThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IClipboardService clipboardService: IClipboardService
) {
super(_wizard.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
super(_wizard.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options);
}
public layout(): void {

4
src/sql/workbench/errorMessageDialog/errorMessageDialog.ts
View File

@@ -42,13 +42,13 @@ export class ErrorMessageDialog extends Modal {
public onOk: Event<void> = this._onOk.event;
constructor(
@IThemeService private _themeService: IThemeService,
@IThemeService themeService: IThemeService,
@IClipboardService clipboardService: IClipboardService,
@IPartService partService: IPartService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService
) {
super('', TelemetryKeys.ErrorMessage, partService, telemetryService, clipboardService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
super('', TelemetryKeys.ErrorMessage, partService, telemetryService, clipboardService, themeService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
this._okLabel = localize('errorMessageDialog.ok', 'OK');
this._closeLabel = localize('errorMessageDialog.close', 'Close');
}