mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -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 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>
|
||||
);
|
||||
}
|
||||
|
@ -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: 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;
|
||||
|
@ -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};
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user