You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/04/04 14:11:33 UTC

[superset] branch master updated: chore: Remove FilterbaleTableStyles.less (#19442)

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7914296d8a chore: Remove FilterbaleTableStyles.less (#19442)
7914296d8a is described below

commit 7914296d8a1fa142337792341f6f500812581893
Author: Geido <60...@users.noreply.github.com>
AuthorDate: Mon Apr 4 17:11:22 2022 +0300

    chore: Remove FilterbaleTableStyles.less (#19442)
    
    * Remove FilterbaleTablesStyles less
    
    * Add theme top level
---
 superset-frontend/src/SqlLab/App.jsx               |   1 -
 .../components/FilterableTable/FilterableTable.tsx | 108 ++++++++++++++++++-
 .../FilterableTable/FilterableTableStyles.less     | 118 ---------------------
 3 files changed, 104 insertions(+), 123 deletions(-)

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