Skip to content

Commit

Permalink
ui: add fixed height dashboard blocks (amp, reg area & vigilance area)
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximeperrault
maximeperrault committed Oct 28, 2024
1 parent 8d5b909 commit 795b32e
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 38 deletions.
8 changes: 4 additions & 4 deletions frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ export const Amps = forwardRef<HTMLDivElement, AmpsProps>(

return (
<>
{openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}

{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<StickyContainer ref={ref} {...props}>
{openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}

<Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones AMP">
<StyledLayerList
$baseLayersLength={Object.values(ampsByLayerName).length}
Expand Down Expand Up @@ -109,6 +109,6 @@ const StyledPanel = styled(AmpPanel)<{ $marginLeft?: number }>`
)`}; // 25px is the padding, 64px is the width of the sidebar
`
const StickyContainer = styled.div`
position: sticky;
background: white;
// position: sticky;
// background: white;
`
50 changes: 26 additions & 24 deletions frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
const regRef = useRef<HTMLDivElement>(null)
const ampRef = useRef<HTMLDivElement>(null)
const zdvRef = useRef<HTMLDivElement>(null)
const [containerHeight, setContainerHeight] = useState<number | undefined>(undefined)
const [regulatoryAreasHeight, setRegulatoryAreasHeight] = useState<number | undefined>(undefined)
const [ampsHeight, setAmpsHeight] = useState<number | undefined>(undefined)
const [vigilanceAreasHeight, setVigilanceAreasHeight] = useState<number | undefined>(undefined)
const [containerHeight, setContainerHeight] = useState<number>(0)
const [regulatoryAreasHeight, setRegulatoryAreasHeight] = useState<number>(0)
const [ampsHeight, setAmpsHeight] = useState<number>(0)
const [vigilanceAreasHeight, setVigilanceAreasHeight] = useState<number>(0)

const toolbarRef = useRef<HTMLDivElement>(null)
const toolbarHeight = toolbarRef.current?.clientHeight ?? 0
Expand Down Expand Up @@ -105,7 +105,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das

useEffect(() => {
if (isActive) {
setContainerHeight(containerRef.current?.clientHeight)
setContainerHeight(containerRef.current?.clientHeight ?? 0)
}
}, [isActive])

Expand All @@ -131,9 +131,9 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
<Column ref={firstColumnRef} $filterHeight={toolbarHeight}>
<StyledRegulatoryAreas
ref={regRef}
$maxContentHeight={dashboard.extractedArea ? dashboard.extractedArea.regulatoryAreas.length * 10 : 0}
$maxHeight={regulatoryAreasHeight}
$maxSelectedHeight={dashboard.dashboard.regulatoryAreas.length * 10}
$maxContentHeight={150}
$maxHeight={containerHeight - ampsHeight - vigilanceAreasHeight - 16}
$maxSelectedHeight={80}
columnWidth={firstColumnWidth}
isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
isSelectedAccordionOpen={previewSelectionFilter}
Expand All @@ -144,22 +144,21 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das

<StyledAmps
ref={ampRef}
$maxContentHeight={dashboard.extractedArea ? dashboard.extractedArea.amps.length * 10 : 0}
$maxHeight={ampsHeight}
$maxSelectedHeight={dashboard.dashboard.amps.length * 10}
$top={regulatoryAreasHeight ?? 0}
$maxContentHeight={150}
$maxHeight={containerHeight - regulatoryAreasHeight - vigilanceAreasHeight - 16}
$maxSelectedHeight={80}
amps={dashboard.extractedArea?.amps}
columnWidth={firstColumnWidth}
isExpanded={expandedAccordionFirstColumn === Dashboard.Block.AMP}
isSelectedAccordionOpen={previewSelectionFilter}
selectedAmpIds={dashboard.dashboard.ampIds}
setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.AMP)}
/>
<StyledVigilanceAreass
<StyledVigilanceAreas
ref={zdvRef}
$maxContentHeight={dashboard.extractedArea ? dashboard.extractedArea.vigilanceAreas.length * 10 : 0}
$maxHeight={vigilanceAreasHeight}
$maxSelectedHeight={dashboard.dashboard.vigilanceAreas.length * 10}
$maxContentHeight={150}
$maxHeight={containerHeight - ampsHeight - regulatoryAreasHeight - 16}
$maxSelectedHeight={80}
columnWidth={firstColumnWidth}
isExpanded={expandedAccordionFirstColumn === Dashboard.Block.VIGILANCE_AREAS}
isSelectedAccordionOpen={previewSelectionFilter}
Expand Down Expand Up @@ -225,16 +224,16 @@ const Column = styled.div<{ $filterHeight: number }>`
scrollbar-gutter: stable;
padding: 3px;
// padding: 3px;
`

const StyledRegulatoryAreas = styled(RegulatoryAreas)<{
$maxContentHeight: number | undefined
$maxHeight: number | undefined
$maxSelectedHeight: number | undefined
}>`
// max-height: ${p => p.$maxHeight && p.$maxHeight}px;
overflow-y: hidden;
padding: 5px;
max-height: ${p => p.$maxHeight && p.$maxHeight}px;
${AccordionContent} {
max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
overflow-y: auto;
Expand All @@ -248,10 +247,10 @@ const StyledAmps = styled(Amps)<{
$maxContentHeight: number | undefined
$maxHeight: number | undefined
$maxSelectedHeight: number | undefined
$top: number
}>`
// max-height: ${p => p.$maxHeight && p.$maxHeight}px;
overflow-y: hidden;
padding: 5px;
max-height: ${p => p.$maxHeight && p.$maxHeight}px;
${AccordionContent} {
max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
overflow-y: auto;
Expand All @@ -261,12 +260,15 @@ const StyledAmps = styled(Amps)<{
}
`

const StyledVigilanceAreass = styled(VigilanceAreas)<{
const StyledVigilanceAreas = styled(VigilanceAreas)<{
$maxContentHeight: number | undefined
$maxHeight: number | undefined
$maxSelectedHeight: number | undefined
}>`
// max-height: ${p => p.$maxHeight && p.$maxHeight}px;
padding: 5px;
max-height: ${p => p.$maxHeight && p.$maxHeight}px;
${AccordionContent} {
max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
overflow-y: auto;
Expand Down
13 changes: 8 additions & 5 deletions frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,10 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps

return (
<>
{openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<StickyContainer ref={ref} {...props}>
{openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones réglementaires">
<StyledLayerList
$baseLayersLength={Object.values(regulatoryAreasByLayerName).length}
Expand Down Expand Up @@ -109,7 +110,9 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
}
)

const StyledLayerList = styled(LayerSelector.LayerList)``
const StyledLayerList = styled(LayerSelector.LayerList)`
overflow-y: auto;
`
const StyledPanel = styled(RegulatoryPanel)<{ $marginLeft: number }>`
left: ${p =>
`calc(
Expand All @@ -118,7 +121,7 @@ const StyledPanel = styled(RegulatoryPanel)<{ $marginLeft: number }>`
`

const StickyContainer = styled.div`
position: sticky;
top: 0;
// position: sticky;
// top: 0;
background: white;
`
11 changes: 6 additions & 5 deletions frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
isSelectedAccordionOpen,
selectedVigilanceAreaIds,
setExpandedAccordion,
vigilanceAreas
vigilanceAreas,
...props
},
ref
) => {
Expand All @@ -47,7 +48,8 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
}, [isSelectedAccordionOpen])

return (
<StickyContainer ref={ref}>
// eslint-disable-next-line react/jsx-props-no-spreading
<StickyContainer ref={ref} {...props}>
{openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}

<Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones de vigilance">
Expand Down Expand Up @@ -87,7 +89,6 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(

const StyledLayerList = styled(LayerSelector.LayerList)`
overflow-y: auto;
max-height: 30%;
`
const StyledPanel = styled(Panel)<{ $marginLeft: number }>`
left: ${p =>
Expand All @@ -97,7 +98,7 @@ const StyledPanel = styled(Panel)<{ $marginLeft: number }>`
`

const StickyContainer = styled.div`
position: sticky;
bottom: 0;
// position: sticky;
// bottom: 0;
background: white;
`

0 comments on commit 795b32e

Please sign in to comment.