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

Disable download button and show tooltip at low zoom levels. [#37 #59] #63

Merged
merged 8 commits into from
Jun 7, 2024

Conversation

eti7075
Copy link
Collaborator

@eti7075 eti7075 commented Jun 5, 2024

The download button is now disabled at zoom levels below 16. A tooltip is provided when hovering over the download button while it is disabled for this reason.

Screen.Recording.2024-06-05.at.2.07.15.PM.mov

@eti7075 eti7075 linked an issue Jun 5, 2024 that may be closed by this pull request
@@ -8,15 +8,21 @@ import { useState, useEffect } from "react";

function App() {
const [modeName, setModeName] = useState("theme-dark");
const [zoom, setZoom] = useState(0);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

new zoom hook, used to update the download button state

@@ -185,6 +191,7 @@ export default function Map({ mode }) {
onClick={onClick}
cursor={cursor}
hash={true}
onZoom={handleZoom}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Zoom state is dependent on map's zoom state.

<div className="download-text">
{loading ? "Downloading..." : "Download Visible"}
}
open={showFloater}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Floater is "controlled", and only is shown when use is hovering over the 'button--download' div element.

@eti7075 eti7075 changed the title Disable download button and show tooltip at low zoom levels. [#37] Disable download button and show tooltip at low zoom levels. [#37 #59] Jun 6, 2024
@eti7075
Copy link
Collaborator Author

eti7075 commented Jun 6, 2024

Screenshot 2024-06-06 at 11 28 56 AM
Here is the updated view for the tooltip shown when the button is clicked at low zoom levels.

@Bonkles Bonkles merged commit e057b29 into main Jun 7, 2024
1 check passed
@Bonkles Bonkles deleted the zoom-threshold branch June 7, 2024 03:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants