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

Better table implementation (#11781)

Browse Source 
* wip

* wip

* weird splitview scrolling stuff

* working table

* remove spliceable table

* handling resizing columns

* get perf table integrated into grid

* make more improvments to table view

* testing

* wip

* wip

* fix async data window; add more optimization to scrolling

* work on scrolling

* fix column resizing

* start working on table widget

* inital work to get table widget working with styles and mouse controls

* fix unrendering selection; fix sizes of cells

* support high perf table option; remove unused files; add cell borders to high perf

* add accessibility tags

* handle borders and row count

* more styling changfes

* fix strict null checks

* adding inital keyboard navigation

* center row count; add padding left to rows

* inital drag selection

* remove drag implementation; it can be done better utilizing the global mouse monitor object

* range logic

* create custom grid range

* work with new range

* remove unused code

* fix how plus range works

* add drag selection; change focus to set selection; fix problem with creating a range with inverse start and end

* code cleanup

* fix strict-null-checks

* fix up perf table

* fix layering

* inital table service

* finish table service

* fix some compile errors

* fix compile

* fix compile

* fix up for use

* fix layering

* remove console use

* fix strict nulls
This commit is contained in:
Anthony Dresser
2020-08-18 12:10:05 -07:00
committed by GitHub
parent 17856855f6
commit c4b524237c
47 changed files with 3276 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/platform/theme/common/colors.ts
View File

@@ -9,12 +9,14 @@ import * as nls from 'vs/nls';
export const tableHeaderBackground = registerColor('table.headerBackground', { dark: new Color(new RGBA(51, 51, 52)), light: new Color(new RGBA(245, 245, 245)), hc: '#333334' }, nls.localize('tableHeaderBackground', "Table header background color"));
export const tableHeaderForeground = registerColor('table.headerForeground', { dark: new Color(new RGBA(229, 229, 229)), light: new Color(new RGBA(16, 16, 16)), hc: '#e5e5e5' }, nls.localize('tableHeaderForeground', "Table header foreground color"));
export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));
export const tableCellOutline = registerColor('table.cell.outline', { dark: '#e3e4e229', light: '#33333333', hc: '#e3e4e229' }, nls.localize('tableCellOutline', 'Color of the outline of a cell.'));
export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hc: Color.black }, nls.localize('disabledInputBoxBackground', "Disabled Input box background."));
export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hc: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground."));
export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hc: Color.black }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground."));
export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));
// SQL Agent Colors
export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hc: Color.black }, nls.localize('agentTableBackground', "SQL Agent Table background color."));

73
src/sql/platform/theme/common/styler.ts
View File

