diff --git a/src/sql/base/browser/ui/table/media/slickColorTheme.css b/src/sql/base/browser/ui/table/media/slickColorTheme.css index e64c3be82f..6f250a2fea 100644 --- a/src/sql/base/browser/ui/table/media/slickColorTheme.css +++ b/src/sql/base/browser/ui/table/media/slickColorTheme.css @@ -29,54 +29,10 @@ color: var(--color-grid-link-hover); } -.grid .slick-cell.dirtyCell { - color: var(--color-grid-dirty-text); - background-color: var(--color-grid-dirty-background); -} - -.grid .slick-cell.dirtyRowHeader { - background-color: var(--color-grid-dirty-background); -} - -.slick-cell.dirtyRowHeader > .row-number { - color: var(--color-grid-dirty-text); - font-weight: 500; -} - /* * vs theme * */ - -.vs .slickgridContainer { - --color-content: #101010; - --color-content-disabled: #a9a9a9; - --color-error: #E81123; - --color-success: #7CD300; - --color-bg-header: hsla(0,0%,50%,.2); - --color-resize-handle: grey; - --color-bg-content-header: #F5F5F5; /* used for color of grid headers */ - --color-cell-border-active: grey; - --color-cell-bg-grid-selected: rgb(173, 214, 255); - --color-grid-link: #0078D7; - --color-grid-link-hover: #0b93ff; - --color-grid-dirty-background: #CCC; - --color-grid-dirty-text: #101010; -} -/* grid styling */ -.vs .slickgridContainer .grid .slick-cell.active, -.vs slick-grid.active .grid .slick-cell.active { - border-color: var(--color-cell-border-active); -} - -.vs slick-grid.active .grid .slick-cell.selected { - background-color: var(--color-cell-bg-grid-selected); -} - -.vs .grid .slick-cell.selected .grid-cell-value-container.missing-value { - color: var(--color-content) !important; -} - .vs .boxRow.content.horzBox.slickgrid { border: solid 1px #EEEEF2; } @@ -181,37 +137,6 @@ * vs-dark theme * */ - -.vs-dark .slickgridContainer { - --color-content: #E5E5E5; - --color-content-disabled: grey; - --color-error: #E81123; - --color-success: #7CD300; - --color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */ - --color-resize-handle: #4d4d4d; - --color-bg-content-header: #333334; /* used for color of grid headers */ - --color-cell-border-active: white; - --color-cell-bg-grid-selected: rgb(38, 79, 120); - --color-grid-link: #FF6000; - --color-grid-link-hover: #ff8033; - --color-grid-dirty-background: #4d4d4d; - --color-grid-dirty-text: #E5E5E5; -} - -/* grid styling */ -.vs-dark .slickgridContainer .grid .slick-cell.active, -.vs-dark slick-grid.active .grid .slick-cell.active { - border-color: var(--color-cell-border-active); -} - -.vs-dark slick-grid.active .grid .slick-cell.selected { - background-color: var(--color-cell-bg-grid-selected); -} - -.vs-dark .grid .slick-cell.selected .grid-cell-value-container.missing-value { - color: var(--color-content) !important; -} - .vs-dark .boxRow.content.horzBox.slickgrid { border: solid 1px #2D2D30; } @@ -333,36 +258,6 @@ * */ -.hc-black .slickgridContainer { - --color-content: #E5E5E5; - --color-content-disabled: grey; - --color-error: #E81123; - --color-success: #7CD300; - --color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */ - --color-resize-handle: #4d4d4d; - --color-bg-content-header: #333334; /* used for color of grid headers */ - --color-cell-border-active: orange; - --color-cell-bg-grid-selected: rgb(38, 79, 120); - --color-grid-link: #FF6000; - --color-grid-link-hover: #ff8033; - --color-grid-dirty-background: #FFF; - --color-grid-dirty-text: #000; -} - -/* grid styling */ - -.hc-black slick-grid.active .grid .slick-cell.active { - border-color: var(--color-cell-border-active); -} - -.hc-black slick-grid.active .grid .slick-cell.selected { - background-color: var(--color-cell-bg-grid-selected); -} - -.hc-black .grid .slick-cell.selected .grid-cell-value-container.missing-value { - color: var(--color-content) !important; -} - .hc-black .boxRow.content.horzBox.slickgrid { border: solid 1px #2D2D30; } diff --git a/src/sql/base/browser/ui/table/media/slickGrid.css b/src/sql/base/browser/ui/table/media/slickGrid.css deleted file mode 100644 index 96f5864e21..0000000000 --- a/src/sql/base/browser/ui/table/media/slickGrid.css +++ /dev/null @@ -1,116 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the Source EULA. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -.grid-cell-padding { - padding: .5em .8em .4em -} - -.grid-cell { - border-top-style: none; - color: var(--color-content, #101010); - letter-spacing: .03em; - border-color: var(--border-color-default, #000000); - font-size: .95em; - border-bottom-width: 1px; - border-left-style: none; - border-right-color: #ACACAC; - border-right-style: dotted; - padding: .5em .8em .4em -} - -.grid { - width: 100%; - height: 100% -} - -.grid .slick-header-column { - border-top-style: none; - color: var(--color-content, #101010); - letter-spacing: .03em; - border-color: var(--border-color-default, #000000); - font-size: .95em; - border-bottom-width: 1px; - border-left-style: none; - border-right-color: #ACACAC; - border-right-style: dotted; - padding: .5em .8em .4em; - background-color: var( --color-bg-content-header, #F5F5F5); - border-bottom-color: #ACACAC -} - -.grid .slick-cell { - border-top-style: none; - color: var(--color-content, #101010); - letter-spacing: .03em; - border-color: var(--border-color-default, #000000); - font-size: .95em; - border-bottom-width: 1px; - border-left-style: none; - border-right-color: #ACACAC; - border-right-style: dotted; - padding: .5em .8em .4em; - /* background-color: var(--background-color, white); */ -} - -.grid .slick-cell.selected { - background-color: var(--color-cell-bg-grid-selected, rgb(173, 214, 255)); - color: var(--color-content, #101010); -} - -.grid .slick-cell.selected .grid-cell-value-container.missing-value { - color: black -} - -.grid .slick-cell.editable { - padding: 0 -} - -.grid .slick-cell.editable input { - padding: .5em .8em .4em; - height: 100%; - padding: .4em .65em .1em; - letter-spacing: .03em -} - -.grid .slick-cell.editable input:focus { - outline-offset: 0 -} - -.grid .slick-cell .grid-cell-value-container { - display: block; - white-space: pre; - width: 100%; - overflow-x: hidden; - text-overflow: ellipsis -} - -.grid .slick-cell .grid-cell-value-container.override-cell { - color: black -} - -.grid .slick-cell .grid-cell-value-container.highlighted { - color: black -} - -.grid .slick-cell .grid-cell-value-container.blurred { - color: #ABABAB -} - -.grid .slick-cell .grid-cell-value-container.context { - color: darkblue; - font-style: italic -} - -.grid .slick-cell .grid-cell-value-container.loading-cell { - font-style: italic -} - -.grid .slick-cell .grid-cell-value-container.right-justified { - text-align: right -} - -.grid input.editor-text { - width: 100%; -} \ No newline at end of file diff --git a/src/sql/base/browser/ui/table/table.ts b/src/sql/base/browser/ui/table/table.ts index 14b2e9bd59..4c11396a62 100644 --- a/src/sql/base/browser/ui/table/table.ts +++ b/src/sql/base/browser/ui/table/table.ts @@ -6,7 +6,6 @@ import 'vs/css!./media/table'; import 'vs/css!./media/slick.grid'; import 'vs/css!./media/slickColorTheme'; -import 'vs/css!./media/slickGrid'; import { TableDataView } from './tableDataView'; import { IDisposableDataProvider, ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces'; diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts index e7912cb945..1319a9f4c6 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts @@ -28,7 +28,6 @@ export default class TableInsight extends Disposable implements IInsightsView, O @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService ) { super(); - this._elementRef.nativeElement.className = 'slickgridContainer'; } ngOnInit() { diff --git a/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts b/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts index fba7d09dae..2308a333cc 100644 --- a/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts +++ b/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts @@ -806,7 +806,7 @@ export class EditDataGridPanel extends GridParentComponent { private createNewTable(): void { let newGridContainer = document.createElement('div'); - newGridContainer.className = 'grid'; + newGridContainer.className = 'editDataGrid'; if (this.placeHolderDataSets) { let dataSet = this.placeHolderDataSets[0]; diff --git a/src/sql/workbench/contrib/editData/browser/media/editData.css b/src/sql/workbench/contrib/editData/browser/media/editData.css index 3f1887e843..e9d8101134 100644 --- a/src/sql/workbench/contrib/editData/browser/media/editData.css +++ b/src/sql/workbench/contrib/editData/browser/media/editData.css @@ -13,3 +13,173 @@ margin-top: 4px; margin-bottom: 4px; } + +.editDataGrid { + width: 100%; + height: 100% +} + +.editDataGrid .slick-header-column { + border-top-style: none; + color: var(--color-content, #101010); + letter-spacing: .03em; + border-color: var(--border-color-default, #000000); + font-size: .95em; + border-bottom-width: 1px; + border-left-style: none; + border-right-color: #ACACAC; + border-right-style: dotted; + padding: .5em .8em .4em; + background-color: var( --color-bg-content-header, #F5F5F5); + border-bottom-color: #ACACAC +} + +.editDataGrid .slick-cell { + border-top-style: none; + color: var(--color-content, #101010); + letter-spacing: .03em; + border-color: var(--border-color-default, #000000); + font-size: .95em; + border-bottom-width: 1px; + border-left-style: none; + border-right-color: #ACACAC; + border-right-style: dotted; + padding: .5em .8em .4em; + /* background-color: var(--background-color, white); */ +} + +.editDataGrid .slick-cell.selected { + background-color: var(--color-cell-bg-grid-selected, rgb(173, 214, 255)); + color: var(--color-content, #101010); +} + +.editDataGrid .slick-cell.selected .grid-cell-value-container.missing-value { + color: black +} + +.editDataGrid .slick-cell.editable { + padding: 0 +} + +.editDataGrid .slick-cell.editable input { + padding: .5em .8em .4em; + height: 100%; + padding: .4em .65em .1em; + letter-spacing: .03em +} + +.editDataGrid .slick-cell.editable input:focus { + outline-offset: 0 +} + +.editDataGrid .slick-cell .grid-cell-value-container { + display: block; + white-space: pre; + width: 100%; + overflow-x: hidden; + text-overflow: ellipsis +} + +.editDataGrid .slick-cell .grid-cell-value-container.override-cell { + color: black +} + +.editDataGrid .slick-cell .grid-cell-value-container.highlighted { + color: black +} + +.editDataGrid .slick-cell .grid-cell-value-container.blurred { + color: #ABABAB +} + +.editDataGrid .slick-cell .grid-cell-value-container.context { + color: darkblue; + font-style: italic +} + +.editDataGrid .slick-cell .grid-cell-value-container.loading-cell { + font-style: italic +} + +.editDataGrid .slick-cell .grid-cell-value-container.right-justified { + text-align: right +} + +.editDataGrid input.editor-text { + width: 100%; +} + +.editDataGrid .slick-cell.dirtyCell { + color: var(--color-grid-dirty-text); + background-color: var(--color-grid-dirty-background); +} + +.editDataGrid .slick-cell.dirtyRowHeader { + background-color: var(--color-grid-dirty-background); +} + +.editDataGrid .slick-cell.dirtyRowHeader > .row-number { + color: var(--color-grid-dirty-text); + font-weight: 500; +} + +.slickgridContainer .editDataGrid .slick-cell.active, +slick-grid.active .editDataGrid .slick-cell.active { + border-color: var(--color-cell-border-active); +} + +slick-grid.active .editDataGrid .slick-cell.selected { + background-color: var(--color-cell-bg-grid-selected); +} + +.editDataGrid .slick-cell.selected .grid-cell-value-container.missing-value { + color: var(--color-content) !important; +} + +.hc-black .slickgridContainer { + --color-content: #E5E5E5; + --color-content-disabled: grey; + --color-error: #E81123; + --color-success: #7CD300; + --color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */ + --color-resize-handle: #4d4d4d; + --color-bg-content-header: #333334; /* used for color of grid headers */ + --color-cell-border-active: orange; + --color-cell-bg-grid-selected: rgb(38, 79, 120); + --color-grid-link: #FF6000; + --color-grid-link-hover: #ff8033; + --color-grid-dirty-background: #FFF; + --color-grid-dirty-text: #000; +} + +.vs-dark .slickgridContainer { + --color-content: #E5E5E5; + --color-content-disabled: grey; + --color-error: #E81123; + --color-success: #7CD300; + --color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */ + --color-resize-handle: #4d4d4d; + --color-bg-content-header: #333334; /* used for color of grid headers */ + --color-cell-border-active: white; + --color-cell-bg-grid-selected: rgb(38, 79, 120); + --color-grid-link: #FF6000; + --color-grid-link-hover: #ff8033; + --color-grid-dirty-background: #4d4d4d; + --color-grid-dirty-text: #E5E5E5; +} + +.vs .slickgridContainer { + --color-content: #101010; + --color-content-disabled: #a9a9a9; + --color-error: #E81123; + --color-success: #7CD300; + --color-bg-header: hsla(0,0%,50%,.2); + --color-resize-handle: grey; + --color-bg-content-header: #F5F5F5; /* used for color of grid headers */ + --color-cell-border-active: grey; + --color-cell-bg-grid-selected: rgb(173, 214, 255); + --color-grid-link: #0078D7; + --color-grid-link-hover: #0b93ff; + --color-grid-dirty-background: #CCC; + --color-grid-dirty-text: #101010; +}