mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
refactor: Replace SqlLab components' styles using Emotion & theme variables (#11780)
* Replace inline styles for SqlLab components using Emotion and Theme variables * Replace styles classnames for SqlLab components using Emotion * Remove unnecessary styles & round padding value
This commit is contained in:
parent
6cb820583b
commit
91bcbc8350
@ -58,6 +58,10 @@ const TableStyles = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTableStylesContainer = styled.div`
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
class QuerySearch extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -293,11 +297,11 @@ class QuerySearch extends React.PureComponent {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="scrollbar-container">
|
||||
<StyledTableStylesContainer>
|
||||
{this.state.queriesLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<TableStyles className="scrollbar-content">
|
||||
<TableStyles>
|
||||
<QueryTable
|
||||
columns={[
|
||||
'state',
|
||||
@ -317,7 +321,7 @@ class QuerySearch extends React.PureComponent {
|
||||
/>
|
||||
</TableStyles>
|
||||
)}
|
||||
</div>
|
||||
</StyledTableStylesContainer>
|
||||
</TableWrapper>
|
||||
);
|
||||
}
|
||||
|
@ -118,7 +118,6 @@ const QueryTable = props => {
|
||||
);
|
||||
q.started = moment(q.startDttm).format('HH:mm:ss');
|
||||
q.querylink = (
|
||||
<div style={{ width: '100px' }}>
|
||||
<Button
|
||||
buttonSize="small"
|
||||
buttonStyle="link"
|
||||
@ -127,7 +126,6 @@ const QueryTable = props => {
|
||||
<i className="fa fa-external-link m-r-3" />
|
||||
{t('Edit')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
q.sql = (
|
||||
<Well>
|
||||
@ -172,7 +170,6 @@ const QueryTable = props => {
|
||||
}
|
||||
q.progress = (
|
||||
<ProgressBar
|
||||
style={{ width: '75px' }}
|
||||
striped
|
||||
now={q.progress}
|
||||
label={`${q.progress.toFixed(0)}%`}
|
||||
@ -193,7 +190,7 @@ const QueryTable = props => {
|
||||
</div>
|
||||
);
|
||||
q.actions = (
|
||||
<div style={{ width: '75px' }}>
|
||||
<div>
|
||||
<Link
|
||||
className="fa fa-pencil m-r-3"
|
||||
onClick={() => restoreSql(query)}
|
||||
|
@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
|
||||
import Form from 'react-jsonschema-form';
|
||||
import chrono from 'chrono-node';
|
||||
import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
|
||||
import Button from 'src/components/Button';
|
||||
import ModalTrigger from 'src/components/ModalTrigger';
|
||||
@ -92,6 +92,10 @@ const defaultProps = {
|
||||
tooltip: null,
|
||||
};
|
||||
|
||||
const StyledRow = styled(Row)`
|
||||
padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
`;
|
||||
|
||||
class ScheduleQueryButton extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -139,7 +143,7 @@ class ScheduleQueryButton extends React.PureComponent {
|
||||
renderModalBody() {
|
||||
return (
|
||||
<FormGroup>
|
||||
<Row style={{ paddingBottom: '10px' }}>
|
||||
<StyledRow>
|
||||
<Col md={12}>
|
||||
<FormLabel className="control-label" htmlFor="embed-height">
|
||||
{t('Label')}
|
||||
@ -151,8 +155,8 @@ class ScheduleQueryButton extends React.PureComponent {
|
||||
onChange={this.onLabelChange}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ paddingBottom: '10px' }}>
|
||||
</StyledRow>
|
||||
<StyledRow>
|
||||
<Col md={12}>
|
||||
<FormLabel className="control-label" htmlFor="embed-height">
|
||||
{t('Description')}
|
||||
@ -164,7 +168,7 @@ class ScheduleQueryButton extends React.PureComponent {
|
||||
onChange={this.onDescriptionChange}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</StyledRow>
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<div className="json-schema">
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from 'src/components/Button';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import TableElement from './TableElement';
|
||||
import TableSelector from '../../components/TableSelector';
|
||||
|
||||
@ -39,6 +39,15 @@ const defaultProps = {
|
||||
tables: [],
|
||||
};
|
||||
|
||||
const StyledScrollbarContainer = styled.div`
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
const StyledScrollbarContent = styled.div`
|
||||
height: ${props => props.contentHeight}px;
|
||||
`;
|
||||
|
||||
export default class SqlEditorLeftBar extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -130,11 +139,8 @@ export default class SqlEditorLeftBar extends React.PureComponent {
|
||||
tableNameSticky={false}
|
||||
/>
|
||||
<div className="divider" />
|
||||
<div className="scrollbar-container">
|
||||
<div
|
||||
className="scrollbar-content"
|
||||
style={{ height: tableMetaDataHeight }}
|
||||
>
|
||||
<StyledScrollbarContainer>
|
||||
<StyledScrollbarContent contentHeight={tableMetaDataHeight}>
|
||||
{this.props.tables.map(table => (
|
||||
<TableElement
|
||||
table={table}
|
||||
@ -142,8 +148,8 @@ export default class SqlEditorLeftBar extends React.PureComponent {
|
||||
actions={this.props.actions}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</StyledScrollbarContent>
|
||||
</StyledScrollbarContainer>
|
||||
{shouldShowReset && (
|
||||
<Button
|
||||
buttonSize="small"
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Badge } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
|
||||
import Button from 'src/components/Button';
|
||||
@ -37,6 +37,12 @@ const defaultProps = {
|
||||
code: '{}',
|
||||
};
|
||||
|
||||
const StyledConfigEditor = styled(ConfigEditor)`
|
||||
&.ace_editor {
|
||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
}
|
||||
`;
|
||||
|
||||
export default class TemplateParamsEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -96,10 +102,9 @@ export default class TemplateParamsEditor extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
{this.renderDoc()}
|
||||
<ConfigEditor
|
||||
<StyledConfigEditor
|
||||
keywords={[]}
|
||||
mode={this.props.language}
|
||||
style={{ border: '1px solid #CCC' }}
|
||||
minLines={25}
|
||||
maxLines={50}
|
||||
onChange={this.onChange}
|
||||
|
@ -239,10 +239,6 @@ div.Workspace {
|
||||
.SouthPane {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-container {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.SqlEditorTabs li {
|
||||
@ -371,11 +367,6 @@ div.Workspace {
|
||||
border-bottom: 1px solid @gray-bg;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.scrollbar-container {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
Loading…
Reference in New Issue
Block a user