mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(gallery): Hide the bottom info section when no chart is being selected (#16840)
This commit is contained in:
parent
0a8d0c6e7f
commit
100760c464
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user