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

implement the style for dropdown, inputbox and table filter (#23502)

Browse Source 
* dropdown, inputbox, headerfilter styles

* fix missing reference

* remove unused import
This commit is contained in:
Alan Ren
2023-06-27 19:36:31 -07:00
committed by GitHub
parent f0d496d9ab
commit 4abcc20781
44 changed files with 155 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts
View File

@@ -6,7 +6,6 @@
import 'vs/css!./media/autoOAuthDialog';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
@@ -112,8 +111,6 @@ export class AutoOAuthDialog extends Modal {
// Theme styler
this._register(this._copyAndOpenButton!);
this._register(this._closeButton!);
this._register(attachInputBoxStyler(this._userCodeInputBox!, this._themeService));
this._register(attachInputBoxStyler(this._websiteInputBox!, this._themeService));
}

7
src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts
View File

@@ -13,7 +13,7 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { localize } from 'vs/nls';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
import * as DOM from 'vs/base/browser/dom';
import * as strings from 'vs/base/common/strings';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -445,11 +445,6 @@ export class BackupRestoreUrlBrowserDialog extends Modal {
this._register(attachSelectBoxStyler(this._subscriptionSelectorBox, this._themeService));
this._register(attachSelectBoxStyler(this._storageAccountSelectorBox, this._themeService));
this._register(attachSelectBoxStyler(this._blobContainerSelectorBox, this._themeService));
this._register(attachInputBoxStyler(this._sasInputBox, this._themeService));
if (this._backupFileInputBox) {
this._register(attachInputBoxStyler(this._backupFileInputBox, this._themeService));
}
if (this._backupFileSelectorBox) {
this._register(attachSelectBoxStyler(this._backupFileSelectorBox, this._themeService));
}

8
src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts
View File

@@ -13,7 +13,6 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes';
import * as Constants from 'sql/platform/connection/common/constants';
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
import * as styler from 'sql/platform/theme/common/styler';
import { IAccountManagementService } from 'sql/platform/accounts/common/interfaces';
import * as azdata from 'azdata';
@@ -60,13 +59,6 @@ export class CmsConnectionWidget extends ConnectionWidget {
}
}
protected override registerListeners(): void {
super.registerListeners();
if (this._serverDescriptionInputBox) {
this._register(styler.attachInputBoxStyler(this._serverDescriptionInputBox, this._themeService));
}
}
protected override fillInConnectionForm(authTypeChanged: boolean = false): void {
// Server Name
this.addServerNameOption();

2
src/sql/workbench/services/connection/browser/connectionBrowseTab.ts
View File

@@ -10,7 +10,6 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup';
import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { ITreeItem } from 'sql/workbench/common/views';
import { CONNECTIONS_SORT_BY_CONFIG_KEY } from 'sql/platform/connection/common/connectionConfig';
import { ConnectionSource } from 'sql/workbench/services/connection/browser/connectionDialogWidget';
@@ -118,7 +117,6 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
//this._register(attachProgressBarStyler(this.filterProgressBar, this.themeService));
this.filterInput.element.style.margin = '5px';
this._register(this.filterInput);
this._register(attachInputBoxStyler(this.filterInput, this.themeService));
this._register(this.filterInput.onDidChange(async () => {
await this.applyFilter();
}));

15
src/sql/workbench/services/connection/browser/connectionWidget.ts
View File

@@ -46,7 +46,7 @@ import { isMssqlAuthProviderEnabled } from 'sql/workbench/services/connection/br
import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string");
@@ -309,7 +309,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
placeholder: option.placeholder,
inputBoxStyles: defaultInputBoxStyles
});
this._register(styler.attachInputBoxStyler(this._customOptionWidgets[i] as InputBox, this._themeService));
break;
}
this._register(this._customOptionWidgets[i]);
@@ -468,7 +467,8 @@ export class ConnectionWidget extends lifecycle.Disposable {
strictSelection: false,
placeholder: databaseOption.placeholder ?? this._defaultDatabaseName,
maxHeight: 125,
ariaLabel: databaseOption.displayName
ariaLabel: databaseOption.displayName,
...defaultEditableDropdownStyles
});
this._register(this._databaseNameInputBox);
}
@@ -541,10 +541,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
protected registerListeners(): void {
// Theme styler
this._register(styler.attachInputBoxStyler(this._serverNameInputBox, this._themeService));
this._register(styler.attachInputBoxStyler(this._connectionNameInputBox, this._themeService));
this._register(styler.attachInputBoxStyler(this._userNameInputBox, this._themeService));
this._register(styler.attachInputBoxStyler(this._passwordInputBox, this._themeService));
this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
if (this._serverGroupSelectBox) {
this._register(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService));
@@ -553,7 +549,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
}));
}
if (this._databaseNameInputBox) {
this._register(styler.attachEditableDropdownStyler(this._databaseNameInputBox, this._themeService));
this._register(this._databaseNameInputBox.onFocus(() => {
this._databaseDropdownExpanded = true;
if (this.serverName) {
@@ -581,10 +576,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
}));
}
if (this._connectionStringInputBox) {
this._register(styler.attachInputBoxStyler(this._connectionStringInputBox, this._themeService));
}
if (this._authTypeSelectBox) {
// Theme styler
this._register(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService));

3
src/sql/workbench/services/connection/browser/passwordChangeDialog.ts
View File

@@ -7,7 +7,6 @@ import 'vs/css!./media/passwordDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
@@ -102,7 +101,6 @@ export class PasswordChangeDialog extends Modal {
type: 'password',
inputBoxStyles: defaultInputBoxStyles
});
this._register(attachInputBoxStyler(this._passwordValueText, this._themeService));
contentElement.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = confirmPasswordText;
const confirmInputContainer = contentElement.appendChild(DOM.$(''));
@@ -110,7 +108,6 @@ export class PasswordChangeDialog extends Modal {
type: 'password',
inputBoxStyles: defaultInputBoxStyles
});
this._register(attachInputBoxStyler(this._confirmValueText, this._themeService));
}
protected layout(height?: number): void {

3
src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
View File

@@ -20,7 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { localize } from 'vs/nls';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
import * as DOM from 'vs/base/browser/dom';
import * as strings from 'vs/base/common/strings';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -227,7 +227,6 @@ export class FileBrowserDialog extends Modal {
}));
// Theme styler
this._register(attachInputBoxStyler(this._filePathInputBox, this._themeService));
this._register(attachSelectBoxStyler(this._fileFilterSelectBox, this._themeService));
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme()));

