mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix: Filter bar not occupying 100% height when filter sets FF unset (#15228)
This commit is contained in:
parent
388eb01f06
commit
ea8507b4e2
@ -34,6 +34,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
|
|||||||
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
||||||
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
|
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
|
||||||
import { useElementOnScreen } from 'src/common/hooks/useElementOnScreen';
|
import { useElementOnScreen } from 'src/common/hooks/useElementOnScreen';
|
||||||
|
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
|
||||||
import {
|
import {
|
||||||
deleteTopLevelTabs,
|
deleteTopLevelTabs,
|
||||||
handleComponentDrop,
|
handleComponentDrop,
|
||||||
@ -55,7 +56,8 @@ const TABS_HEIGHT = 50;
|
|||||||
const HEADER_HEIGHT = 72;
|
const HEADER_HEIGHT = 72;
|
||||||
const CLOSED_FILTER_BAR_WIDTH = 32;
|
const CLOSED_FILTER_BAR_WIDTH = 32;
|
||||||
const OPEN_FILTER_BAR_WIDTH = 260;
|
const OPEN_FILTER_BAR_WIDTH = 260;
|
||||||
const FILTER_BAR_HEADER_HEIGHT = 128;
|
const FILTER_BAR_HEADER_HEIGHT = 80;
|
||||||
|
const FILTER_BAR_TABS_HEIGHT = 46;
|
||||||
|
|
||||||
type DashboardBuilderProps = {};
|
type DashboardBuilderProps = {};
|
||||||
|
|
||||||
@ -192,7 +194,16 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
|
|||||||
const [containerRef, isSticky] = useElementOnScreen<HTMLDivElement>({
|
const [containerRef, isSticky] = useElementOnScreen<HTMLDivElement>({
|
||||||
threshold: [1],
|
threshold: [1],
|
||||||
});
|
});
|
||||||
const offset = FILTER_BAR_HEADER_HEIGHT + (isSticky ? 0 : MAIN_HEADER_HEIGHT);
|
|
||||||
|
const filterSetEnabled = isFeatureEnabled(
|
||||||
|
FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET,
|
||||||
|
);
|
||||||
|
|
||||||
|
const offset =
|
||||||
|
FILTER_BAR_HEADER_HEIGHT +
|
||||||
|
(isSticky ? 0 : MAIN_HEADER_HEIGHT) +
|
||||||
|
(filterSetEnabled ? FILTER_BAR_TABS_HEIGHT : 0);
|
||||||
|
|
||||||
const filterBarHeight = `calc(100vh - ${offset}px)`;
|
const filterBarHeight = `calc(100vh - ${offset}px)`;
|
||||||
const filterBarOffset = dashboardFiltersOpen ? 0 : barTopOffset + 20;
|
const filterBarOffset = dashboardFiltersOpen ? 0 : barTopOffset + 20;
|
||||||
|
|
||||||
|
@ -71,7 +71,7 @@ const Bar = styled.div<{ width: number }>`
|
|||||||
left: 0;
|
left: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: ${({ width }) => width}px; // arbitrary...
|
width: ${({ width }) => width}px;
|
||||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||||
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
@ -293,11 +293,13 @@ const FilterBar: React.FC<FiltersBarProps> = ({
|
|||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
</StyledTabs>
|
</StyledTabs>
|
||||||
) : (
|
) : (
|
||||||
<FilterControls
|
<div css={{ overflow: 'auto', height }}>
|
||||||
dataMaskSelected={dataMaskSelected}
|
<FilterControls
|
||||||
directPathToChild={directPathToChild}
|
dataMaskSelected={dataMaskSelected}
|
||||||
onFilterSelectionChange={handleFilterSelectionChange}
|
directPathToChild={directPathToChild}
|
||||||
/>
|
onFilterSelectionChange={handleFilterSelectionChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</Bar>
|
</Bar>
|
||||||
</BarWrapper>
|
</BarWrapper>
|
||||||
|
Loading…
Reference in New Issue
Block a user