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.

Sign up for GitHub

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

Jump to bottom

Tapping on an uploaded picture in the post editor should bring up a larger preview #1097

Open
0xCmdrKeen opened this issue Dec 17, 2023 · 1 comment · May be fixed by #1112
Open

Tapping on an uploaded picture in the post editor should bring up a larger preview #1097

0xCmdrKeen opened this issue Dec 17, 2023 · 1 comment · May be fixed by #1112
Labels
enhancement New feature or request

Comments

@0xCmdrKeen
Copy link
Contributor

0xCmdrKeen commented Dec 17, 2023 •
edited

Is your feature request related to a problem? Please describe.
After uploading a picture in the post editor, Voyager only shows a tiny preview. Understandable, because a larger version might obscure the inputs below, but also annoying if you're struggling with writing a good title and want to avoid writing the same text that's already in the meme.

image

Describe the solution you'd like
When tapping the preview image in the post editor, a lightbox view should pop up showing a full size preview. Basically like the one that's available when viewing a regular post, sans the voting and share buttons at the bottom.

Describe alternatives you've considered
Open the photos app, find the picture there, and then switch back to Voyager, I guess. Doable but annoying, especially if you have a LOT of pictures.

Additional context
I tried implementing this myself by using the existing GalleryImg component in PhotoPreview, but even after moving the GalleryProvider outside of the PageContext I can't get it to work. The lightbox always comes up empty and worse yet, the close button doesn't even work. Not sure what I'm missing, but with the right clue I might be able to finish this myself.

Best I can currently do is probably just removing the size restriction so tapping on the preview would show a larger version inside the post editor, not in a lightbox.
@0xCmdrKeen 0xCmdrKeen added the enhancement New feature or request label Dec 17, 2023
@0xCmdrKeen
Copy link
Contributor Author

0xCmdrKeen commented Dec 21, 2023 •
edited

Okay, after fiddling with this some more it turns out that this is simply a z-index issue. The default z-index for PhotoSwipe is 100,000, but Voyager changes it to 100 in order for the IonActionSheet to be visible above it. The problem is that the IonModal from the Post Editor also uses a z-index in the same range (both use 20,000 + a small but increasing number), so when PhotoSwipe is loaded from within the modal, it pops up behind it, making it not only invisible and inaccessible, but also unable to dismiss because it captures input focus.

The problem is basically how to make PhotoSwipe use a larger z-index only when invoked from an IoModal (or specifically, the post editor), or make the modal use a smaller one. Unfortunately I can't see any solution other than a hacky one — somehow, the modified z-index would need to be passed through from the GalleryImg to the GalleryContext, because only that has a ref to the actual PhotoSwipe <div>.

@0xCmdrKeen 0xCmdrKeen linked a pull request Dec 21, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feature: PhotoSwipe lightbox for post editor photo preview 0xCmdrKeen/voyager
1 participant
@0xCmdrKeen