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

fix(gallery): Hide the bottom info section when no chart is being selected (#16840)

Browse Source
This commit is contained in:
Stephen Liu 2021-09-27 15:21:25 +08:00 committed by GitHub
parent 0a8d0c6e7f
commit 100760c464
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,17 +125,23 @@ const RECOMMENDED_TAGS = [t('Popular'), t('ECharts'), t('Advanced-Analytics')];
export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control'; export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
const VizPickerLayout = styled.div` const VizPickerLayout = styled.div<{ isSelectedVizMetadata: boolean }>`
display: grid; ${({ isSelectedVizMetadata }) => `
grid-template-rows: auto minmax(100px, 1fr) minmax(200px, 35%); display: grid;
// em is used here because the sidebar should be sized to fit the longest standard tag grid-template-rows: ${
grid-template-columns: minmax(14em, auto) 5fr; isSelectedVizMetadata
grid-template-areas: ? `auto minmax(100px, 1fr) minmax(200px, 35%)`
'sidebar search' : 'auto minmax(100px, 1fr)'
'sidebar main' };
'details details'; // em is used here because the sidebar should be sized to fit the longest standard tag
height: 70vh; grid-template-columns: minmax(14em, auto) 5fr;
overflow: auto; grid-template-areas:
'sidebar search'
'sidebar main'
'details details';
height: 70vh;
overflow: auto;
`}
`; `;
const SectionTitle = styled.h3` const SectionTitle = styled.h3`
@ -269,15 +275,6 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
'description examples'; 'description examples';
`; `;
const DetailsEmpty = (theme: SupersetTheme) => css`
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-style: italic;
color: ${theme.colors.grayscale.light1};
`;
// overflow hidden on the details pane and overflow auto on the description // overflow hidden on the details pane and overflow auto on the description
// (plus grid layout) enables the description to scroll while the header stays in place. // (plus grid layout) enables the description to scroll while the header stays in place.
const TagsWrapper = styled.div` const TagsWrapper = styled.div`
@ -642,7 +639,10 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
}; };
return ( return (
<VizPickerLayout className={className}> <VizPickerLayout
className={className}
isSelectedVizMetadata={Boolean(selectedVizMetadata)}
>
<LeftPane> <LeftPane>
<Selector <Selector
css={({ gridUnit }) => css={({ gridUnit }) =>
@ -769,16 +769,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
</Examples> </Examples>
</> </>
</div> </div>
) : ( ) : null}
<div
css={(theme: SupersetTheme) => [
DetailsPane(theme),
DetailsEmpty(theme),
]}
>
{t('Select a visualization type')}
</div>
)}
</VizPickerLayout> </VizPickerLayout>
); );
} }