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

align with portal button style (#14187)

Browse Source 
* align with portal button style

* fix welcome page

* image button

* more fixes

* use withProperties

* add comment back

* add border radius
This commit is contained in:
Alan Ren
2021-02-08 15:12:54 -08:00
committed by GitHub
parent 7a0ac71b98
commit a3cddbc8aa
67 changed files with 384 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/sql/workbench/browser/modal/modal.ts
View File

@@ -191,7 +191,7 @@ export abstract class Modal extends Disposable implements IThemable {
this._modalHeaderSection = DOM.append(this._modalContent, DOM.$('.modal-header'));
if (this._modalOptions.hasBackButton) {
const container = DOM.append(this._modalHeaderSection, DOM.$('.modal-go-back'));
this._backButton = new Button(container);
this._backButton = new Button(container, { secondary: true });
this._backButton.icon = 'backButtonIcon';
this._backButton.title = localize('modal.back', "Back");
}
@@ -416,9 +416,9 @@ export abstract class Modal extends Disposable implements IThemable {
* @param label Label to show on the button
* @param onSelect The callback to call when the button is selected
*/
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right'): Button {
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right', isSecondary: boolean = false): Button {
let footerButton = DOM.$('.footer-button');
let button = this._register(new Button(footerButton));
let button = this._register(new Button(footerButton, { secondary: isSecondary }));
button.label = label;
button.onDidClick(() => onSelect()); // @todo this should be registered to dispose but that brakes some dialogs
if (orientation === 'left') {

9
src/sql/workbench/browser/modal/optionsDialog.ts
View File

@@ -8,7 +8,6 @@ import * as DialogHelper from './dialogHelper';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { IModalOptions, Modal } from './modal';
import * as OptionsDialogHelper from './optionsDialogHelper';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as azdata from 'azdata';
@@ -72,13 +71,13 @@ export class OptionsDialog extends Modal {
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
this.backButton.onDidClick(() => this.cancel());
attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
styler.attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
}
let okButton = this.addFooterButton(localize('optionsDialog.ok', "OK"), () => this.ok());
let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel());
let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
// Theme styler
attachButtonStyler(okButton, this._themeService);
attachButtonStyler(closeButton, this._themeService);
styler.attachButtonStyler(okButton, this._themeService);
styler.attachButtonStyler(closeButton, this._themeService);
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getColorTheme());
}

28
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -11,19 +11,16 @@ import {
import * as azdata from 'azdata';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
import { Button } from 'sql/base/browser/ui/button/button';
import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
import { Color } from 'vs/base/common/color';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { ILogService } from 'vs/platform/log/common/log';
import { IDisposable } from 'vs/base/common/lifecycle';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
@Component({
selector: 'modelview-button',
@@ -78,7 +75,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
this._currentButtonType = this.buttonType;
const elementToRemove = this._button?.element;
if (this._inputContainer) {
this._button = new Button(this._inputContainer.nativeElement);
this._button = new Button(this._inputContainer.nativeElement, { secondary: this.secondary });
} else if (this._infoButtonContainer) {
this._button = new InfoButton(this._infoButtonContainer.nativeElement);
}
@@ -192,22 +189,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
*/
private updateStyler(): void {
this._buttonStyler?.dispose();
if (this.iconPath) {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: Color.transparent.toString(),
buttonHoverBackground: Color.transparent.toString(),
buttonFocusOutline: focusBorder,
buttonForeground: foreground
}));
} else {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: SIDE_BAR_BACKGROUND,
buttonHoverBackground: SIDE_BAR_BACKGROUND,
buttonForeground: SIDE_BAR_TITLE_FOREGROUND
}));
}
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
}
protected get defaultIconHeight(): number {
@@ -267,4 +249,8 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
properties.isFile = isFile;
}
private get secondary(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.secondary, false);
}
}

3
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa
import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
@@ -34,6 +34,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
import { ILogService } from 'vs/platform/log/common/log';
import { TableCellClickEventArgs } from 'sql/base/browser/ui/table/plugins/tableColumn';
import { HyperlinkCellValue, HyperlinkColumn } from 'sql/base/browser/ui/table/plugins/hyperlinkColumn.plugin';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar