From a3fd2b420e23fddc1693f5aa7c36f89918e2cbae Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 13 Aug 2020 11:50:14 -0700 Subject: [PATCH] fix: More tweaks needed after adding Doctype tag (#10504) * fixing last-of-type specificity * Simplifying/consolidating styles * fixing filterbox in explore * linting * adding some px to font sizes * fixing in-dash overflow * removing px for one special fontsize case * simplifying, addressing comments --- superset-frontend/src/chart/Chart.jsx | 20 +++++----- superset-frontend/src/chart/chart.less | 24 ----------- .../src/components/Button/index.tsx | 2 +- .../src/components/Menu/SubMenu.tsx | 2 +- .../src/components/TableSelector.jsx | 2 +- .../explore/components/ExploreChartPanel.jsx | 2 +- .../visualizations/FilterBox/FilterBox.jsx | 40 +++++++++++-------- 7 files changed, 38 insertions(+), 54 deletions(-) delete mode 100644 superset-frontend/src/chart/chart.less diff --git a/superset-frontend/src/chart/Chart.jsx b/superset-frontend/src/chart/Chart.jsx index 6e4374da1..2a6b846c6 100644 --- a/superset-frontend/src/chart/Chart.jsx +++ b/superset-frontend/src/chart/Chart.jsx @@ -19,6 +19,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Alert } from 'react-bootstrap'; +import styled from '@superset-ui/style'; import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags'; import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils'; @@ -27,7 +28,6 @@ import RefreshChartOverlay from '../components/RefreshChartOverlay'; import ErrorMessageWithStackTrace from '../components/ErrorMessage/ErrorMessageWithStackTrace'; import ErrorBoundary from '../components/ErrorBoundary'; import ChartRenderer from './ChartRenderer'; -import './chart.less'; const propTypes = { annotationData: PropTypes.object, @@ -80,6 +80,13 @@ const defaultProps = { chartStackTrace: null, }; +const Styles = styled.div` + .chart-tooltip { + opacity: 0.75; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + } +`; + class Chart extends React.PureComponent { constructor(props) { super(props); @@ -180,8 +187,6 @@ class Chart extends React.PureComponent { const isLoading = chartStatus === 'loading'; - // this allows to be positioned in the middle of the chart - const containerStyles = isLoading ? { height, width } : null; const isFaded = refreshOverlayVisible && !errorMessage; this.renderContainerStartTime = Logger.getTimestamp(); if (chartStatus === 'failed') { @@ -195,12 +200,9 @@ class Chart extends React.PureComponent { onError={this.handleRenderContainerFailure} showMessage={false} > -
+
- +
{!isLoading && !chartAlert && isFaded && ( @@ -212,7 +214,7 @@ class Chart extends React.PureComponent { )} {isLoading && } -
+ ); } diff --git a/superset-frontend/src/chart/chart.less b/superset-frontend/src/chart/chart.less deleted file mode 100644 index ce9e7c7a3..000000000 --- a/superset-frontend/src/chart/chart.less +++ /dev/null @@ -1,24 +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 '../../stylesheets/less/variables.less'; - -.chart-tooltip { - opacity: 0.75; - font-size: @font-size-s; -} diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx index 24028d04a..e306a7a8a 100644 --- a/superset-frontend/src/components/Button/index.tsx +++ b/superset-frontend/src/components/Button/index.tsx @@ -55,7 +55,7 @@ const SupersetButton = styled(BootstrapButton)` border-radius: ${({ theme }) => theme.borderRadius}px; border: none; color: ${({ theme }) => theme.colors.secondary.light5}; - font-size: ${({ theme }) => theme.typography.sizes.s}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; font-weight: ${({ theme }) => theme.typography.weights.bold}; min-width: ${({ theme }) => theme.gridUnit * 36}px; min-height: ${({ theme }) => theme.gridUnit * 8}px; diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx index e34fde210..f71efd42a 100644 --- a/superset-frontend/src/components/Menu/SubMenu.tsx +++ b/superset-frontend/src/components/Menu/SubMenu.tsx @@ -37,7 +37,7 @@ const StyledHeader = styled.header` .navbar-nav { li { a { - font-size: ${({ theme }) => theme.typography.sizes.s}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; padding: ${({ theme }) => theme.gridUnit * 2}px; margin: ${({ theme }) => theme.gridUnit * 2}px; color: ${({ theme }) => theme.colors.secondary.dark1}; diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx index 97693d845..a76ae0404 100644 --- a/superset-frontend/src/components/TableSelector.jsx +++ b/superset-frontend/src/components/TableSelector.jsx @@ -33,7 +33,7 @@ import './TableSelector.less'; const FieldTitle = styled.p` color: ${({ theme }) => theme.colors.secondary.light2}; - font-size: ${({ theme }) => theme.typography.sizes.s}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; margin: 20px 0 10px 0; text-transform: uppercase; `; diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index 749755e13..3826b31d7 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx @@ -56,7 +56,7 @@ const Styles = styled.div` flex-direction: column; align-items: stretch; align-content: stretch; - div:last-of-type { + & > div:last-of-type { flex-basis: 100%; } `; diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index 3b70dd4b3..c223a815d 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx @@ -24,6 +24,7 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select'; import { Button } from 'react-bootstrap'; import { t } from '@superset-ui/translation'; import { SupersetClient } from '@superset-ui/connection'; +import styled from '@superset-ui/style'; import FormLabel from 'src/components/FormLabel'; @@ -99,6 +100,13 @@ const defaultProps = { instantFiltering: false, }; +const Styles = styled.div` + height: 100%; + min-height: 100%; + max-height: 100%; + overflow: visible; +`; + class FilterBox extends React.Component { constructor(props) { super(props); @@ -424,23 +432,21 @@ class FilterBox extends React.Component { const { instantFiltering } = this.props; return ( -
-
- {this.renderDateFilter()} - {this.renderDatasourceFilters()} - {this.renderFilters()} - {!instantFiltering && ( - - )} -
-
+ + {this.renderDateFilter()} + {this.renderDatasourceFilters()} + {this.renderFilters()} + {!instantFiltering && ( + + )} + ); } }