pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: Improves the layout of the VizTypeGallery component (#15907)

Browse Source 
* 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:
Michael S. Molina 2021-07-27 15:17:36 -03:00 committed by GitHub
parent 3f5237a3c1
commit 663dd3f853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset-frontend/src/addSlice/AddSliceContainer.test.tsx
View File

@ -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,

106
superset-frontend/src/addSlice/AddSliceContainer.tsx
View File

@ -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"

23
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
View File

@ -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;
} }
`} `}
`; `;