mirror of https://github.com/apache/superset.git
chore: Improves the layout of the VizTypeGallery component (#15907)
* chore: Improves the layout of the VizTypeGallery component * copy edit * Enables search Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
parent
3f5237a3c1
commit
663dd3f853
|
@ -19,7 +19,7 @@
|
|||
import React from 'react';
|
||||
import { ReactWrapper } from 'enzyme';
|
||||
import Button from 'src/components/Button';
|
||||
import Select from 'src/components/Select';
|
||||
import { Select } from 'src/components';
|
||||
import AddSliceContainer, {
|
||||
AddSliceContainerProps,
|
||||
AddSliceContainerState,
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import Button from 'src/components/Button';
|
||||
import Select from 'src/components/Select';
|
||||
import { Select } from 'src/components';
|
||||
import { css, styled, t } from '@superset-ui/core';
|
||||
|
||||
import VizTypeGallery, {
|
||||
|
@ -42,21 +42,45 @@ export type AddSliceContainerState = {
|
|||
};
|
||||
|
||||
const ESTIMATED_NAV_HEIGHT = '56px';
|
||||
const styleSelectContainer = { width: 600, marginBottom: '10px' };
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
|
||||
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
|
||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
||||
h3 {
|
||||
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
||||
}
|
||||
${({ theme }) => `
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
|
||||
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ${theme.gridUnit * 4}px;
|
||||
padding-right: ${theme.gridUnit * 4}px;
|
||||
padding-bottom: ${theme.gridUnit * 4}px;
|
||||
|
||||
h3 {
|
||||
padding-bottom: ${theme.gridUnit * 3}px;
|
||||
}
|
||||
|
||||
& .dataset {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
min-width: 200px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: ${theme.colors.grayscale.light1};
|
||||
margin-left: ${theme.gridUnit * 4}px;
|
||||
margin-top: ${theme.gridUnit * 5}px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const cssStatic = css`
|
||||
|
@ -64,9 +88,12 @@ const cssStatic = css`
|
|||
`;
|
||||
|
||||
const StyledVizTypeGallery = styled(VizTypeGallery)`
|
||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
margin: ${({ theme }) => theme.gridUnit * 3}px 0px;
|
||||
flex: 1 1 auto;
|
||||
${({ theme }) => `
|
||||
border: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
margin: ${theme.gridUnit * 3}px 0px;
|
||||
flex: 1 1 auto;
|
||||
`}
|
||||
`;
|
||||
|
||||
export default class AddSliceContainer extends React.PureComponent<
|
||||
|
@ -98,10 +125,10 @@ export default class AddSliceContainer extends React.PureComponent<
|
|||
window.location.href = this.exploreUrl();
|
||||
}
|
||||
|
||||
changeDatasource(option: { value: string }) {
|
||||
changeDatasource(value: string) {
|
||||
this.setState({
|
||||
datasourceValue: option.value,
|
||||
datasourceId: option.value.split('__')[0],
|
||||
datasourceValue: value,
|
||||
datasourceId: value.split('__')[0],
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -115,31 +142,22 @@ export default class AddSliceContainer extends React.PureComponent<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<StyledContainer className="container">
|
||||
<StyledContainer>
|
||||
<h3 css={cssStatic}>{t('Create a new chart')}</h3>
|
||||
<div css={cssStatic}>
|
||||
<p>{t('Choose a dataset')}</p>
|
||||
<div style={styleSelectContainer}>
|
||||
<Select
|
||||
clearable={false}
|
||||
ignoreAccents={false}
|
||||
name="select-datasource"
|
||||
onChange={this.changeDatasource}
|
||||
options={this.props.datasources}
|
||||
placeholder={t('Choose a dataset')}
|
||||
value={
|
||||
this.state.datasourceValue
|
||||
? {
|
||||
value: this.state.datasourceValue,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
width={600}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-muted">
|
||||
<div className="dataset">
|
||||
<Select
|
||||
ariaLabel={t('Dataset')}
|
||||
name="select-datasource"
|
||||
header={t('Choose a dataset')}
|
||||
onChange={this.changeDatasource}
|
||||
options={this.props.datasources}
|
||||
placeholder={t('Choose a dataset')}
|
||||
showSearch
|
||||
value={this.state.datasourceValue}
|
||||
/>
|
||||
<span>
|
||||
{t(
|
||||
'If the dataset you are looking for is not available in the list, follow the instructions on how to add it in the Superset tutorial.',
|
||||
"If you can't find a dataset, follow the instructions on how to add it in the Superset tutorial.",
|
||||
)}{' '}
|
||||
<a
|
||||
href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
|
||||
|
|
|
@ -161,13 +161,16 @@ const LeftPane = styled.div`
|
|||
|
||||
const RightPane = styled.div`
|
||||
grid-area: main;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
const SearchWrapper = styled.div`
|
||||
${({ theme }) => `
|
||||
grid-area: search;
|
||||
margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
|
||||
margin-top: ${theme.gridUnit * 3}px;
|
||||
margin-bottom: ${theme.gridUnit}px;
|
||||
margin-left: ${theme.gridUnit * 3}px;
|
||||
margin-right: ${theme.gridUnit * 3}px;
|
||||
input {
|
||||
font-size: ${theme.typography.sizes.s};
|
||||
}
|
||||
|
@ -188,6 +191,9 @@ const InputIconAlignment = styled.div`
|
|||
const SelectorLabel = styled.button`
|
||||
${({ theme }) => `
|
||||
all: unset; // remove default button styles
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: ${theme.gridUnit}px 0;
|
||||
padding: 0 ${theme.gridUnit * 6}px 0 ${theme.gridUnit}px;
|
||||
|
@ -218,15 +224,18 @@ const SelectorLabel = styled.button`
|
|||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: ${theme.gridUnit * 2}px
|
||||
& span:first-of-type svg {
|
||||
margin-top: ${theme.gridUnit * 1.5}px;
|
||||
}
|
||||
|
||||
& span:last-of-type svg {
|
||||
position: absolute;
|
||||
top: ${theme.gridUnit * 2}px;
|
||||
right: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
right: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue