Skip to content

Commit

Permalink
printing mode in analysis
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Apr 24, 2024
1 parent 5722654 commit 73c2533
Show file tree
Hide file tree
Showing 9 changed files with 69 additions and 95 deletions.
5 changes: 1 addition & 4 deletions src/containers/alert/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
import { analysisAlertAtom, analysisAtom, skipAnalysisAlertAtom } from 'store/analysis';
import { drawingToolAtom, drawingUploadToolAtom } from 'store/drawing-tool';
import { locationsModalAtom } from 'store/locations';
import { printModeState } from 'store/print-mode';
import { locationToolAtom } from 'store/sidebar';

import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
Expand All @@ -23,7 +22,6 @@ const AnalysisAlert = () => {
const { asPath, replace } = useRouter();

const locationTool = useRecoilValue(locationToolAtom);
const isPrintingMode = useRecoilValue(printModeState);
const setLocationsModalIsOpen = useSetRecoilState(locationsModalAtom);
const [isAnalysisAlertOpen, setAnalysisAlert] = useRecoilState(analysisAlertAtom);
const [skipAnalysisAlert, setSkipAnalysisAlert] = useRecoilState(skipAnalysisAlertAtom);
Expand All @@ -33,8 +31,7 @@ const AnalysisAlert = () => {

const queryParams = useMemo(() => asPath.split('?')[1], [asPath]);

const isPrintingId = isPrintingMode ? 'print-mode' : 'no-print';
const { [`default-desktop-${isPrintingId}`]: map } = useMap();
const { [`default-desktop`]: map } = useMap();

const handleCancelResetPage = useCallback(() => {
setAnalysisAlert(false);
Expand Down
12 changes: 3 additions & 9 deletions src/containers/datasets/drawing-tool/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ const WidgetDrawingTool = () => {
const [{ enabled: isDrawingToolEnabled }, setDrawingToolState] = useRecoilState(drawingToolAtom);
const resetDrawingUploadToolState = useResetRecoilState(drawingUploadToolAtom);

const [{ enabled: isDrawingUploadToolEnabled, uploadedGeojson }] =
useRecoilState(drawingUploadToolAtom);
const [{ uploadedGeojson }] = useRecoilState(drawingUploadToolAtom);
const setAnalysisState = useSetRecoilState(analysisAtom);
const setMapCursor = useSetRecoilState(mapCursorAtom);

Expand Down Expand Up @@ -57,12 +56,7 @@ const WidgetDrawingTool = () => {
...drawingToolState,
enabled: !isDrawingToolEnabled,
}));
}, [
setDrawingToolState,
isDrawingToolEnabled,
isDrawingUploadToolEnabled,
resetDrawingUploadToolState,
]);
}, [setDrawingToolState, isDrawingToolEnabled, resetDrawingUploadToolState]);

useUploadFile(acceptedFiles?.[0], onUploadFile);

