mirror of
https://github.com/apache/superset.git
synced 2024-09-18 11:39:49 -04:00
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
This commit is contained in:
parent
c0ebd7f434
commit
a3fd2b420e
@ -19,6 +19,7 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Alert } from 'react-bootstrap';
|
import { Alert } from 'react-bootstrap';
|
||||||
|
import styled from '@superset-ui/style';
|
||||||
|
|
||||||
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
||||||
import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
|
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 ErrorMessageWithStackTrace from '../components/ErrorMessage/ErrorMessageWithStackTrace';
|
||||||
import ErrorBoundary from '../components/ErrorBoundary';
|
import ErrorBoundary from '../components/ErrorBoundary';
|
||||||
import ChartRenderer from './ChartRenderer';
|
import ChartRenderer from './ChartRenderer';
|
||||||
import './chart.less';
|
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
annotationData: PropTypes.object,
|
annotationData: PropTypes.object,
|
||||||
@ -80,6 +80,13 @@ const defaultProps = {
|
|||||||
chartStackTrace: null,
|
chartStackTrace: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Styles = styled.div`
|
||||||
|
.chart-tooltip {
|
||||||
|
opacity: 0.75;
|
||||||
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
class Chart extends React.PureComponent {
|
class Chart extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -180,8 +187,6 @@ class Chart extends React.PureComponent {
|
|||||||
|
|
||||||
const isLoading = chartStatus === 'loading';
|
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;
|
const isFaded = refreshOverlayVisible && !errorMessage;
|
||||||
this.renderContainerStartTime = Logger.getTimestamp();
|
this.renderContainerStartTime = Logger.getTimestamp();
|
||||||
if (chartStatus === 'failed') {
|
if (chartStatus === 'failed') {
|
||||||
@ -195,12 +200,9 @@ class Chart extends React.PureComponent {
|
|||||||
onError={this.handleRenderContainerFailure}
|
onError={this.handleRenderContainerFailure}
|
||||||
showMessage={false}
|
showMessage={false}
|
||||||
>
|
>
|
||||||
<div
|
<Styles className="chart-container">
|
||||||
className={`chart-container ${isLoading ? 'is-loading' : ''}`}
|
|
||||||
style={containerStyles}
|
|
||||||
>
|
|
||||||
<div className={`slice_container ${isFaded ? ' faded' : ''}`}>
|
<div className={`slice_container ${isFaded ? ' faded' : ''}`}>
|
||||||
<ChartRenderer {...this.props} />
|
<ChartRenderer {...this.props} data-test={this.props.vizType} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!isLoading && !chartAlert && isFaded && (
|
{!isLoading && !chartAlert && isFaded && (
|
||||||
@ -212,7 +214,7 @@ class Chart extends React.PureComponent {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{isLoading && <Loading />}
|
{isLoading && <Loading />}
|
||||||
</div>
|
</Styles>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -55,7 +55,7 @@ const SupersetButton = styled(BootstrapButton)`
|
|||||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||||
border: none;
|
border: none;
|
||||||
color: ${({ theme }) => theme.colors.secondary.light5};
|
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};
|
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||||
min-width: ${({ theme }) => theme.gridUnit * 36}px;
|
min-width: ${({ theme }) => theme.gridUnit * 36}px;
|
||||||
min-height: ${({ theme }) => theme.gridUnit * 8}px;
|
min-height: ${({ theme }) => theme.gridUnit * 8}px;
|
||||||
|
@ -37,7 +37,7 @@ const StyledHeader = styled.header`
|
|||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
li {
|
li {
|
||||||
a {
|
a {
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s};
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
padding: ${({ theme }) => theme.gridUnit * 2}px;
|
padding: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
margin: ${({ theme }) => theme.gridUnit * 2}px;
|
margin: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
color: ${({ theme }) => theme.colors.secondary.dark1};
|
color: ${({ theme }) => theme.colors.secondary.dark1};
|
||||||
|
@ -33,7 +33,7 @@ import './TableSelector.less';
|
|||||||
|
|
||||||
const FieldTitle = styled.p`
|
const FieldTitle = styled.p`
|
||||||
color: ${({ theme }) => theme.colors.secondary.light2};
|
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;
|
margin: 20px 0 10px 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
`;
|
`;
|
||||||
|
@ -56,7 +56,7 @@ const Styles = styled.div`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
align-content: stretch;
|
align-content: stretch;
|
||||||
div:last-of-type {
|
& > div:last-of-type {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -24,6 +24,7 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
|
|||||||
import { Button } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { SupersetClient } from '@superset-ui/connection';
|
import { SupersetClient } from '@superset-ui/connection';
|
||||||
|
import styled from '@superset-ui/style';
|
||||||
|
|
||||||
import FormLabel from 'src/components/FormLabel';
|
import FormLabel from 'src/components/FormLabel';
|
||||||
|
|
||||||
@ -99,6 +100,13 @@ const defaultProps = {
|
|||||||
instantFiltering: false,
|
instantFiltering: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Styles = styled.div`
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
`;
|
||||||
|
|
||||||
class FilterBox extends React.Component {
|
class FilterBox extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -424,8 +432,7 @@ class FilterBox extends React.Component {
|
|||||||
const { instantFiltering } = this.props;
|
const { instantFiltering } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-container">
|
<Styles>
|
||||||
<div className="scrollbar-content">
|
|
||||||
{this.renderDateFilter()}
|
{this.renderDateFilter()}
|
||||||
{this.renderDatasourceFilters()}
|
{this.renderDatasourceFilters()}
|
||||||
{this.renderFilters()}
|
{this.renderFilters()}
|
||||||
@ -439,8 +446,7 @@ class FilterBox extends React.Component {
|
|||||||
{t('Apply')}
|
{t('Apply')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Styles>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user