mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-30 17:23:29 -05:00
Layer grid code (#5029)
* layer grid * errors; edit data still not showing up * fix edit data * fix tab spaces
This commit is contained in:
Anthony Dresser
129
src/sql/base/browser/ui/table/formatters.ts
Normal file
129
src/sql/base/browser/ui/table/formatters.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { escape } from 'sql/base/common/strings';
|
||||
|
||||
export class DBCellValue {
|
||||
displayValue: string;
|
||||
isNull: boolean;
|
||||
|
||||
public static isDBCellValue(object: any): boolean {
|
||||
return (object !== undefined && object.displayValue !== undefined && object.isNull !== undefined);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Format xml field into a hyperlink and performs HTML entity encoding
|
||||
*/
|
||||
export function hyperLinkFormatter(row: number, cell: any, value: any, columnDef: any, dataContext: any): string {
|
||||
let cellClasses = 'grid-cell-value-container';
|
||||
let valueToDisplay: string = '';
|
||||
|
||||
if (DBCellValue.isDBCellValue(value)) {
|
||||
valueToDisplay = 'NULL';
|
||||
if (!value.isNull) {
|
||||
cellClasses += ' xmlLink';
|
||||
valueToDisplay = escape(value.displayValue);
|
||||
return `<a class="${cellClasses}" href="#" >${valueToDisplay}</a>`;
|
||||
} else {
|
||||
cellClasses += ' missing-value';
|
||||
}
|
||||
}
|
||||
return `<span title="${valueToDisplay}" class="${cellClasses}">${valueToDisplay}</span>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format all text to replace all new lines with spaces and performs HTML entity encoding
|
||||
*/
|
||||
export function textFormatter(row: number, cell: any, value: any, columnDef: any, dataContext: any): string {
|
||||
let cellClasses = 'grid-cell-value-container';
|
||||
let valueToDisplay = '';
|
||||
let titleValue = '';
|
||||
|
||||
if (DBCellValue.isDBCellValue(value)) {
|
||||
valueToDisplay = 'NULL';
|
||||
if (!value.isNull) {
|
||||
valueToDisplay = value.displayValue.replace(/(\r\n|\n|\r)/g, ' ');
|
||||
valueToDisplay = escape(valueToDisplay.length > 250 ? valueToDisplay.slice(0, 250) + '...' : valueToDisplay);
|
||||
titleValue = valueToDisplay;
|
||||
} else {
|
||||
cellClasses += ' missing-value';
|
||||
}
|
||||
} else if (typeof value === 'string' || (value && value.text)) {
|
||||
if (value.text) {
|
||||
valueToDisplay = value.text;
|
||||
} else {
|
||||
valueToDisplay = value;
|
||||
}
|
||||
valueToDisplay = escape(valueToDisplay.length > 250 ? valueToDisplay.slice(0, 250) + '...' : valueToDisplay);
|
||||
titleValue = valueToDisplay;
|
||||
}
|
||||
|
||||
return `<span title="${titleValue}" class="${cellClasses}">${valueToDisplay}</span>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provide slick grid cell with encoded ariaLabel and plain text.
|
||||
* text will be escaped by the textFormatter and ariaLabel will be consumed by slickgrid directly.
|
||||
*/
|
||||
export function slickGridDataItemColumnValueExtractor(value: any, columnDef: any): { text: string; ariaLabel: string; } {
|
||||
let displayValue = value[columnDef.field];
|
||||
return {
|
||||
text: displayValue,
|
||||
ariaLabel: displayValue ? escape(displayValue) : displayValue
|
||||
};
|
||||
}
|
||||
|
||||
/** The following code is a rewrite over the both formatter function using dom builder
|
||||
* rather than string manipulation, which is a safer and easier method of achieving the same goal.
|
||||
* However, when electron is in "Run as node" mode, dom creation acts differently than normal and therefore
|
||||
* the tests to test for html escaping fail. I'm keeping this code around as we should migrate to it if we ever
|
||||
* integrate into actual DOM testing (electron running in normal mode) later on.
|
||||
|
||||
export const hyperLinkFormatter: Slick.Formatter<any> = (row, cell, value, columnDef, dataContext): string => {
|
||||
let classes: Array<string> = ['grid-cell-value-container'];
|
||||
let displayValue = '';
|
||||
|
||||
if (DBCellValue.isDBCellValue(value)) {
|
||||
if (!value.isNull) {
|
||||
displayValue = value.displayValue;
|
||||
classes.push('queryLink');
|
||||
let linkContainer = $('a', {
|
||||
class: classes.join(' '),
|
||||
title: displayValue
|
||||
});
|
||||
linkContainer.innerText = displayValue;
|
||||
return linkContainer.outerHTML;
|
||||
} else {
|
||||
classes.push('missing-value');
|
||||
}
|
||||
}
|
||||
|
||||
let cellContainer = $('span', { class: classes.join(' '), title: displayValue });
|
||||
cellContainer.innerText = displayValue;
|
||||
return cellContainer.outerHTML;
|
||||
};
|
||||
|
||||
export const textFormatter: Slick.Formatter<any> = (row, cell, value, columnDef, dataContext): string => {
|
||||
let displayValue = '';
|
||||
let classes: Array<string> = ['grid-cell-value-container'];
|
||||
|
||||
if (DBCellValue.isDBCellValue(value)) {
|
||||
if (!value.isNull) {
|
||||
displayValue = value.displayValue.replace(/(\r\n|\n|\r)/g, ' ');
|
||||
} else {
|
||||
classes.push('missing-value');
|
||||
displayValue = 'NULL';
|
||||
}
|
||||
}
|
||||
|
||||
let cellContainer = $('span', { class: classes.join(' '), title: displayValue });
|
||||
cellContainer.innerText = displayValue;
|
||||
|
||||
return cellContainer.outerHTML;
|
||||
};
|
||||
|
||||
*/
|
||||
190
src/sql/base/browser/ui/table/media/slick.grid.css
Normal file
190
src/sql/base/browser/ui/table/media/slick.grid.css
Normal file
@@ -0,0 +1,190 @@
|
||||
/*
|
||||
IMPORTANT:
|
||||
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
|
||||
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
|
||||
classes should alter those!
|
||||
*/
|
||||
|
||||
.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-left: 0px !important;
|
||||
}
|
||||
|
||||
.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slick-header-column.ui-state-default {
|
||||
position: relative;
|
||||
/*box-sizing: content-box !important; use this for Firefox! */
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
height: 28px;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
border-right: 1px solid silver;
|
||||
border-left: 0px !important;
|
||||
border-top: 0px !important;
|
||||
border-bottom: 2px solid #bbb;
|
||||
float: left;
|
||||
background-color: #eee;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slick-headerrow-column.ui-state-default, .slick-footerrow-column.ui-state-default {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.slick-header-column-sorted {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slick-sort-indicator {
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
margin-left: 4px;
|
||||
margin-top: 6px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.slick-sort-indicator-desc {
|
||||
background: url(images/sort-desc.gif);
|
||||
}
|
||||
|
||||
.slick-sort-indicator-asc {
|
||||
background: url(images/sort-asc.gif);
|
||||
}
|
||||
|
||||
.slick-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
cursor: col-resize;
|
||||
width: 4px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slick-sortable-placeholder {
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.grid-canvas {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.slick-row.ui-widget-content, .slick-row.ui-state-active {
|
||||
position: absolute;
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-cell, .slick-headerrow-column , .slick-footerrow-column{
|
||||
position: absolute;
|
||||
border: 1px solid transparent;
|
||||
border-right: 1px dotted silver;
|
||||
border-bottom-color: silver;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
z-index: 1;
|
||||
padding: 1px 2px 2px 1px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.slick-cell .grid-cell-value-container.missing-value {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slick-cell, .slick-headerrow-column{
|
||||
border-bottom-color: silver;
|
||||
}
|
||||
.slick-footerrow-column {
|
||||
border-top-color: silver;
|
||||
}
|
||||
|
||||
.slick-group-toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.slick-cell.highlighted {
|
||||
background: lightskyblue;
|
||||
background: rgba(0, 0, 255, 0.2);
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.slick-cell.flashing {
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
|
||||
.slick-cell.editable {
|
||||
z-index: 11;
|
||||
overflow: visible;
|
||||
background: white;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.slick-cell:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slick-cell > .row-number {
|
||||
color: var(--color-content);
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.slick-reorder-proxy {
|
||||
display: inline-block;
|
||||
background: blue;
|
||||
opacity: 0.15;
|
||||
filter: alpha(opacity = 15);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.slick-reorder-guide {
|
||||
display: inline-block;
|
||||
height: 2px;
|
||||
background: blue;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity = 70);
|
||||
}
|
||||
|
||||
.slick-selection {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
border: 2px dashed black;
|
||||
}
|
||||
|
||||
.slick-column-icon {
|
||||
margin-right: 0.5em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.slick-header-column.ui-state-default.slick-header-with-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slick-header-with-icon .slick-column-name {
|
||||
width: calc(100% - 1em);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
406
src/sql/base/browser/ui/table/media/slickColorTheme.css
Normal file
406
src/sql/base/browser/ui/table/media/slickColorTheme.css
Normal file
@@ -0,0 +1,406 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
/*
|
||||
* Theme agnostic
|
||||
*
|
||||
*/
|
||||
|
||||
.errorMessage {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.batchMessage {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.slick-cell a, a:link {
|
||||
color: var(--color-grid-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.slick-cell a:hover {
|
||||
color: var(--color-grid-link-hover);
|
||||
}
|
||||
|
||||
.resultsMessageValue a, a:link {
|
||||
color: var(--color-grid-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.resultsMessageValue a: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 .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 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;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
.vs .icon.extendFullScreen {
|
||||
/* ExtendToFullScreen_16x_vscode */
|
||||
background-image: url("extendFullScreen.svg");
|
||||
}
|
||||
|
||||
.vs .icon.exitFullScreen {
|
||||
/* ExitFullScreen_16x_vscode */
|
||||
background-image: url("exitFullScreen.svg");
|
||||
}
|
||||
|
||||
.vs .icon.saveJson {
|
||||
/* ResultToJSON_16x_vscode */
|
||||
background-image: url("saveJson.svg");
|
||||
}
|
||||
|
||||
.vs .icon.saveCsv {
|
||||
/* ResultToCSV_16x_vscode */
|
||||
background-image: url("saveCsv.svg");
|
||||
}
|
||||
|
||||
.vs .icon.saveExcel {
|
||||
/* ResultToXlsx_16x_vscode */
|
||||
background-image: url("saveExcel.svg");
|
||||
}
|
||||
|
||||
.vs .icon.saveXml {
|
||||
/* ResultToXML_16x_vscode */
|
||||
background-image: url("saveXml.svg");
|
||||
}
|
||||
|
||||
.vs .icon.viewChart {
|
||||
/* ResultToXlsx_16x_vscode */
|
||||
background-image: url("viewChart.svg");
|
||||
}
|
||||
|
||||
/* headers */
|
||||
.vs .resultsMessageHeader {
|
||||
background: var(--color-bg-header);
|
||||
color: var(--color-content);
|
||||
}
|
||||
|
||||
.vs .resultsViewCollapsible:not(.collapsed) {
|
||||
background-image: url("uncollapsedArrow.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vs .resultsViewCollapsible {
|
||||
background-image: url("collapsedArrow.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vs .queryResultsShortCut {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* scroll bar */
|
||||
|
||||
.vs ::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
}
|
||||
.vs ::-webkit-scrollbar-thumb {
|
||||
background: hsla(0,0%,47%,.4);
|
||||
}
|
||||
|
||||
.vs ::-webkit-scrollbar-thumb:hover {
|
||||
background: hsla(0,0%,39%,.7);
|
||||
}
|
||||
|
||||
.vs ::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(85,85,85,0.8);
|
||||
}
|
||||
|
||||
.vs ::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.vs ::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench input {
|
||||
color: var(--color-content);
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 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;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
.vs-dark .icon.extendFullScreen,
|
||||
.hc-black .icon.extendFullScreen {
|
||||
/* ExtendToFullScreen_16x_vscode_inverse.svg */
|
||||
background-image: url("extendFullScreen_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.exitFullScreen,
|
||||
.hc-black .icon.exitFullScreen {
|
||||
/* ExitFullScreen_16x_vscode_inverse.svg */
|
||||
background-image: url("exitFullScreen_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.saveJson,
|
||||
.hc-black .icon.saveJson {
|
||||
/* ResultToJSON_16x_vscode_inverse.svg */
|
||||
background-image: url("saveJson_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.saveCsv,
|
||||
.hc-black .icon.saveCsv {
|
||||
/* ResultToCSV_16x_vscode_inverse.svg */
|
||||
background-image: url("saveCsv_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.saveExcel,
|
||||
.hc-black .icon.saveExcel {
|
||||
/* ResultToXlsx_16x_vscode_inverse.svg */
|
||||
background-image: url("saveExcel_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.saveXml,
|
||||
.hc-black .icon.saveXml {
|
||||
/* ResultToXml_16x_vscode_inverse.svg */
|
||||
background-image: url("saveXml_inverse.svg");
|
||||
}
|
||||
|
||||
.vs-dark .icon.viewChart,
|
||||
.hc-black .icon.viewChart {
|
||||
/* ResultToXlsx_16x_vscode */
|
||||
background-image: url("viewChart_inverse.svg");
|
||||
}
|
||||
|
||||
.grid-panel .action-label.icon {
|
||||
height: 16px;
|
||||
min-width: 28px;
|
||||
background-size: 16px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* headers */
|
||||
.vs-dark .resultsMessageHeader {
|
||||
background: var(--color-bg-header);
|
||||
color: var(--color-content);
|
||||
}
|
||||
|
||||
.vs-dark .resultsViewCollapsible:not(.collapsed),
|
||||
.hc-black .resultsViewCollapsible:not(.collapsed) {
|
||||
background-image:url("uncollapsedArrow_inverse.svg");
|
||||
background-repeat:no-repeat;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vs-dark .resultsViewCollapsible,
|
||||
.hc-black .resultsViewCollapsible {
|
||||
background-image: url("collapsedArrow_inverse.svg");
|
||||
background-repeat:no-repeat;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vs-dark .queryResultsShortCut {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* scroll bar */
|
||||
|
||||
.vs-dark ::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.vs-dark ::-webkit-scrollbar-thumb {
|
||||
background: hsla(0,0%,47%,.4);
|
||||
}
|
||||
|
||||
.vs-dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: hsla(0,0%,39%,.7);
|
||||
}
|
||||
|
||||
.vs-dark ::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(85,85,85,0.8);
|
||||
}
|
||||
|
||||
.vs-dark ::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.vs-dark ::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench input, .vs-dark .monaco-workbench .input {
|
||||
color: var(--color-content);
|
||||
background-color: #3C3C3C;
|
||||
}
|
||||
|
||||
/*
|
||||
* hc-black theme
|
||||
*
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* headers */
|
||||
.hc-black .resultsMessageHeader {
|
||||
background: var(--color-bg-header);
|
||||
color: var(--color-content);
|
||||
}
|
||||
|
||||
.hc-black .queryResultsShortCut {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* scroll bar */
|
||||
|
||||
.hc-black ::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.hc-black ::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(111, 195, 223, 0.3);
|
||||
}
|
||||
|
||||
.hc-black ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(111, 195, 223, 0.8);
|
||||
}
|
||||
|
||||
.hc-black ::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(111, 195, 223, 0.8);
|
||||
}
|
||||
|
||||
.hc-black ::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.hc-black ::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hc-black .monaco-workbench input {
|
||||
color: #000;
|
||||
background-color: #FFF;
|
||||
}
|
||||
116
src/sql/base/browser/ui/table/media/slickGrid.css
Normal file
116
src/sql/base/browser/ui/table/media/slickGrid.css
Normal file
@@ -0,0 +1,116 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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%;
|
||||
}
|
||||
@@ -4,6 +4,10 @@
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user