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

Style map message and add zoom functionality #415

Merged
merged 2 commits into from
Sep 14, 2020

Conversation

alexelash
Copy link
Contributor

Overview

This PR styles the "zoom in to work with blocks" message to pop more against its background. It also turns it into a button so that a user can quickly get to the correct zoom level to work with blocks.

Checklist

  • Description of PR is in an appropriate section of CHANGELOG.md and grouped with similar changes, if possible

Demo

Screen Shot 2020-09-14 at 1 17 42 PM

districtbuilder_zoom_button

Notes

N/A

Testing Instructions

  • git pull
  • Open up a map. Zoom in close enough that the "Blocks" button is enabled. Click "Blocks" to begin editing at the block level.
  • Now use the - arrow to zoom out.
  • You should see the map message that says "zoom in to work with blocks". It should have a hover state and display a pointer cursor.
  • Click the button.
  • The message should disappear and you should see blocks again.

Closes #372

<Box
sx={style.message}
as="button"
onClick={() => (map !== undefined ? map.zoomTo(maxZoom) : null)}
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice, this works great. You might want to consider using a && operator instead of the ternary operator because there is no "else" aspect of this condition.

Copy link
Contributor

@jfrankl jfrankl left a comment

Choose a reason for hiding this comment

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

LGTM

@jfrankl
Copy link
Contributor

jfrankl commented Sep 14, 2020

Hey @alexelash this looks great. One thing I noticed, which wasn't captured in this issue, is that this component isn't actually horizontally centered. Would you be able to horizontally center it before merging?

@alexelash
Copy link
Contributor Author

alexelash commented Sep 14, 2020

@jfrankl Good catch, I didn't notice that. I've updated to resolve both suggestions in 54fddee.

You can see the zoom message is now centered below:
Screen Shot 2020-09-14 at 7 12 33 PM

@alexelash alexelash merged commit 2426463 into develop Sep 14, 2020
@alexelash alexelash deleted the feature/al/style-map-message branch September 14, 2020 18:30
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.

Style Map Message Component
2 participants