mirror of https://github.com/apache/superset.git
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 { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
|
||||
import { useElementOnScreen } from 'src/common/hooks/useElementOnScreen';
|
||||
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
|
||||
import {
|
||||
deleteTopLevelTabs,
|
||||
handleComponentDrop,
|
||||
|
@ -55,7 +56,8 @@ const TABS_HEIGHT = 50;
|
|||
const HEADER_HEIGHT = 72;
|
||||
const CLOSED_FILTER_BAR_WIDTH = 32;
|
||||
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 = {};
|
||||
|
||||
|
@ -192,7 +194,16 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
|
|||
const [containerRef, isSticky] = useElementOnScreen<HTMLDivElement>({
|
||||
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 filterBarOffset = dashboardFiltersOpen ? 0 : barTopOffset + 20;
|
||||
|
||||
|
|
|
@ -71,7 +71,7 @@ const Bar = styled.div<{ width: number }>`
|
|||
left: 0;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: ${({ width }) => width}px; // arbitrary...
|
||||
width: ${({ width }) => width}px;
|
||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
border-right: 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>
|
||||
</StyledTabs>
|
||||
) : (
|
||||
<FilterControls
|
||||
dataMaskSelected={dataMaskSelected}
|
||||
directPathToChild={directPathToChild}
|
||||
onFilterSelectionChange={handleFilterSelectionChange}
|
||||
/>
|
||||
<div css={{ overflow: 'auto', height }}>
|
||||
<FilterControls
|
||||
dataMaskSelected={dataMaskSelected}
|
||||
directPathToChild={directPathToChild}
|
||||
onFilterSelectionChange={handleFilterSelectionChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Bar>
|
||||
</BarWrapper>
|
||||
|
|
Loading…
Reference in New Issue