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

table style clean up (#10608)

Browse Source
This commit is contained in:
Alan Ren
2020-05-29 10:19:09 -07:00
committed by GitHub
parent 107b3171f2
commit 7e49eb85fb
6 changed files with 171 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/sql/base/browser/ui/table/media/slickColorTheme.css
View File

@@ -29,54 +29,10 @@
color: var(--color-grid-link-hover); 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 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 { .vs .boxRow.content.horzBox.slickgrid {
border: solid 1px #EEEEF2; border: solid 1px #EEEEF2;
} }
@@ -181,37 +137,6 @@
* vs-dark theme * 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 { .vs-dark .boxRow.content.horzBox.slickgrid {
border: solid 1px #2D2D30; 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 { .hc-black .boxRow.content.horzBox.slickgrid {
border: solid 1px #2D2D30; border: solid 1px #2D2D30;
} }

116
src/sql/base/browser/ui/table/media/slickGrid.css
View File

@@ -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%;
}

1
src/sql/base/browser/ui/table/table.ts
View File

@@ -6,7 +6,6 @@
import 'vs/css!./media/table'; import 'vs/css!./media/table';
import 'vs/css!./media/slick.grid'; import 'vs/css!./media/slick.grid';
import 'vs/css!./media/slickColorTheme'; import 'vs/css!./media/slickColorTheme';
import 'vs/css!./media/slickGrid';
import { TableDataView } from './tableDataView'; import { TableDataView } from './tableDataView';
import { IDisposableDataProvider, ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces'; import { IDisposableDataProvider, ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces';

1
src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts
View File

@@ -28,7 +28,6 @@ export default class TableInsight extends Disposable implements IInsightsView, O
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) { ) {
super(); super();
this._elementRef.nativeElement.className = 'slickgridContainer';
} }
ngOnInit() { ngOnInit() {

2
src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts
View File

@@ -806,7 +806,7 @@ export class EditDataGridPanel extends GridParentComponent {
private createNewTable(): void { private createNewTable(): void {
let newGridContainer = document.createElement('div'); let newGridContainer = document.createElement('div');
newGridContainer.className = 'grid'; newGridContainer.className = 'editDataGrid';
if (this.placeHolderDataSets) { if (this.placeHolderDataSets) {
let dataSet = this.placeHolderDataSets[0]; let dataSet = this.placeHolderDataSets[0];

170
src/sql/workbench/contrib/editData/browser/media/editData.css
View File

@@ -13,3 +13,173 @@
margin-top: 4px; margin-top: 4px;
margin-bottom: 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;
}