Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overhaul sketch UI #5

Merged
merged 29 commits into from
Nov 4, 2024
Merged

Overhaul sketch UI #5

merged 29 commits into from
Nov 4, 2024

Conversation

dabreegster
Copy link
Collaborator

@dabreegster dabreegster commented Oct 24, 2024

This is a large change to the sketch UI. Demo at https://acteng.github.io/atip/move_draw_controls/scheme.html?authority=TA_North+Lincolnshire

  • the top toolbar remains visible in all modes
  • each mode's draw controls appear in a second row of the toolbar
  • the distinction between creating/editing geometry and a form goes away. While drawing something new, you can immediately fill out the form. After clicking an object to edit, you can edit both geometry and the form at the same time
  • for 3 tools (split route, streetview, georeference image), the left sidebar remains in the neutral list mode

TODOs that must be done before merging:

  • Fix margins in the toolbar
  • Adjust the position of the geocoder widget; it overlaps right now
  • Fix the help icon; it leaks out of the box and jumps around because of its hover margin
  • Generally make sure the toolbar matches Figma and appears reasonably on small screens
  • Decide where the Delete button should go
  • Possibly have a second copy of the main buttons in the left sidebar, floating/sticky at the top or bottom
  • Handle the huge route waypoint geocoder list

Some steps I'll save for a separate followup:

  • Use a marker for point mode, so editing an existing point is more normal
  • Merge the freehand / snapped polygon tools

dabreegster and others added 25 commits November 4, 2024 11:11
Also refactors how SplitRouteMode gets instantiated
the new toolbar and was added for one use case that's not likely to
repeat anytime soon
…yle for draw controls. Radios no longer have a legend, so stop using the Svelte component entirely, for simplicity. Finally fix the bizarre problem with checkboxes and radios wrapping to two lines, by hacking max-width.
<label
class="govuk-label govuk-radios__label"
for={id + thisValue}
style="max-width: 100%"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bizarre wrapping behavior of checkboxes and radio buttons wasn't a flex problem. max-width is set by govuk components a certain way that our usage broken. This appears to work fine on both small and large screens:
image
image

@dabreegster
Copy link
Collaborator Author

I've fixed almost all of the margin/styling issues, after understanding the root causes with enough time in Firefox inspector. (Checkboxes and radios had max-width that was interacting oddly with our setup.) I've tested all of the tools both for creating something new and editing, and everything looks/feels correct to me. So I'm going to merge this in, update the other repo, and continue on with smaller tasks listed in acteng/atip#536

@dabreegster dabreegster merged commit 800aade into main Nov 4, 2024
@dabreegster dabreegster deleted the move_draw_controls branch November 4, 2024 15:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant