diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx index e2118e2efd..02a4df2a6f 100644 --- a/superset-frontend/src/SqlLab/App.jsx +++ b/superset-frontend/src/SqlLab/App.jsx @@ -41,7 +41,6 @@ import setupApp from '../setup/setupApp'; import './main.less'; import '../assets/stylesheets/reactable-pagination.less'; -import '../components/FilterableTable/FilterableTableStyles.less'; import { theme } from '../preamble'; setupApp(); diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx index 23d68f9685..c0b49f8619 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx @@ -87,10 +87,110 @@ const JSON_TREE_THEME = { const ONLY_NUMBER_REGEX = /^(NaN|-?((\d*\.\d+|\d+)([Ee][+-]?\d+)?|Infinity))$/; const StyledFilterableTable = styled.div` - height: 100%; - overflow-x: auto; - margin-top: ${({ theme }) => theme.gridUnit * 2}px; - overflow-y: hidden; + ${({ theme }) => ` + height: 100%; + overflow-x: auto; + margin-top: ${theme.gridUnit * 2}px; + overflow-y: hidden; + + .ReactVirtualized__Grid__innerScrollContainer { + border: 1px solid ${theme.colors.grayscale.light2}; + } + + .ReactVirtualized__Table__headerRow { + font-weight: ${theme.typography.weights.bold}; + display: flex; + flex-direction: row; + align-items: center; + border: 1px solid ${theme.colors.grayscale.light2}; + } + + .ReactVirtualized__Table__row { + display: flex; + flex-direction: row; + } + + .ReactVirtualized__Table__headerTruncatedText, + .grid-header-cell { + display: inline-block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .ReactVirtualized__Table__headerColumn, + .ReactVirtualized__Table__rowColumn, + .grid-cell { + min-width: 0px; + border-right: 1px solid ${theme.colors.grayscale.light2}; + align-self: center; + padding: ${theme.gridUnit * 3}px; + font-size: ${theme.typography.sizes.s}px; + } + + .grid-header-cell { + font-weight: ${theme.typography.weights.bold}; + cursor: pointer; + } + + .ReactVirtualized__Table__headerColumn:last-of-type, + .ReactVirtualized__Table__rowColumn:last-of-type { + border-right: 0px; + } + + .ReactVirtualized__Table__headerColumn:focus, + .ReactVirtualized__Table__Grid:focus { + outline: none; + } + + .ReactVirtualized__Table__rowColumn { + text-overflow: ellipsis; + white-space: nowrap; + } + + .ReactVirtualized__Table__sortableHeaderColumn { + cursor: pointer; + } + + .ReactVirtualized__Table__sortableHeaderIconContainer { + display: flex; + align-items: center; + } + + .ReactVirtualized__Table__sortableHeaderIcon { + flex: 0 0 ${theme.gridUnit * 6}px; + height: 1em; + width: 1em; + fill: currentColor; + } + + .even-row { + background: ${theme.colors.grayscale.light4}; + } + + .odd-row { + background: ${theme.colors.grayscale.light5}; + } + + .header-style { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .header-style-disabled { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: ${theme.colors.grayscale.light1}; + } + + .cell-text-for-measuring { + font-family: ${theme.typography.families.sansSerif}; + font-size: ${theme.typography.sizes.s}px; + } + `} `; // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view diff --git a/superset-frontend/src/components/FilterableTable/FilterableTableStyles.less b/superset-frontend/src/components/FilterableTable/FilterableTableStyles.less deleted file mode 100644 index d921149ae5..0000000000 --- a/superset-frontend/src/components/FilterableTable/FilterableTableStyles.less +++ /dev/null @@ -1,118 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -@import '../../assets/stylesheets/less/variables.less'; - -.ReactVirtualized__Grid__innerScrollContainer { - border: 1px solid @gray-light; -} - -.ReactVirtualized__Table__headerRow { - font-weight: @font-weight-bold; - display: flex; - flex-direction: row; - align-items: center; - border: 1px solid @gray-light; -} - -.ReactVirtualized__Table__row { - display: flex; - flex-direction: row; -} - -.ReactVirtualized__Table__headerTruncatedText, -.grid-header-cell { - display: inline-block; - max-width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.ReactVirtualized__Table__headerColumn, -.ReactVirtualized__Table__rowColumn, -.grid-cell { - min-width: 0px; - border-right: 1px solid @gray-light; - align-self: center; - padding: 12px; - font-size: @font-size-s; -} - -.grid-header-cell { - font-weight: @font-weight-bold; - cursor: pointer; -} - -.ReactVirtualized__Table__headerColumn:last-of-type, -.ReactVirtualized__Table__rowColumn:last-of-type { - border-right: 0px; -} - -.ReactVirtualized__Table__headerColumn:focus, -.ReactVirtualized__Table__Grid:focus { - outline: none; -} - -.ReactVirtualized__Table__rowColumn { - text-overflow: ellipsis; - white-space: nowrap; -} - -.ReactVirtualized__Table__sortableHeaderColumn { - cursor: pointer; -} - -.ReactVirtualized__Table__sortableHeaderIconContainer { - display: flex; - align-items: center; -} - -.ReactVirtualized__Table__sortableHeaderIcon { - flex: 0 0 24px; - height: 1em; - width: 1em; - fill: currentColor; -} - -.even-row { - background: @gray-bg; -} - -.odd-row { - background: @lightest; -} - -.header-style { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.header-style-disabled { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: @gray-heading; -} - -.cell-text-for-measuring { - font-family: Helvetica, Arial, sans-serif; - font-size: @font-size-s; -}