Skip to content

Commit

Permalink
upload funct simplified
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Apr 24, 2024
1 parent f178e17 commit 95b0c93
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 133 deletions.
74 changes: 36 additions & 38 deletions src/containers/datasets/drawing-upload-tool/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,45 +77,43 @@ const WidgetDrawingUploadTool = () => {
tooltipPosition={{ top: -100, left: -100 }}
message="use this to upload an existing GIS file"
>
<div
{...conditionalProps}
className={cn({
'w-[128px] cursor-pointer rounded-3xl p-2': true,
'bg-white': !!uploadedGeojson,
'cursor-default opacity-30': !!customGeojson || isDrawingToolEnabled,
})}
>
{!uploadedGeojson && (
<input
data-testid="shapefile-upload"
{...getInputProps()}
disabled={isDrawingToolEnabled || !!customGeojson || !!uploadedGeojson}
/>
)}
<div className="flex flex-col items-center space-y-1">
{uploadedGeojson || isDrawingUploadToolEnabled ? (
<DeleteDrawingButton size="sm" />
) : (
<Icon
icon={UPLOAD_SVG}
className={cn({
'h-8 w-8 fill-current text-white': true,
})}
description="Upload"
<>
{(!customGeojson || !isDrawingToolEnabled) && (
<div
{...conditionalProps}
className={cn({
'w-[128px] cursor-pointer rounded-3xl p-2': true,
hidden: !!uploadedGeojson,
'cursor-default opacity-30': !!customGeojson || isDrawingToolEnabled,
})}
>
<input
data-testid="shapefile-upload"
{...getInputProps()}
disabled={isDrawingToolEnabled || !!customGeojson || !!uploadedGeojson}
/>
)}
<label id="label-file-upload" htmlFor="input-file-upload">
<p
className={cn({
'whitespace-nowrap font-sans text-sm text-white': true,
'text-brand-800': !!uploadedGeojson,
})}
>
{uploadedGeojson || isDrawingUploadToolEnabled ? 'Delete area' : 'Upload shapefile'}
</p>
</label>
</div>
</div>
<div className="flex flex-col items-center space-y-1">
<Icon
icon={UPLOAD_SVG}
className={cn({
'h-8 w-8 fill-current text-white': true,
})}
description="Upload"
/>
</div>
<label id="label-file-upload" htmlFor="input-file-upload">
<p className="whitespace-nowrap font-sans text-sm text-white">Upload shapefile</p>
</label>
</div>
)}
{(uploadedGeojson || isDrawingUploadToolEnabled) && (
<div className="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>
</div>
)}
</>
</Helper>
// TO - DO - add when error gets defined
// </div>
Expand Down
33 changes: 21 additions & 12 deletions src/containers/map/delete-drawing-button/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, ReactElement } from 'react';

import { useMap } from 'react-map-gl';

Expand All @@ -22,7 +22,13 @@ const SIZE = {
sm: 'h-8 w-8',
};

export const DeleteDrawingButton = ({ size = 'md' }: { size?: 'sm' | 'md' }) => {
export const DeleteDrawingButton = ({
size = 'md',
children = null,
}: {
size?: 'sm' | 'md';
children?: ReactElement;
}) => {
const resetAnalysisState = useResetRecoilState(analysisAtom);
const locationTool = useRecoilValue(locationToolAtom);
const resetDrawingState = useResetRecoilState(drawingToolAtom);
Expand Down Expand Up @@ -66,16 +72,19 @@ export const DeleteDrawingButton = ({ size = 'md' }: { size?: 'sm' | 'md' }) =>
]);

return (
<div
className={cn({
'shadow-controls flex items-center justify-center rounded-full border border-brand-800 bg-brand-800':
true,
[SIZE[size]]: true,
})}
>
<button onClick={handleResetPage} data-testid="delete-custom-area-button">
<Icon icon={REMOVE_SVG} className="h-5 w-5 text-white" />
</button>
<div className="flex w-full flex-col items-center justify-center space-y-1">
<div
className={cn({
'shadow-controls flex items-center justify-center rounded-full border border-brand-800 bg-brand-800':
true,
[SIZE[size]]: true,
})}
>
<button onClick={handleResetPage} data-testid="delete-custom-area-button">
<Icon icon={REMOVE_SVG} className="h-5 w-5 text-white" />
</button>
</div>
{children && children}
</div>
);
};
Expand Down
125 changes: 61 additions & 64 deletions src/containers/map/legend/item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,45 +133,45 @@ const LegendItem = ({
</button>
)}
</Media>
<Dialog>
<DialogTrigger>
<Tooltip>
<TooltipTrigger asChild>
<Tooltip>
<TooltipTrigger asChild>
<Dialog>
<DialogTrigger asChild>
<button type="button" aria-label="Layer statistics">
<p className="pl-4 text-xs font-semibold uppercase tracking-wider text-black/85 md:pl-0">
{title}
</p>
</button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" align="center" className="bg-gray-600 px-2 text-white">
Layer statistics
</TooltipContent>
</TooltipPortal>
</Tooltip>
</DialogTrigger>

<DialogContent
className={cn({
'h-screen w-screen md:mb-20 md:h-auto md:w-auto': true,
hidden: guideIsActive,
})}
overlay={false}
>
<div className="no-scrollbar overflow-y-auto px-3">
<WidgetWrapper
key={l.id}
title={title}
applicability={widget?.applicability}
id={widgetId as WidgetSlugType}
info
</DialogTrigger>

