kobotoolbox / kpi / 25077148540

82%

master: 76%

push

github

fix(map): multiple UI issues DEV-1985 DEV-1549 DEV-132 (#6962)

### 📣 Summary

Fix few different UI issues in Project → Data → Map. Migrate old
components to new ones. Allow zooming map with pinch zoom gesture on
touchpad, and with ctrl + mouswheel.

### 💭 Notes

Changes here:
- `ActionIcon` component now has properly styled "outline" variant
- `ButtonNew` component small adjustments to "outline" variant
- Map uses Mantine components for the UI:
- Top right buttons ("Map display settings", "Toggle layers", "Toggle
Fullscreen", "Show as…") now use `ActionIcon` and have few tweaks to
ensure tooltips and layers panel don't appear behind UI elements
  - Bottom left "Disaggregate using…" now uses `Menu` with `ButtonNew`
  - Bottom left "Legend" now uses `ButtonNew` with `Dialog`
- Map now allows zooming with touchpad pinch gesture - previously whole
browser UI was zooming in (annoying)
- Map scroll wheel zooming is enabled only on non-touch devices (to not
trap users in the map)
- "Toggle layers" button now works as toggle rather than always trying
to open (even if layers dialog is already opened)

### 👀 Preview steps

1. ℹ️ have an account and a project with geopoint question, text
question and few submissions
2. Go to Project → Data → Map
3. Hover over top right buttons
4. 🟢 Notice tooltips appear on top for every button
5. Verify that each button still works as expected when clicked
6. Click "Toggle layers"
7. 🟢 Notice that layers dialog is no longer appearing behind UI elements
8. Click "Disaggregate by survey responses" button
9. 🟢 Notice that a menu appears with option to choose the text question
10. Click text question name
11. 🟢 Notice "^ Legend" button appeared
12. Click "^ Legend" button
13. 🟢 Notice a dialog with a list of uniqe different responses appears
14. Select one of the responses
15. 🟢 Notice legend dialog still appears, and a small "Reset" button in
top right corner of the dialog appeared

9050 of 12139 branches covered (74.55%)

29833 of 36300 relevant lines covered (82.18%)

5.78 hits per line