Expand All @@ -82,7 +76,7 @@ const WidgetDrawingTool = () => {
<button
type="button"
className={cn({
'flex w-[128px] cursor-pointer flex-col items-center justify-center space-y-1 rounded-3xl p-2':
'mb-2 flex w-[128px] cursor-pointer flex-col items-center justify-center space-y-1 rounded-3xl p-2':
true,
' bg-white ': isDrawingToolEnabled && !uploadedGeojson,
'cursor-default opacity-40': !!uploadedGeojson,
Expand Down
2 changes: 1 addition & 1 deletion src/containers/datasets/drawing-upload-tool/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const WidgetDrawingUploadTool = () => {
</div>
)}
{(uploadedGeojson || isDrawingUploadToolEnabled) && (
<div className="w-[128px] cursor-pointer rounded-3xl bg-white p-2">
<div className="mb-2 w-[128px] cursor-pointer rounded-3xl bg-white p-2">
<DeleteDrawingButton size="sm">
<p className="whitespace-nowrap font-sans text-sm text-brand-800">Delete area</p>
</DeleteDrawingButton>
Expand Down
19 changes: 6 additions & 13 deletions src/containers/location-widget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,21 +85,21 @@ const LocationWidget = () => {

return (
<>
<div className="relative flex h-52 flex-col rounded-4xl bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-control print:hidden">
<div className="relative flex h-52 flex-col justify-between rounded-4xl bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-control print:hidden">
<Dialog open={isOpen}>
<DialogTrigger asChild>
<button onClick={handleOnClickTitle} disabled={isGuideActive || !locationName}>
{!!locationName ? (
<div
className={cn({
'inline-block px-10 pb-10 pt-8 text-6xl font-light text-black/85 first-letter:uppercase':
'inline-block h-[128px] flex-1 grow px-10 pt-8 text-6xl font-light text-black/85 first-letter:uppercase':
true,
'text-2.75xl': width >= 540,

'text-5xl': locationName.length > 10,
'text-4xl': locationName.length > 30,
'text-2xl': locationName.length > 60,
'break-all text-xl': locationName.length > 120,
'text-4xl': locationName.length > 30 && locationName.length <= 55,
'text-2xl': locationName.length > 55 && locationName.length <= 120,
'break-all text-base': locationName.length > 120,
})}
>
<h1 className="text-white" ref={titleRef}>
Expand All @@ -115,14 +115,7 @@ const LocationWidget = () => {
</DialogTrigger>
<LocationDialogContent close={closeMenu} />
</Dialog>
<div
className={cn({
'absolute bottom-2 left-0 w-full pb-2': true,
'bottom-0': locationName?.length > 20,
})}
>
<LocationTools />
</div>
<LocationTools />
</div>
<AnalysisAlert />
</>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/map/legend/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
const activeLayerNoPlanet = activeLayers.filter((l) => !l.id.includes('planet'));

return (
<div>
<div className="print:hidden">
{!!activeLayerNoPlanet.length && (
<>
<button
Expand Down
2 changes: 1 addition & 1 deletion src/containers/map/legend/mobile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Legend = () => {
};

return (
<div className="flex w-screen justify-center">
<div className="flex w-screen justify-center print:hidden">
{!!activeLayers.length && (
<>
<button
Expand Down
86 changes: 40 additions & 46 deletions src/containers/navigation/location-tools/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { locationToolAtom } from 'store/sidebar';

import { useRecoilState, useRecoilValue } from 'recoil';

import AnalysisAlert from 'containers/alert';
import WidgetDrawingTool from 'containers/datasets/drawing-tool';
import WidgetDrawingUploadTool from 'containers/datasets/drawing-upload-tool';
import Helper from 'containers/guide/helper';
Expand Down Expand Up @@ -67,52 +66,47 @@ const LocationTools = () => {
]);

return (
<div className="flex space-y-2 text-center">
<div className="mx-auto flex space-x-2 md:space-x-8">
{/* //*FIND LOCATIONS* */}
<Dialog open={locationTool === 'search' && locationsModalIsOpen}>
<DialogTrigger className="flex w-[128px] items-center justify-center p-2" asChild>
<>
<Helper
className={{
button: '-top-1 right-9 z-20',
tooltip: 'w-fit-content max-w-[400px]',
}}
tooltipPosition={{ top: -65, left: -10 }}
message="use this button to search for a country or a protected area. Countries can also be selected by clicking on the map or on the name of the area selected (on top of the widgets)"
<div className="mx-auto flex w-full items-center justify-center space-x-2 md:space-x-8">
{/* //*FIND LOCATIONS* */}
<Dialog open={locationTool === 'search' && locationsModalIsOpen}>
<DialogTrigger asChild>
<>
<Helper
className={{
button: '-top-1 right-9 z-20',
tooltip: 'w-fit-content max-w-[400px]',
}}
tooltipPosition={{ top: -65, left: -10 }}
message="use this button to search for a country or a protected area. Countries can also be selected by clicking on the map or on the name of the area selected (on top of the widgets)"
>
<button
onClick={handleOnClickSearch}
className="mb-2 flex w-[128px] cursor-pointer flex-col items-center justify-center space-y-1 rounded-3xl p-2"
data-testid="search-button"
disabled={guideIsActive}
>
<button
onClick={handleOnClickSearch}
className="flex w-[128px] cursor-pointer items-center justify-center"
data-testid="search-button"
disabled={guideIsActive}
>
<div className="flex flex-col items-center space-y-1">
<Icon
icon={GLASS_SVG}
className={cn({
'h-8 w-8 fill-current text-white': true,
})}
description="Glass"
/>
<p className="whitespace-nowrap font-sans text-sm text-white">Find locations</p>
</div>
</button>
</Helper>
</>
</DialogTrigger>

<LocationDialogContent close={closeMenu} />
</Dialog>

{/* //*DRAW AREA* */}

<WidgetDrawingTool />

{/* //*UPLOAD SHAPEFILE* */}
<WidgetDrawingUploadTool />
</div>
<AnalysisAlert />
<Icon
icon={GLASS_SVG}
className={cn({
'h-8 w-8 fill-current text-white': true,
})}
description="Glass"
/>
<p className="whitespace-nowrap font-sans text-sm text-white">Find locations</p>
</button>
</Helper>
</>
</DialogTrigger>

<LocationDialogContent close={closeMenu} />
</Dialog>

{/* //*DRAW AREA* */}

<WidgetDrawingTool />

{/* //*UPLOAD SHAPEFILE* */}
<WidgetDrawingUploadTool />
</div>
);
};
Expand Down
22 changes: 14 additions & 8 deletions src/containers/widget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback, ReactElement, FC } from 'react';

import cn from 'lib/classnames';

import { drawingToolAtom, drawingUploadToolAtom } from 'store/drawing-tool';
import { widgetsCollapsedAtom } from 'store/widgets';

import { AnimatePresence, motion } from 'framer-motion';
Expand All @@ -28,10 +29,12 @@ type WidgetLayoutProps = {

const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
const { children, title, id, className, applicability, info } = props;

const { enabled: isDrawingToolEnabled } = useRecoilValue(drawingToolAtom);
const { enabled: isDrawingUploadToolEnabled } = useRecoilValue(drawingUploadToolAtom);
const isLayerActive = useRecoilValue(getLayerActive(id));

const [widgetsCollapsed, setWidgetsCollapsed] = useRecoilState(widgetsCollapsedAtom);
const [widgetsCollapsed, setWidgetsCollapsed] =
useRecoilState<Record<string, boolean>>(widgetsCollapsedAtom);

const handleWidgetCollapsed = useCallback(() => {
const updatedWidgetsCollapsed = {
Expand All @@ -54,12 +57,15 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {

if (Boolean(children.type() === null)) return null;

const isCollapsed: boolean =
isDrawingToolEnabled || isDrawingUploadToolEnabled ? false : widgetsCollapsed[id];

return (
<AnimatePresence>
<motion.div
initial={false}
variants={widgetVariants}
animate={widgetsCollapsed[id] ? 'collapsed' : 'expanded'}
animate={isCollapsed ? 'collapsed' : 'expanded'}
exit="expanded"
transition={{ type: 'tween', bounce: 0, duration: 0.6 }}
className={cn({
Expand Down Expand Up @@ -92,18 +98,18 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
data-testid={`widget-${id}-content`}
className={cn({
'group-last-of-type:block': true,
hidden: widgetsCollapsed[id],
block: !widgetsCollapsed[id],
hidden: isCollapsed,
block: !isCollapsed,
})}
>
{children}
</div>
{applicability && (
<p
className={cn({
'block flex text-sm text-black/85 md:whitespace-nowrap md:text-center': true,
hidden: widgetsCollapsed[id],
block: !widgetsCollapsed[id],
'flex text-sm text-black/85 md:whitespace-nowrap md:text-center': true,
hidden: isCollapsed,
block: !isCollapsed,
})}
>
<span className="font-normal">Data applicability:</span>{' '}
Expand Down
14 changes: 2 additions & 12 deletions src/containers/widgets/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const WidgetsContainer: FC = () => {
return enabledWidgets.filter(
({ slug }) => activeWidgets?.includes(slug) || slug === 'widgets_deck_tool'
);
}, [activeWidgets, enabledWidgets]) satisfies WidgetTypes[];
}, [activeWidgets, enabledWidgets, customGeojson, uploadedGeojson]) satisfies WidgetTypes[];

const setPrintingMode = useSetRecoilState(printModeState);
const cat = useWidgetsIdsByCategory(activeWidgets);
Expand Down Expand Up @@ -121,21 +121,11 @@ const WidgetsContainer: FC = () => {
setWidgetsCollapsed(updateWidgetsCollapsed);
}, [widgetsCollapsed, widgetsCollapsedChecker, setWidgetsCollapsed]);

const expandedWidgets = Object.keys(widgetsCollapsed).reduce((acc, key) => {
acc[key] = false;
return acc;
}, {});

const onClickDownload = useCallback(() => {
// setWidgetsCollapsed(expandedWidgets);
// setPrintingMode(true);
setTimeout(() => {
window.print();
}, 2000);
// setTimeout(() => {
// setPrintingMode(false);
// }, 4000);
}, [expandedWidgets, setPrintingMode, setWidgetsCollapsed]);
}, []);

return (
<WidgetsLayout>
Expand Down

0 comments on commit 73c2533

Please sign in to comment.