pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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';
const VizPickerLayout = styled.div`
display: grid;
grid-template-rows: auto minmax(100px, 1fr) minmax(200px, 35%);
// em is used here because the sidebar should be sized to fit the longest standard tag
grid-template-columns: minmax(14em, auto) 5fr;
grid-template-areas:
'sidebar search'
'sidebar main'
'details details';
height: 70vh;
overflow: auto;
const VizPickerLayout = styled.div<{ isSelectedVizMetadata: boolean }>`
${({ isSelectedVizMetadata }) => `
display: grid;
grid-template-rows: ${
isSelectedVizMetadata
? `auto minmax(100px, 1fr) minmax(200px, 35%)`
: 'auto minmax(100px, 1fr)'
};
// em is used here because the sidebar should be sized to fit the longest standard tag
grid-template-columns: minmax(14em, auto) 5fr;
grid-template-areas:
'sidebar search'
'sidebar main'
'details details';
height: 70vh;
overflow: auto;
`}
`;
const SectionTitle = styled.h3`
@ -269,15 +275,6 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
'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
// (plus grid layout) enables the description to scroll while the header stays in place.
const TagsWrapper = styled.div`
@ -642,7 +639,10 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
};
return (
<VizPickerLayout className={className}>
<VizPickerLayout
className={className}
isSelectedVizMetadata={Boolean(selectedVizMetadata)}
>
<LeftPane>
<Selector
css={({ gridUnit }) =>
@ -769,16 +769,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
</Examples>
</>
</div>
) : (
<div
css={(theme: SupersetTheme) => [
DetailsPane(theme),
DetailsEmpty(theme),
]}
>
{t('Select a visualization type')}
</div>
)}
) : null}
</VizPickerLayout>
);
}