You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2020/08/13 18:51:03 UTC
[incubator-superset] branch master updated: fix: More tweaks needed
after adding Doctype tag (#10504)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new a3fd2b4 fix: More tweaks needed after adding Doctype tag (#10504)
a3fd2b4 is described below
commit a3fd2b420e23fddc1693f5aa7c36f89918e2cbae
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Thu Aug 13 11:50:14 2020 -0700
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 -------------
superset-frontend/src/components/Button/index.tsx | 2 +-
superset-frontend/src/components/Menu/SubMenu.tsx | 2 +-
superset-frontend/src/components/TableSelector.jsx | 2 +-
.../src/explore/components/ExploreChartPanel.jsx | 2 +-
.../src/visualizations/FilterBox/FilterBox.jsx | 40 +++++++++++++---------
7 files changed, 38 insertions(+), 54 deletions(-)
diff --git a/superset-frontend/src/chart/Chart.jsx b/superset-frontend/src/chart/Chart.jsx
index 6e4374d..2a6b846 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 <Loading /> 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}
>
- <div
- className={`chart-container ${isLoading ? 'is-loading' : ''}`}
- style={containerStyles}
- >
+ <Styles className="chart-container">
<div className={`slice_container ${isFaded ? ' faded' : ''}`}>
- <ChartRenderer {...this.props} />
+ <ChartRenderer {...this.props} data-test={this.props.vizType} />
</div>
{!isLoading && !chartAlert && isFaded && (
@@ -212,7 +214,7 @@ class Chart extends React.PureComponent {
)}
{isLoading && <Loading />}
- </div>
+ </Styles>
</ErrorBoundary>
);
}
diff --git a/superset-frontend/src/chart/chart.less b/superset-frontend/src/chart/chart.less
deleted file mode 100644
index ce9e7c7..0000000
--- 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 24028d0..e306a7a 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 e34fde2..f71efd4 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 97693d8..a76ae04 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 749755e..3826b31 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 3b70dd4..c223a81 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 (
- <div className="scrollbar-container">
- <div className="scrollbar-content">
- {this.renderDateFilter()}
- {this.renderDatasourceFilters()}
- {this.renderFilters()}
- {!instantFiltering && (
- <Button
- bsSize="small"
- bsStyle="primary"
- onClick={this.clickApply.bind(this)}
- disabled={!this.state.hasChanged}
- >
- {t('Apply')}
- </Button>
- )}
- </div>
- </div>
+ <Styles>
+ {this.renderDateFilter()}
+ {this.renderDatasourceFilters()}
+ {this.renderFilters()}
+ {!instantFiltering && (
+ <Button
+ bsSize="small"
+ bsStyle="primary"
+ onClick={this.clickApply.bind(this)}
+ disabled={!this.state.hasChanged}
+ >
+ {t('Apply')}
+ </Button>
+ )}
+ </Styles>
);
}
}