<DialogContent
className={cn({
'h-screen w-screen min-w-[540px] md:mb-20 md:h-auto md:w-auto': true,
hidden: guideIsActive,
})}
overlay={false}
>
<Widget id={widgetId} />
</WidgetWrapper>
</div>
<DialogClose className="top-8 md:fixed md:!top-18 md:left-[595px]" />
</DialogContent>
</Dialog>
<div className="no-scrollbar overflow-y-auto px-3">
<WidgetWrapper
key={l.id}
title={title}
applicability={widget?.applicability}
id={widgetId as WidgetSlugType}
info
>
<Widget id={widgetId} />
</WidgetWrapper>
</div>
<DialogClose className="top-8 md:fixed md:!top-18 md:left-[595px]" />
</DialogContent>
</Dialog>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" align="center" className="bg-gray-600 px-2 text-white">
Layer statistics
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
{!embedded && (
<Helper
Expand All @@ -183,44 +183,41 @@ const LegendItem = ({
message="Use the settings of each layer to obtain detailed information, manage the opacity, hide or show it or to remove it from the map."
>
<div className="ml-2 flex items-center">
<Dialog>
<DialogTrigger>
<Tooltip>
<TooltipTrigger asChild>
<Tooltip>
<TooltipTrigger asChild>
<Dialog>
<DialogTrigger asChild>
<button type="button" aria-label="Info layer">
<Icon
icon={INFO_SVG}
className="mr-1.5 h-[17px] w-[17px] fill-black/40 align-middle"
/>
</button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
side="top"
align="center"
className="bg-gray-600 px-2 text-white"
>
Info layer
</TooltipContent>
</TooltipPortal>
</Tooltip>
</DialogTrigger>
</DialogTrigger>

<DialogContent
className={cn({
'h-screen w-screen md:mb-20 md:h-auto md:w-auto': true,
hidden: guideIsActive,
})}
overlay={false}
>
<div className="no-scrollbar overflow-y-auto px-3">
<div className="no-scrollbar overflow-y-auto">
{WidgetInfo && <WidgetInfo />}
</div>
</div>
<DialogClose className="top-8 md:fixed md:!top-18 md:left-[595px]" />
</DialogContent>
</Dialog>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" align="center" className="bg-gray-600 px-2 text-white">
Layer info
</TooltipContent>
</TooltipPortal>
</Tooltip>

<DialogContent
className={cn({
'h-screen w-screen md:mb-20 md:h-auto md:w-auto': true,
hidden: guideIsActive,
})}
overlay={false}
>
<div className="no-scrollbar overflow-y-auto px-3">
<div className="no-scrollbar overflow-y-auto">
{WidgetInfo && <WidgetInfo />}
</div>
</div>
<DialogClose className="top-8 md:fixed md:!top-18 md:left-[595px]" />
</DialogContent>
</Dialog>
<Popover>
<PopoverTrigger>
<Tooltip>
Expand Down
16 changes: 8 additions & 8 deletions src/containers/widgets/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,23 +143,23 @@ const widgets_prod = [
{
name: 'Drivers of Change',
slug: 'mangrove_drivers_change',
locationType: ['custom-area', 'wdpa', 'country'],
locationType: ['wdpa', 'country'],
applicability: 'National',
categoryIds: ['all_datasets', 'restoration_and_conservation'],
layersIds: ['extent'],
},
{
name: 'Mangrove Fisheries',
slug: 'mangrove_fisheries',
locationType: ['custom-area', 'wdpa', 'country'],
locationType: ['wdpa', 'country'],
applicability: 'Global, National, and Sub-National',
categoryIds: ['all_datasets', 'ecosystem_services'],
layersIds: ['mangrove_fisheries'],
},
{
name: 'Coastal Protection',
slug: 'mangrove_flood_protection',
locationType: ['custom-area', 'wdpa', 'country'],
locationType: ['wdpa', 'country'],
applicability: 'National',
categoryIds: ['all_datasets', 'ecosystem_services'],
subLayersIds: [
Expand All @@ -181,35 +181,35 @@ const widgets_prod = [
{
name: 'Protected Areas',
slug: 'mangrove_protected_areas',
locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
locationType: ['wdpa', 'country', 'worldwide'],
categoryIds: ['contextual_layers', 'all_datasets'],
layersIds: ['mangrove_protected_areas'],
},
{
name: 'Allen Coral Atlas',
slug: 'mangrove_allen_coral_reef',
locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
locationType: ['wdpa', 'country', 'worldwide'],
categoryIds: ['contextual_layers', 'all_datasets'],
layersIds: ['allen_coral_reef'],
},
{
name: 'Salt Marsh',
slug: 'mangrove_salt_marsh',
locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
locationType: ['wdpa', 'country', 'worldwide'],
categoryIds: ['contextual_layers', 'all_datasets'],
layersIds: ['salt_marsh'],
},
{
name: 'Tidal Flats',
slug: 'mangrove_tidal_flats',
locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
locationType: ['wdpa', 'country', 'worldwide'],
categoryIds: ['contextual_layers', 'all_datasets'],
layersIds: ['tidal_flats'],
},
{
name: 'Global Tidal Wetland Change',
slug: 'mangrove_global_tidal_wetland_change',
locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
locationType: ['wdpa', 'country', 'worldwide'],
categoryIds: ['contextual_layers', 'all_datasets'],
layersIds: ['global_tidal_wetland_change'],
},
Expand Down
Loading

0 comments on commit 95b0c93

Please sign in to comment.