mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
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 React from 'react';
|
||||||
import { ReactWrapper } from 'enzyme';
|
import { ReactWrapper } from 'enzyme';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import Select from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import AddSliceContainer, {
|
import AddSliceContainer, {
|
||||||
AddSliceContainerProps,
|
AddSliceContainerProps,
|
||||||
AddSliceContainerState,
|
AddSliceContainerState,
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from 'src/components/Button';
|
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 { css, styled, t } from '@superset-ui/core';
|
||||||
|
|
||||||
import VizTypeGallery, {
|
import VizTypeGallery, {
|
||||||
@ -42,21 +42,45 @@ export type AddSliceContainerState = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const ESTIMATED_NAV_HEIGHT = '56px';
|
const ESTIMATED_NAV_HEIGHT = '56px';
|
||||||
const styleSelectContainer = { width: 600, marginBottom: '10px' };
|
|
||||||
const StyledContainer = styled.div`
|
const StyledContainer = styled.div`
|
||||||
flex: 1 1 auto;
|
${({ theme }) => `
|
||||||
display: flex;
|
flex: 1 1 auto;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
width: 100%;
|
justify-content: space-between;
|
||||||
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
|
width: 100%;
|
||||||
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
|
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
|
||||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
border-radius: ${theme.gridUnit}px;
|
||||||
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
background-color: ${theme.colors.grayscale.light5};
|
||||||
h3 {
|
margin-left: auto;
|
||||||
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
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`
|
const cssStatic = css`
|
||||||
@ -64,9 +88,12 @@ const cssStatic = css`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledVizTypeGallery = styled(VizTypeGallery)`
|
const StyledVizTypeGallery = styled(VizTypeGallery)`
|
||||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
${({ theme }) => `
|
||||||
margin: ${({ theme }) => theme.gridUnit * 3}px 0px;
|
border: 1px solid ${theme.colors.grayscale.light2};
|
||||||
flex: 1 1 auto;
|
border-radius: ${theme.gridUnit}px;
|
||||||
|
margin: ${theme.gridUnit * 3}px 0px;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default class AddSliceContainer extends React.PureComponent<
|
export default class AddSliceContainer extends React.PureComponent<
|
||||||
@ -98,10 +125,10 @@ export default class AddSliceContainer extends React.PureComponent<
|
|||||||
window.location.href = this.exploreUrl();
|
window.location.href = this.exploreUrl();
|
||||||
}
|
}
|
||||||
|
|
||||||
changeDatasource(option: { value: string }) {
|
changeDatasource(value: string) {
|
||||||
this.setState({
|
this.setState({
|
||||||
datasourceValue: option.value,
|
datasourceValue: value,
|
||||||
datasourceId: option.value.split('__')[0],
|
datasourceId: value.split('__')[0],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,31 +142,22 @@ export default class AddSliceContainer extends React.PureComponent<
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<StyledContainer className="container">
|
<StyledContainer>
|
||||||
<h3 css={cssStatic}>{t('Create a new chart')}</h3>
|
<h3 css={cssStatic}>{t('Create a new chart')}</h3>
|
||||||
<div css={cssStatic}>
|
<div className="dataset">
|
||||||
<p>{t('Choose a dataset')}</p>
|
<Select
|
||||||
<div style={styleSelectContainer}>
|
ariaLabel={t('Dataset')}
|
||||||
<Select
|
name="select-datasource"
|
||||||
clearable={false}
|
header={t('Choose a dataset')}
|
||||||
ignoreAccents={false}
|
onChange={this.changeDatasource}
|
||||||
name="select-datasource"
|
options={this.props.datasources}
|
||||||
onChange={this.changeDatasource}
|
placeholder={t('Choose a dataset')}
|
||||||
options={this.props.datasources}
|
showSearch
|
||||||
placeholder={t('Choose a dataset')}
|
value={this.state.datasourceValue}
|
||||||
value={
|
/>
|
||||||
this.state.datasourceValue
|
<span>
|
||||||
? {
|
|
||||||
value: this.state.datasourceValue,
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
width={600}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="text-muted">
|
|
||||||
{t(
|
{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
|
<a
|
||||||
href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
|
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`
|
const RightPane = styled.div`
|
||||||
grid-area: main;
|
grid-area: main;
|
||||||
overflow-y: scroll;
|
overflow-y: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SearchWrapper = styled.div`
|
const SearchWrapper = styled.div`
|
||||||
${({ theme }) => `
|
${({ theme }) => `
|
||||||
grid-area: search;
|
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 {
|
input {
|
||||||
font-size: ${theme.typography.sizes.s};
|
font-size: ${theme.typography.sizes.s};
|
||||||
}
|
}
|
||||||
@ -188,6 +191,9 @@ const InputIconAlignment = styled.div`
|
|||||||
const SelectorLabel = styled.button`
|
const SelectorLabel = styled.button`
|
||||||
${({ theme }) => `
|
${({ theme }) => `
|
||||||
all: unset; // remove default button styles
|
all: unset; // remove default button styles
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: ${theme.gridUnit}px 0;
|
margin: ${theme.gridUnit}px 0;
|
||||||
padding: 0 ${theme.gridUnit * 6}px 0 ${theme.gridUnit}px;
|
padding: 0 ${theme.gridUnit * 6}px 0 ${theme.gridUnit}px;
|
||||||
@ -218,15 +224,18 @@ const SelectorLabel = styled.button`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
& span:first-of-type svg {
|
||||||
position: relative;
|
margin-top: ${theme.gridUnit * 1.5}px;
|
||||||
top: ${theme.gridUnit * 2}px
|
}
|
||||||
|
|
||||||
|
& span:last-of-type svg {
|
||||||
|
position: absolute;
|
||||||
|
top: ${theme.gridUnit * 2}px;
|
||||||
|
right: ${theme.gridUnit * 2}px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
|
||||||
right: ${theme.gridUnit * 2}px;
|
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user