diff --git a/public/area-marker-assignees.svg b/public/area-marker-assignees.svg
new file mode 100644
index 000000000..d97ffbc81
--- /dev/null
+++ b/public/area-marker-assignees.svg
@@ -0,0 +1,42 @@
+
diff --git a/public/area-marker-assignment-progress.svg b/public/area-marker-assignment-progress.svg
new file mode 100644
index 000000000..34b5a62fb
--- /dev/null
+++ b/public/area-marker-assignment-progress.svg
@@ -0,0 +1,19 @@
+
diff --git a/public/area-marker-hidden.svg b/public/area-marker-hidden.svg
new file mode 100644
index 000000000..847c9dab8
--- /dev/null
+++ b/public/area-marker-hidden.svg
@@ -0,0 +1,16 @@
+
diff --git a/public/area-marker-locations-households.svg b/public/area-marker-locations-households.svg
new file mode 100644
index 000000000..64d31aa86
--- /dev/null
+++ b/public/area-marker-locations-households.svg
@@ -0,0 +1,34 @@
+
diff --git a/public/location-dot.svg b/public/location-dot.svg
new file mode 100644
index 000000000..71c0ae799
--- /dev/null
+++ b/public/location-dot.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/location-hidden.svg b/public/location-hidden.svg
new file mode 100644
index 000000000..4b21ba771
--- /dev/null
+++ b/public/location-hidden.svg
@@ -0,0 +1,15 @@
+
diff --git a/public/location-households.svg b/public/location-households.svg
new file mode 100644
index 000000000..5a35f3656
--- /dev/null
+++ b/public/location-households.svg
@@ -0,0 +1,60 @@
+
diff --git a/public/location-progress.svg b/public/location-progress.svg
new file mode 100644
index 000000000..ddbd22667
--- /dev/null
+++ b/public/location-progress.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/features/areaAssignments/components/AreaSelect.tsx b/src/features/areaAssignments/components/AreaSelect.tsx
index 92fc93234..252db2f73 100644
--- a/src/features/areaAssignments/components/AreaSelect.tsx
+++ b/src/features/areaAssignments/components/AreaSelect.tsx
@@ -1,11 +1,10 @@
-import { FC } from 'react';
-import { ChevronLeft, Close, Search } from '@mui/icons-material';
+import { FC, useState } from 'react';
+import { ChevronLeft, ChevronRight, Close, Search } from '@mui/icons-material';
import {
Box,
- Button,
Divider,
IconButton,
- lighten,
+ Link,
TextField,
Typography,
} from '@mui/material';
@@ -23,6 +22,8 @@ import ZUIAvatar from 'zui/ZUIAvatar';
import isPointInsidePolygon from '../../canvass/utils/isPointInsidePolygon';
import useAreaAssignmentSessionMutations from '../hooks/useAreaAssingmentSessionMutations';
import { useNumericRouteParams } from 'core/hooks';
+import theme from 'theme';
+import ZUIPersonHoverCard from 'zui/ZUIPersonHoverCard';
import { Msg, useMessages } from 'core/i18n';
import areaAssignmentMessageIds from '../l10n/messageIds';
import areasMessageIds from 'features/areas/l10n/messageIds';
@@ -57,6 +58,7 @@ const AreaSelect: FC = ({
sessions,
}) => {
const areaAssignmentMessages = useMessages(areaAssignmentMessageIds);
+ const areaMessages = useMessages(areasMessageIds);
const { orgId } = useNumericRouteParams();
const { deleteSession } = useAreaAssignmentSessionMutations(orgId, areaAssId);
@@ -82,18 +84,28 @@ const AreaSelect: FC = ({
.reduce((prev, curr) => prev + curr, 0);
return (
- <>
-
+
+
{selectedArea && (
- onSelectArea('')}>
+ onSelectArea('')}
+ sx={{ mr: 1, padding: 0 }}
+ >
)}
{selectedArea ? (
- selectedArea?.title
+ selectedArea?.title || 'Untitled area'
) : (
)}
@@ -103,6 +115,21 @@ const AreaSelect: FC = ({
+ {selectedArea && (
+
+
+
+ )}
{!selectedArea && (
@@ -111,7 +138,7 @@ const AreaSelect: FC = ({
flexDirection="column"
gap={1}
overflow="hidden"
- paddingTop={1}
+ paddingTop={2}
>
= ({
}}
onChange={(evt) => onFilterTextChange(evt.target.value)}
placeholder={areaAssignmentMessages.map.findArea.filterPlaceHolder()}
- sx={{ paddingRight: 2 }}
+ size="small"
value={filterText}
variant="outlined"
/>
@@ -127,7 +154,6 @@ const AreaSelect: FC = ({
display="flex"
flexDirection="column"
gap={1}
- paddingRight={2}
sx={{ overflowY: 'auto' }}
>
{filterAreas(areas, filterText).map((area, index) => {
@@ -142,17 +168,57 @@ const AreaSelect: FC = ({
display="flex"
justifyContent="space-between"
onClick={() => onSelectArea(area.id)}
- sx={{ cursor: 'pointer' }}
+ role="button"
+ sx={{
+ '&:hover': {
+ color: theme.palette.primary.main,
+ },
+ cursor: 'pointer',
+ pt: index == 0 ? 1 : 0,
+ }}
>
- {area.title}
-
- {assignees.map((assignee) => (
-
- ))}
+ {area.title || 'Untitled area'}
+
+ {assignees.map((assignee, index) => {
+ if (index <= 3) {
+ return (
+
+
+
+
+
+ );
+ } else if (index == 4) {
+ return (
+
+ {`+${
+ assignees.length - 4
+ }`}
+
+ );
+ } else {
+ return null;
+ }
+ })}
+
+
+
@@ -166,87 +232,70 @@ const AreaSelect: FC = ({
display="flex"
flexDirection="column"
gap={1}
- paddingRight={2}
paddingTop={1}
sx={{ overflowY: 'auto' }}
>
-
- {selectedAreaStats && (
- <>
-
- ({ color: theme.palette.primary.main })}
- variant="h5"
- >
- {selectedAreaStats.num_successful_visited_households}
-
-
-
-
-
-
- ({
- color: lighten(theme.palette.primary.main, 0.5),
- })}
- variant="h5"
- >
- {selectedAreaStats.num_visited_households}
-
-
-
-
-
-
- )}
-
-
- {numberOfHouseholdsInSelectedArea}
+ {selectedAreaStats && (
+
+ ({ color: theme.palette.primary.main })}
+ variant="h5"
+ >
+ {selectedAreaStats.num_successful_visited_households}
-
+
-
-
- {locationsInSelectedArea.length}
+ )}
+
+
+ ({ color: theme.palette.primary.main })}
+ variant="h5"
+ >
+ {selectedAreaStats?.num_visited_households || 0}
-
-
+
+ / {numberOfHouseholdsInSelectedArea}
+
+
+
-
- {selectedArea &&
- (selectedArea?.description?.trim() || (
-
- ))}
-
-
+
+
+ {locationsInSelectedArea.length}
+
+
+
+
+
+
+
@@ -265,16 +314,18 @@ const AreaSelect: FC = ({
)}
{selectedAreaAssignees.map((assignee) => (
-
-
+
))}
@@ -282,6 +333,12 @@ const AreaSelect: FC = ({
+ selectedAreaAssignees.some(
+ (assignee) => assignee.id == person.id
+ )
+ }
onChange={function (person: ZetkinPerson): void {
onAddAssignee(person);
}}
@@ -291,8 +348,49 @@ const AreaSelect: FC = ({
)}
-
+
);
};
export default AreaSelect;
+
+interface ExpandableTextProps {
+ content: string;
+ maxVisibleChars: number;
+}
+
+export const ExpandableText: React.FC = ({
+ content,
+ maxVisibleChars,
+}) => {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const handleToggle = () => {
+ setIsExpanded((prev) => !prev);
+ };
+
+ const displayedText = isExpanded
+ ? content
+ : content.slice(0, maxVisibleChars);
+
+ const isLongContent = content.length > maxVisibleChars;
+
+ return (
+
+
+ {displayedText}
+ {!isExpanded && isLongContent && '...'}
+
+ {isLongContent && (
+
+ {isExpanded ? 'Show less' : 'Show more'}
+
+ )}
+
+ );
+};
diff --git a/src/features/areaAssignments/components/MapControls.tsx b/src/features/areaAssignments/components/MapControls.tsx
index 48c5f5ac2..c016e0428 100644
--- a/src/features/areaAssignments/components/MapControls.tsx
+++ b/src/features/areaAssignments/components/MapControls.tsx
@@ -4,6 +4,8 @@ import React, { useState } from 'react';
import { Box, Button, ButtonGroup } from '@mui/material';
import { Add, Remove, GpsFixed, Home } from '@mui/icons-material';
+import theme from 'theme';
+
type MapControlsProps = {
map: Map | null;
onFitBounds: () => void;
@@ -21,7 +23,17 @@ const MapControls: React.FC = ({ map, onFitBounds }) => {
zIndex: 999,
}}
>
-
+
diff --git a/src/features/areaAssignments/components/MapStyleSettings.tsx b/src/features/areaAssignments/components/MapStyleSettings.tsx
index 6f5d4b855..c641325d1 100644
--- a/src/features/areaAssignments/components/MapStyleSettings.tsx
+++ b/src/features/areaAssignments/components/MapStyleSettings.tsx
@@ -1,10 +1,17 @@
-import { Box, FormControl, MenuItem, Select, Typography } from '@mui/material';
+import {
+ Box,
+ FormControl,
+ FormControlLabel,
+ Radio,
+ RadioGroup,
+ Typography,
+} from '@mui/material';
import { FC } from 'react';
-import { Pentagon, Place, SquareRounded } from '@mui/icons-material';
import { MapStyle } from './OrganizerMap';
import { Msg } from 'core/i18n';
import messageIds from '../l10n/messageIds';
+import theme from 'theme';
type MapStyleSettingsProps = {
mapStyle: MapStyle;
@@ -15,6 +22,76 @@ const MapStyleSettings: FC = ({
mapStyle,
onMapStyleChange,
}) => {
+ const locationMarkers = [
+ {
+ image: {
+ alt: 'Dot option',
+ src: '/location-dot.svg',
+ },
+ label: messageIds.map.mapStyle.markers.options.dot,
+ value: 'dot',
+ },
+ {
+ image: {
+ alt: 'Households option',
+ src: '/location-households.svg',
+ },
+ label: messageIds.map.mapStyle.markers.options.households,
+ value: 'households',
+ },
+ {
+ image: {
+ alt: 'Progress option',
+ src: '/location-progress.svg',
+ },
+ label: messageIds.map.mapStyle.markers.options.progress,
+ value: 'progress',
+ },
+ {
+ image: {
+ alt: 'Hide option',
+ src: '/location-hidden.svg',
+ },
+ label: messageIds.map.mapStyle.markers.options.hidden,
+ value: 'hide',
+ },
+ ];
+
+ const areaMarkers = [
+ {
+ image: {
+ alt: 'Center area assignees',
+ src: '/area-marker-assignees.svg',
+ },
+ label: messageIds.map.mapStyle.center.options.assignees,
+ value: 'assignees',
+ },
+ {
+ image: {
+ alt: 'Center area households',
+ src: '/area-marker-locations-households.svg',
+ },
+ label: messageIds.map.mapStyle.center.options.households,
+ value: 'households',
+ },
+ {
+ image: {
+ alt: 'Center area progress',
+ src: '/area-marker-assignment-progress.svg',
+ },
+ label: messageIds.map.mapStyle.center.options.progress,
+ value: 'progress',
+ },
+ {
+ image: {
+ alt: 'Center area hidden',
+ src: '/area-marker-hidden.svg',
+ },
+ label: messageIds.map.mapStyle.center.options.hidden,
+ value: 'hide',
+ },
+ ];
+
return (
= ({
>
-
-
+
-
+ {locationMarkers.map(({ value, label, image }) => (
+
+ }
+ label={}
+ value={value}
+ />
+
+
+ ))}
+
-
+
-
-
-
+
+
-
+ {areaMarkers.map(({ image, value, label }) => (
+
+ }
+ label={}
+ value={value}
+ />
+
+
+ ))}
+
-
+
+
-
-
-
+
+
-
+ {[
+ {
+ label: messageIds.map.mapStyle.area.options.assignees,
+ value: 'assignees',
+ },
+ {
+ label: messageIds.map.mapStyle.area.options.households,
+ value: 'households',
+ },
+ {
+ label: messageIds.map.mapStyle.area.options.progress,
+ value: 'progress',
+ },
+ {
+ label: messageIds.map.mapStyle.area.options.outlined,
+ value: 'outlined',
+ },
+ {
+ label: messageIds.map.mapStyle.area.options.hidden,
+ value: 'hide',
+ },
+ ].map(({ value, label }) => (
+ }
+ label={}
+ value={value}
+ />
+ ))}
+
diff --git a/src/features/areaAssignments/components/OrganizerMap.tsx b/src/features/areaAssignments/components/OrganizerMap.tsx
index 2433efa24..bd4798a06 100644
--- a/src/features/areaAssignments/components/OrganizerMap.tsx
+++ b/src/features/areaAssignments/components/OrganizerMap.tsx
@@ -11,7 +11,7 @@ import {
Paper,
Typography,
} from '@mui/material';
-import { Close, Layers, Search } from '@mui/icons-material';
+import { Close, Layers, Pentagon } from '@mui/icons-material';
import { ZetkinArea } from '../../areas/types';
import OrganizerMapRenderer from './OrganizerMapRenderer';
@@ -31,8 +31,10 @@ import MapStyleSettings from './MapStyleSettings';
import useLocalStorage from 'zui/hooks/useLocalStorage';
import MapControls from './MapControls';
import { areaFilterContext } from 'features/areas/components/AreaFilters/AreaFilterContext';
-import { useMessages } from 'core/i18n';
+import theme from 'theme';
+import { Msg, useMessages } from 'core/i18n';
import messageIds from 'features/areas/l10n/messageIds';
+import messageIdsAss from '../l10n/messageIds';
type OrganizerMapProps = {
areaAssId: string;
@@ -173,7 +175,17 @@ const OrganizerMap: FC = ({
zIndex: 999,
}}
>
-
+
@@ -222,7 +234,8 @@ const OrganizerMap: FC = ({
maxWidth: 400,
minWidth: 400,
overflow: 'hidden',
- padding: 2,
+ paddingX: settingsOpen == 'select' ? 0 : 2,
+ paddingY: 1,
position: 'absolute',
right: '1rem',
top: '1rem',
@@ -230,27 +243,43 @@ const OrganizerMap: FC = ({
}}
>
{settingsOpen == 'select' && (
- {
- if (selectedArea) {
- onAddAssigneeToArea(selectedArea, person);
- }
+ setFilterText(newValue)}
- onSelectArea={(newValue) => setSelectedId(newValue)}
- selectedArea={selectedArea}
- selectedAreaStats={areaStats.stats.find(
- (stat) => stat.areaId == selectedArea?.id
- )}
- sessions={sessions}
- />
+ >
+
+ {
+ if (selectedArea) {
+ onAddAssigneeToArea(selectedArea, person);
+ }
+ }}
+ onClose={clearAndCloseSettings}
+ onFilterTextChange={(newValue) => setFilterText(newValue)}
+ onSelectArea={(newValue) => setSelectedId(newValue)}
+ selectedArea={selectedArea}
+ selectedAreaStats={areaStats.stats.find(
+ (stat) => stat.areaId == selectedArea?.id
+ )}
+ sessions={sessions}
+ />
+
+
)}
{settingsOpen != 'select' && (
<>
@@ -258,15 +287,23 @@ const OrganizerMap: FC = ({
alignItems="center"
display="flex"
justifyContent="space-between"
- paddingBottom={1}
>
- {settingsOpen == 'filters' ? 'Filters' : 'Map style'}
+ {settingsOpen == 'filters' ? (
+
+ ) : (
+
+ )}
+ {settingsOpen == 'filters' && (
+
+ Define what areas you see on the map
+
+ )}
{settingsOpen == 'layers' && (
= ({
assignment={assignment}
locations={locations}
locationStyle={mapStyle.location}
- onSelectedIdChange={(newId) => {
+ onSelectedIdChange={(newId: string) => {
setSelectedId(newId);
if (!newId) {
diff --git a/src/features/areaAssignments/components/OrganizerMapFilters/OrganizerMapFilterBadge.tsx b/src/features/areaAssignments/components/OrganizerMapFilters/OrganizerMapFilterBadge.tsx
index 04944f5e2..d74c2b1e4 100644
--- a/src/features/areaAssignments/components/OrganizerMapFilters/OrganizerMapFilterBadge.tsx
+++ b/src/features/areaAssignments/components/OrganizerMapFilters/OrganizerMapFilterBadge.tsx
@@ -22,15 +22,15 @@ const OrganizerMapFilterBadge: FC = () => {
badgeContent={numTotalFilters}
sx={(theme) => ({
'& .MuiBadge-badge': {
- backgroundColor: 'white',
- color: theme.palette.primary.main,
+ backgroundColor: theme.palette.primary.main,
+ color: 'white',
},
})}
>
-
+
) : (
-
+
);
};
export default OrganizerMapFilterBadge;
diff --git a/src/features/areaAssignments/components/OrganizerMapFilters/index.tsx b/src/features/areaAssignments/components/OrganizerMapFilters/index.tsx
index d8d675623..9e7c90762 100644
--- a/src/features/areaAssignments/components/OrganizerMapFilters/index.tsx
+++ b/src/features/areaAssignments/components/OrganizerMapFilters/index.tsx
@@ -9,7 +9,7 @@ import { areaFilterContext } from 'features/areas/components/AreaFilters/AreaFil
import AddFilterButton from 'features/areas/components/AreaFilters/AddFilterButton';
import FilterDropDown from 'features/areas/components/FilterDropDown';
import { assigneesFilterContext } from './AssigneeFilterContext';
-import { Msg, useMessages } from 'core/i18n';
+import { useMessages } from 'core/i18n';
import messageIds from 'features/areaAssignments/l10n/messageIds';
type Props = {
@@ -87,99 +87,76 @@ const OrganizerMapFilters: FC = ({ areas, onFilteredIdsChange }) => {
display="flex"
flexDirection="column"
gap={1}
- paddingRight={2}
sx={{ overflowY: 'auto' }}
>
-
-
-
-
-
-
- {
- const groupId = item.group?.id ?? 0;
- const selected = activeGroupIds.includes(groupId);
-
- return {
- icon: ,
- label: item.group
- ? item.group.title
- : messages.map.filter.ungroupedTags(),
- onClick: () => {
- if (selected) {
- setActiveGroupIds(
- activeGroupIds.filter((id) => groupId != id)
- );
- const newValue = { ...activeTagIdsByGroup };
- delete newValue[groupId];
- setActiveTagIdsByGroup(newValue);
- } else {
- setActiveGroupIds([...activeGroupIds, groupId]);
- setOpenTagsDropdown(groupId);
- }
- },
- };
- })}
- onToggle={(open) => setOpenTagsDropdown(open ? 'add' : null)}
- open={openTagsDropdown == 'add'}
- />
- ,
- label: messages.map.filter.assignees.assigned(),
- onClick: () => {
- if (!assigneesFilter || assigneesFilter == 'unassigned') {
- onAssigneesFilterChange('assigned');
- } else {
- onAssigneesFilterChange(null);
- }
+
+
+ ,
+ label: messages.map.filter.assignees.assigned(),
+ onClick: () => {
+ if (!assigneesFilter || assigneesFilter == 'unassigned') {
+ onAssigneesFilterChange('assigned');
+ } else {
+ onAssigneesFilterChange(null);
+ }
+ },
},
- },
- {
- icon: ,
- label: messages.map.filter.assignees.unassigned(),
- onClick: () => {
- if (!assigneesFilter || assigneesFilter == 'assigned') {
- onAssigneesFilterChange('unassigned');
- } else {
- onAssigneesFilterChange(null);
- }
+ {
+ icon: ,
+ label: messages.map.filter.assignees.unassigned(),
+ onClick: () => {
+ if (!assigneesFilter || assigneesFilter == 'assigned') {
+ onAssigneesFilterChange('unassigned');
+ } else {
+ onAssigneesFilterChange(null);
+ }
+ },
},
- },
- ]}
- label={messages.map.filter.assignees.label()}
- onToggle={() => setOpenAssigneesDropdown(!openAssigneesDropdown)}
- open={openAssigneesDropdown}
- startIcon={
- assigneesFilter ? (
-
- setOpenAssigneesDropdown(!openAssigneesDropdown)}
+ open={openAssigneesDropdown}
+ startIcon={
+ assigneesFilter ? (
+
- {1}
-
-
- ) : null
- }
- variant="outlined"
- />
+
+ {1}
+
+
+ ) : null
+ }
+ variant="outlined"
+ />
+
+
+
+
{activeGroupIds.map((groupId) => {
const info = groupsById[groupId];
const currentIds = activeTagIdsByGroup[groupId] || [];
@@ -257,6 +234,32 @@ const OrganizerMapFilters: FC = ({ areas, onFilteredIdsChange }) => {
}
})}
+ {
+ const groupId = item.group?.id ?? 0;
+ const selected = activeGroupIds.includes(groupId);
+
+ return {
+ icon: ,
+ label: item.group
+ ? item.group.title
+ : messages.map.filter.ungroupedTags(),
+ onClick: () => {
+ if (selected) {
+ setActiveGroupIds(activeGroupIds.filter((id) => groupId != id));
+ const newValue = { ...activeTagIdsByGroup };
+ delete newValue[groupId];
+ setActiveTagIdsByGroup(newValue);
+ } else {
+ setActiveGroupIds([...activeGroupIds, groupId]);
+ setOpenTagsDropdown(groupId);
+ }
+ },
+ };
+ })}
+ onToggle={(open) => setOpenTagsDropdown(open ? 'add' : null)}
+ open={openTagsDropdown == 'add'}
+ />
);
};
diff --git a/src/features/areaAssignments/components/OrganizerMapRenderer.tsx b/src/features/areaAssignments/components/OrganizerMapRenderer.tsx
index 6120bfec1..d854fb8bc 100644
--- a/src/features/areaAssignments/components/OrganizerMapRenderer.tsx
+++ b/src/features/areaAssignments/components/OrganizerMapRenderer.tsx
@@ -1,4 +1,5 @@
import { useTheme } from '@mui/styles';
+import { DoorFront, Place } from '@mui/icons-material';
import {
AttributionControl,
FeatureGroup,
@@ -10,7 +11,11 @@ import { Box, Divider, lighten, Typography } from '@mui/material';
import { FC, useContext, useEffect, useRef, useState } from 'react';
import { FeatureGroup as FeatureGroupType, latLngBounds } from 'leaflet';
+import { assigneesFilterContext } from './OrganizerMapFilters/AssigneeFilterContext';
import { DivIconMarker } from 'features/events/components/LocationModal/DivIconMarker';
+import isPointInsidePolygon from '../../canvass/utils/isPointInsidePolygon';
+import objToLatLng from 'features/areas/utils/objToLatLng';
+import { ZetkinArea } from 'features/areas/types';
import ZUIAvatar from 'zui/ZUIAvatar';
import {
ZetkinAssignmentAreaStats,
@@ -18,10 +23,6 @@ import {
ZetkinAreaAssignmentSession,
ZetkinLocation,
} from '../types';
-import { ZetkinArea } from 'features/areas/types';
-import objToLatLng from 'features/areas/utils/objToLatLng';
-import { assigneesFilterContext } from './OrganizerMapFilters/AssigneeFilterContext';
-import isPointInsidePolygon from '../../canvass/utils/isPointInsidePolygon';
const LocationMarker: FC<{
areaAssId: string;
@@ -32,12 +33,16 @@ const LocationMarker: FC<{
const theme = useTheme();
if (locationStyle == 'dot') {
return (
-
+
);
@@ -58,9 +63,9 @@ const LocationMarker: FC<{
color={theme.palette.text.secondary}
display="inline-flex"
flexDirection="column"
- fontSize="12px"
+ fontSize="14px"
justifyContent="center"
- paddingX="2px"
+ paddingX="10px"
width="100%"
>
{location.households.length}
@@ -400,6 +405,7 @@ const OrganizerMapRenderer: FC = ({
{overlayStyle == 'households' && (
= ({
padding="2px 6px"
sx={{ translate: '-50% -50%' }}
>
-
- {numberOfLocations}
-
-
-
+
+
{numberOfHouseholds}
+
+
+
+
+ {numberOfLocations}
+
)}
@@ -444,9 +471,9 @@ const OrganizerMapRenderer: FC = ({
borderRadius: '2em',
display: 'flex',
flexDirection: 'row',
- height: '20px',
+ height: '30px',
justifyContent: 'center',
- width: '20px',
+ width: '30px',
}}
/>
diff --git a/src/features/areaAssignments/l10n/messageIds.ts b/src/features/areaAssignments/l10n/messageIds.ts
index f31b5988b..2262d2560 100644
--- a/src/features/areaAssignments/l10n/messageIds.ts
+++ b/src/features/areaAssignments/l10n/messageIds.ts
@@ -59,7 +59,7 @@ export default makeMessages('feat.areaAssignments', {
},
stats: {
households: m<{ numHouseholds: number }>(
- '{numHouseholds, plural, one {Household} other {Households}}'
+ '{numHouseholds, plural, one {Household visited} other {Households visited}}'
),
locations: m<{ numLocations: number }>(
'{numLocations, plural, one {Location} other {Locations}}'
@@ -67,9 +67,6 @@ export default makeMessages('feat.areaAssignments', {
successful: m<{ numSuccessfulVisits: number }>(
'{numSuccessfulVisits, plural, one {Successful visit} other {Successful visits}}'
),
- visited: m<{ numVisited: number }>(
- '{numVisited, plural, =0 {Visited} one {Visited} other {Visited}}'
- ),
},
},
filter: {
@@ -78,42 +75,44 @@ export default makeMessages('feat.areaAssignments', {
label: m('Assignees'),
unassigned: m('Only unassigned areas'),
},
+ header: m('Filters'),
title: m('Add filters to decide what areas you see on the map'),
ungroupedTags: m('Ungrouped tags'),
},
findArea: {
filterPlaceHolder: m('Filter'),
- title: m('Find area'),
+ title: m('Areas'),
},
mapStyle: {
area: {
- label: m('What the area color represents.'),
+ label: m('Area color'),
options: {
- assignees: m('Number of assignees'),
+ assignees: m('Assignees'),
hidden: m('Hidden'),
- households: m('Number of households'),
+ households: m('Households'),
outlined: m('Outlined'),
- progress: m('Progress in this assignment'),
+ progress: m('Progress'),
},
},
center: {
- label: m('What to show in the center of the area'),
+ label: m('Area markers'),
options: {
assignees: m('Assignees'),
hidden: m('Hidden'),
- households: m('Number of locations and households in the area'),
- progress: m('Progress in the area in this assignment'),
+ households: m('Households & locations'),
+ progress: m('Progress'),
},
},
markers: {
- label: m('What the markers represent'),
+ label: m('Locations markers'),
options: {
- dot: m('Dot'),
+ dot: m('Point'),
hidden: m('Hidden'),
- households: m('Number of households at the location'),
- progress: m('Progress in this assignment'),
+ households: m('Households'),
+ progress: m('Progress'),
},
},
+ title: m('Layers'),
},
},
overview: {
diff --git a/src/features/events/components/LocationModal/DivIconMarker.tsx b/src/features/events/components/LocationModal/DivIconMarker.tsx
index 26a018d2c..cf56357a3 100644
--- a/src/features/events/components/LocationModal/DivIconMarker.tsx
+++ b/src/features/events/components/LocationModal/DivIconMarker.tsx
@@ -9,7 +9,15 @@ export const DivIconMarker: FC<{
eventHandlers?: LeafletEventHandlerFnMap;
iconAnchor?: [number, number];
position: LatLngExpression;
-}> = ({ children, draggable, eventHandlers, iconAnchor, position }) => {
+ zIndexOffset?: number;
+}> = ({
+ children,
+ draggable,
+ eventHandlers,
+ iconAnchor,
+ position,
+ zIndexOffset,
+}) => {
const iconDiv = useMemo(() => document.createElement('div'), []);
return (
<>
@@ -22,6 +30,7 @@ export const DivIconMarker: FC<{
iconAnchor,
})}
position={position}
+ zIndexOffset={zIndexOffset}
/>
{createPortal(children, iconDiv)}