@@ -3,11 +3,11 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as sqlcolors from './colors';
import * as colors from './colors';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import * as cr from 'vs/platform/theme/common/colorRegistry';
import { attachStyler } from 'vs/platform/theme/common/styler';
import { attachStyler, IColorMapping, IStyleOverrides } from 'vs/platform/theme/common/styler';
import { IDisposable } from 'vs/base/common/lifecycle';
import { IThemable } from 'vs/base/common/styler';
@@ -29,7 +29,7 @@ export function attachDropdownStyler(widget: IThemable, themeService: IThemeServ
buttonBackground: (style && style.buttonBackground) || cr.buttonBackground,
buttonHoverBackground: (style && style.buttonHoverBackground) || cr.buttonHoverBackground,
buttonBorder: cr.contrastBorder,
buttonFocusOutline: (style && style.buttonFocusOutline) || sqlcolors.buttonFocusOutline
buttonFocusOutline: (style && style.buttonFocusOutline) || colors.buttonFocusOutline
}, widget);
}
@@ -50,8 +50,8 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
return attachStyler(themeService, {
inputBackground: (style && style.inputBackground) || cr.inputBackground,
inputForeground: (style && style.inputForeground) || cr.inputForeground,
disabledInputBackground: (style && style.disabledInputBackground) || sqlcolors.disabledInputBackground,
disabledInputForeground: (style && style.disabledInputForeground) || sqlcolors.disabledInputForeground,
disabledInputBackground: (style && style.disabledInputBackground) || colors.disabledInputBackground,
disabledInputForeground: (style && style.disabledInputForeground) || colors.disabledInputForeground,
inputBorder: (style && style.inputBorder) || cr.inputBorder,
inputValidationInfoBorder: (style && style.inputValidationInfoBorder) || cr.inputValidationInfoBorder,
inputValidationInfoBackground: (style && style.inputValidationInfoBackground) || cr.inputValidationInfoBackground,
@@ -88,8 +88,8 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer
selectListBackground: (style && style.selectListBackground) || cr.selectListBackground,
selectForeground: (style && style.selectForeground) || cr.selectForeground,
selectBorder: (style && style.selectBorder) || cr.selectBorder,
disabledSelectBackground: (style && style.disabledSelectBackground) || sqlcolors.disabledInputBackground,
disabledSelectForeground: (style && style.disabledSelectForeground) || sqlcolors.disabledInputForeground,
disabledSelectBackground: (style && style.disabledSelectBackground) || colors.disabledInputBackground,
disabledSelectForeground: (style && style.disabledSelectForeground) || colors.disabledInputForeground,
inputValidationInfoBorder: (style && style.inputValidationInfoBorder) || cr.inputValidationInfoBorder,
inputValidationInfoBackground: (style && style.inputValidationInfoBackground) || cr.inputValidationInfoBackground,
inputValidationWarningBorder: (style && style.inputValidationWarningBorder) || cr.inputValidationWarningBorder,
@@ -156,7 +156,7 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService
listFocusForeground: (style && style.listFocusForeground) || cr.listFocusForeground,
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || cr.listActiveSelectionBackground,
listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || cr.listActiveSelectionForeground,
listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || sqlcolors.listFocusAndSelectionBackground,
listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || colors.listFocusAndSelectionBackground,
listFocusAndSelectionForeground: (style && style.listFocusAndSelectionForeground) || cr.listActiveSelectionForeground,
listInactiveFocusBackground: (style && style.listInactiveFocusBackground),
listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || cr.listInactiveSelectionBackground,
@@ -168,11 +168,60 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService
listSelectionOutline: (style && style.listSelectionOutline) || cr.activeContrastBorder,
listHoverOutline: (style && style.listHoverOutline) || cr.activeContrastBorder,
listInactiveFocusOutline: style && style.listInactiveFocusOutline,
tableHeaderBackground: (style && style.tableHeaderBackground) || sqlcolors.tableHeaderBackground,
tableHeaderForeground: (style && style.tableHeaderForeground) || sqlcolors.tableHeaderForeground
tableHeaderBackground: (style && style.tableHeaderBackground) || colors.tableHeaderBackground,
tableHeaderForeground: (style && style.tableHeaderForeground) || colors.tableHeaderForeground
}, widget);
}
export interface ITableStyleOverrides extends IStyleOverrides {
listFocusBackground?: cr.ColorIdentifier,
listFocusForeground?: cr.ColorIdentifier,
listActiveSelectionBackground?: cr.ColorIdentifier,
listActiveSelectionForeground?: cr.ColorIdentifier,
listFocusAndSelectionBackground?: cr.ColorIdentifier,
listFocusAndSelectionForeground?: cr.ColorIdentifier,
listInactiveFocusBackground?: cr.ColorIdentifier,
listInactiveSelectionBackground?: cr.ColorIdentifier,
listInactiveSelectionForeground?: cr.ColorIdentifier,
listHoverBackground?: cr.ColorIdentifier,
listHoverForeground?: cr.ColorIdentifier,
listDropBackground?: cr.ColorIdentifier,
listFocusOutline?: cr.ColorIdentifier,
listInactiveFocusOutline?: cr.ColorIdentifier,
listSelectionOutline?: cr.ColorIdentifier,
listHoverOutline?: cr.ColorIdentifier,
tableHeaderBackground?: cr.ColorIdentifier,
tableHeaderForeground?: cr.ColorIdentifier,
cellOutlineColor?: cr.ColorIdentifier,
tableHeaderAndRowCountColor?: cr.ColorIdentifier
}
export function attachHighPerfTableStyler(widget: IThemable, themeService: IThemeService, overrides?: IColorMapping): IDisposable {
return attachStyler(themeService, { ...defaultHighPerfTableStyles, ...(overrides || {}) }, widget);
}
export const defaultHighPerfTableStyles: IColorMapping = {
listFocusBackground: cr.listFocusBackground,
listFocusForeground: cr.listFocusForeground,
listActiveSelectionBackground: cr.listActiveSelectionBackground,
listActiveSelectionForeground: cr.listActiveSelectionForeground,
listFocusAndSelectionBackground: colors.listFocusAndSelectionBackground,
listFocusAndSelectionForeground: cr.listActiveSelectionForeground,
listInactiveFocusBackground: cr.listInactiveFocusBackground,
listInactiveSelectionBackground: cr.listInactiveSelectionBackground,
listInactiveSelectionForeground: cr.listInactiveSelectionForeground,
listHoverBackground: cr.listHoverBackground,
listHoverForeground: cr.listHoverForeground,
listDropBackground: cr.listDropBackground,
listFocusOutline: cr.activeContrastBorder,
listSelectionOutline: cr.activeContrastBorder,
listHoverOutline: cr.activeContrastBorder,
tableHeaderBackground: colors.tableHeaderBackground,
tableHeaderForeground: colors.tableHeaderForeground,
cellOutlineColor: colors.tableCellOutline,
tableHeaderAndRowCountColor: colors.tableCellOutline
};
export function attachEditableDropdownStyler(widget: IThemable, themeService: IThemeService, style?: {
listFocusBackground?: cr.ColorIdentifier,
listFocusForeground?: cr.ColorIdentifier,
@@ -245,13 +294,13 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
buttonBackground: (style && style.buttonBackground) || cr.buttonBackground,
buttonHoverBackground: (style && style.buttonHoverBackground) || cr.buttonHoverBackground,
buttonBorder: cr.contrastBorder,
buttonFocusOutline: (style && style.buttonFocusOutline) || sqlcolors.buttonFocusOutline
buttonFocusOutline: (style && style.buttonFocusOutline) || colors.buttonFocusOutline
}, widget);
}
export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { disabledCheckboxForeground?: cr.ColorIdentifier })
: IDisposable {
return attachStyler(themeService, {
disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || sqlcolors.disabledCheckboxForeground
disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || colors.disabledCheckboxForeground
}, widget);
}