mirror of https://github.com/apache/superset.git
style: improve the "Create New Chart" screen's usability (#11383)
* style: make disabled buttons more readable * making more of a CTA for VizControl
This commit is contained in:
parent
5a3d23dc01
commit
64b5aae6bc
|
@ -103,7 +103,7 @@ export default class AddSliceContainer extends React.PureComponent<
|
||||||
name="select-datasource"
|
name="select-datasource"
|
||||||
onChange={this.changeDatasource}
|
onChange={this.changeDatasource}
|
||||||
options={this.props.datasources}
|
options={this.props.datasources}
|
||||||
placeholder={t('Choose a datasource')}
|
placeholder={t('Choose a dataset')}
|
||||||
value={
|
value={
|
||||||
this.state.datasourceValue
|
this.state.datasourceValue
|
||||||
? {
|
? {
|
||||||
|
@ -134,6 +134,7 @@ export default class AddSliceContainer extends React.PureComponent<
|
||||||
name="select-vis-type"
|
name="select-vis-type"
|
||||||
onChange={this.changeVisType}
|
onChange={this.changeVisType}
|
||||||
value={this.state.visType}
|
value={this.state.visType}
|
||||||
|
labelBsStyle="primary"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -221,7 +221,7 @@ const SupersetButton = styled(BootstrapButton)`
|
||||||
&[disabled],
|
&[disabled],
|
||||||
&[disabled]:hover {
|
&[disabled]:hover {
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light2};
|
background-color: ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
color: ${({ theme }) => theme.colors.grayscale.light1};
|
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -38,16 +38,17 @@ const propTypes = {
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
value: PropTypes.string.isRequired,
|
value: PropTypes.string.isRequired,
|
||||||
|
labelBsStyle: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
onChange: () => {},
|
onChange: () => {},
|
||||||
|
labelBsStyle: 'default',
|
||||||
};
|
};
|
||||||
|
|
||||||
const registry = getChartMetadataRegistry();
|
const registry = getChartMetadataRegistry();
|
||||||
|
|
||||||
const IMAGE_PER_ROW = 6;
|
const IMAGE_PER_ROW = 6;
|
||||||
const LABEL_STYLE = { cursor: 'pointer' };
|
|
||||||
const DEFAULT_ORDER = [
|
const DEFAULT_ORDER = [
|
||||||
'line',
|
'line',
|
||||||
'big_number',
|
'big_number',
|
||||||
|
@ -160,7 +161,7 @@ export default class VizTypeControl extends React.PureComponent {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { filter, showModal } = this.state;
|
const { filter, showModal } = this.state;
|
||||||
const { value } = this.props;
|
const { value, labelBsStyle } = this.props;
|
||||||
|
|
||||||
const filterString = filter.toLowerCase();
|
const filterString = filter.toLowerCase();
|
||||||
const filteredTypes = DEFAULT_ORDER.filter(type => registry.has(type))
|
const filteredTypes = DEFAULT_ORDER.filter(type => registry.has(type))
|
||||||
|
@ -198,7 +199,7 @@ export default class VizTypeControl extends React.PureComponent {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<>
|
<>
|
||||||
<Label onClick={this.toggleModal} style={LABEL_STYLE}>
|
<Label onClick={this.toggleModal} bsStyle={labelBsStyle}>
|
||||||
{registry.has(value) ? registry.get(value).name : `${value}`}
|
{registry.has(value) ? registry.get(value).name : `${value}`}
|
||||||
</Label>
|
</Label>
|
||||||
{!registry.has(value) && (
|
{!registry.has(value) && (
|
||||||
|
|
Loading…
Reference in New Issue