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"
|
||||
onChange={this.changeDatasource}
|
||||
options={this.props.datasources}
|
||||
placeholder={t('Choose a datasource')}
|
||||
placeholder={t('Choose a dataset')}
|
||||
value={
|
||||
this.state.datasourceValue
|
||||
? {
|
||||
|
@ -134,6 +134,7 @@ export default class AddSliceContainer extends React.PureComponent<
|
|||
name="select-vis-type"
|
||||
onChange={this.changeVisType}
|
||||
value={this.state.visType}
|
||||
labelBsStyle="primary"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
|
|
@ -221,7 +221,7 @@ const SupersetButton = styled(BootstrapButton)`
|
|||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
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,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.string.isRequired,
|
||||
labelBsStyle: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
onChange: () => {},
|
||||
labelBsStyle: 'default',
|
||||
};
|
||||
|
||||
const registry = getChartMetadataRegistry();
|
||||
|
||||
const IMAGE_PER_ROW = 6;
|
||||
const LABEL_STYLE = { cursor: 'pointer' };
|
||||
const DEFAULT_ORDER = [
|
||||
'line',
|
||||
'big_number',
|
||||
|
@ -160,7 +161,7 @@ export default class VizTypeControl extends React.PureComponent {
|
|||
|
||||
render() {
|
||||
const { filter, showModal } = this.state;
|
||||
const { value } = this.props;
|
||||
const { value, labelBsStyle } = this.props;
|
||||
|
||||
const filterString = filter.toLowerCase();
|
||||
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}`}
|
||||
</Label>
|
||||
{!registry.has(value) && (
|
||||
|
|
Loading…
Reference in New Issue