28
src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
View File

@@ -4,7 +4,6 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./../media/filterDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { Modal } from 'sql/workbench/browser/modal/modal'
@@ -15,13 +14,10 @@ import { ILogService } from 'vs/platform/log/common/log';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { localize } from 'vs/nls';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
//import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import * as DOM from 'vs/base/browser/dom';
import * as azdata from 'azdata';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { NodeFilterPropertyDataType, NodeFilterOperator } from 'sql/workbench/api/common/sqlExtHostTypes';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { Table } from 'sql/base/browser/ui/table/table';
import { TableCellEditorFactory } from 'sql/base/browser/ui/table/tableCellEditorFactory';
import { Emitter } from 'vs/base/common/event';
@@ -30,15 +26,14 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
import { TabbedPanel } from 'sql/base/browser/ui/panel/panel';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import Severity from 'vs/base/common/severity';
import { status } from 'vs/base/browser/ui/aria/aria';
import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
// strings for filter dialog
const OkButtonText = localize('objectExplorer.okButtonText', "OK");
@@ -83,7 +78,6 @@ export class FilterDialog extends Modal {
private filterTable: Table<Slick.SlickData>;
private _tableCellEditorFactory: TableCellEditorFactory;
private _onStyleChangeEventEmitter = new Emitter<void>();
private _description: HTMLElement;
private _onFilterApplied = new Emitter<azdata.NodeFilter[]>();
public readonly onFilterApplied = this._onFilterApplied.event;
@@ -226,10 +220,9 @@ export class FilterDialog extends Modal {
optionsGetter: (item, column): string[] => {
return item[column.field].values;
},
editorStyler: (component) => {
this.styleComponent(component);
},
onStyleChange: this._onStyleChangeEventEmitter.event
inputBoxStyles: defaultInputBoxStyles,
editableDropdownStyles: defaultEditableDropdownStyles,
selectBoxStyles: defaultSelectBoxStyles
}, this._contextViewProvider
);
const columns: Slick.Column<Slick.SlickData>[] = [
@@ -675,17 +668,6 @@ export class FilterDialog extends Modal {
});
}
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button | Dropdown): void {
// if (component instanceof InputBox) {
// this._register(attachInputBoxStyler(component, this._themeService));
// } else if (component instanceof SelectBox) {
// this._register(attachSelectBoxStyler(component, this._themeService));
// } else if (component instanceof Table) {
// this._register(attachTableStyler(component, this._themeService));
// }
}
/**
* This method is used to let user apply filters on the given filters properties.
* @param properties Properties on which user can apply filters.

2
src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
View File

@@ -7,7 +7,6 @@ import 'vs/css!./media/profilerFilterDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -251,7 +250,6 @@ export class ProfilerFilterDialog extends Modal {
ariaLabel: ValueText,
inputBoxStyles: defaultInputBoxStyles
});
this._register(attachInputBoxStyler(valueText, this._themeService));
const removeCell = DOM.append(row, DOM.$('td'));
const removeClauseButton = DOM.append(removeCell, DOM.$('.profiler-filter-remove-condition.codicon.remove', {

4
src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts
View File

@@ -10,7 +10,6 @@ import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
@@ -266,9 +265,6 @@ export class FirewallRuleDialog extends Modal {
// Theme styler
this._register(this._createButton!);
this._register(this._closeButton!);
this._register(attachInputBoxStyler(this._ruleNameInpuBox!, this._themeService));
this._register(attachInputBoxStyler(this._fromRangeinputBox!, this._themeService));
this._register(attachInputBoxStyler(this._toRangeinputBox!, this._themeService));
// handler for firewall rule name change events
this._register(this._ruleNameInpuBox!.onDidChange(ruleName => {

20
src/sql/workbench/services/restore/browser/restoreDialog.ts
View File

@@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
import { HideReason, Modal } from 'sql/workbench/browser/modal/modal';
import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -51,7 +51,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
interface FileListElement {
logicalFileName: string;
@@ -265,7 +265,8 @@ export class RestoreDialog extends Modal {
this._databaseDropdown = this._register(new Dropdown(dropdownContainer, this._contextViewService,
{
strictSelection: false,
ariaLabel: LocalizedStrings.TARGETDATABASE
ariaLabel: LocalizedStrings.TARGETDATABASE,
...defaultEditableDropdownStyles
}
));
this._databaseDropdown.onValueChange(s => {
@@ -281,7 +282,6 @@ export class RestoreDialog extends Modal {
});
this._databaseDropdown.value = this.viewModel.targetDatabaseName!;
attachEditableDropdownStyler(this._databaseDropdown, this._themeService);
this._targetDatabaseInputElement = DOM.append(destinationElement, DOM.$('.dialog-input-section'));
DOM.append(this._targetDatabaseInputElement, DOM.$('.dialog-label')).innerText = LocalizedStrings.TARGETDATABASE;
@@ -303,7 +303,8 @@ export class RestoreDialog extends Modal {
const restoreToLabel = localize('restoreTo', "Restore to");
const destinationRestoreToAriaOptions = {
ariaLabel: restoreToLabel
ariaLabel: restoreToLabel,
inputBoxStyles: defaultInputBoxStyles
};
this._destinationRestoreToContainer = DOM.append(destinationElement, DOM.$('.dialog-input-section'));
DOM.append(this._destinationRestoreToContainer, DOM.$('.dialog-label')).innerText = restoreToLabel;
@@ -525,8 +526,7 @@ export class RestoreDialog extends Modal {
}));
break;
case ServiceOptionType.string:
propertyWidget = this.createInputBoxHelper(container, option.description);
this._register(attachInputBoxStyler(propertyWidget, this._themeService));
propertyWidget = this.createInputBoxHelper(container, option.description, { inputBoxStyles: defaultInputBoxStyles });
this._register(propertyWidget.onLoseFocus(params => {
this.onStringOptionChanged(optionName, params);
}));
@@ -572,7 +572,7 @@ export class RestoreDialog extends Modal {
return selectBox;
}
private createInputBoxHelper(container: HTMLElement, label: string, options?: IInputOptions): InputBox {
private createInputBoxHelper(container: HTMLElement, label: string, options: IInputOptions): InputBox {
const ariaOptions = {
ariaLabel: label
};
@@ -663,10 +663,6 @@ export class RestoreDialog extends Modal {
private registerListeners(): void {
// Theme styler
this._register(attachInputBoxStyler(this._targetDatabaseInputBox, this._themeService));
this._register(attachInputBoxStyler(this._urlInputBox!, this._themeService));
this._register(attachInputBoxStyler(this._filePathInputBox!, this._themeService));
this._register(attachInputBoxStyler(this._destinationRestoreToInputBox!, this._themeService));
this._register(attachSelectBoxStyler(this._restoreFromSelectBox!, this._themeService));
this._register(attachSelectBoxStyler(this._sourceDatabaseSelectBox!, this._themeService));
this._register(this._browseFileButton!);

4
src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
View File

@@ -11,7 +11,6 @@ import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
@@ -175,9 +174,6 @@ export class ServerGroupDialog extends Modal {
private registerListeners(): void {
const renderedDialog = this.withRenderedDialog;
// Theme styler
this._register(attachInputBoxStyler(renderedDialog.groupNameInputBox, this._themeService));
this._register(attachInputBoxStyler(renderedDialog.groupDescriptionInputBox, this._themeService));
this._register(renderedDialog.addServerButton);
this._register(renderedDialog.closeButton);