Skip to content

Add image viewer rework#686

Open
Septicity wants to merge 10 commits intoSableClient:devfrom
Septicity:feat/image-viewer-rework
Open

Add image viewer rework#686
Septicity wants to merge 10 commits intoSableClient:devfrom
Septicity:feat/image-viewer-rework

Conversation

@Septicity
Copy link
Copy Markdown
Contributor

Description

I've fixed many issues with the image viewer, while also adding some intuitive functionality.

Fixes:

  • Inline styles that aren't changed dynamically have been moved to the CSS.
  • The Zoom % pill no longer changes size except for manual zoom over 500%. This prevents the +/- buttons from moving as they are being clicked.
  • Transitions are now disabled for manual panning to improve responsiveness.
  • Images are now scaled independently of browser dimensions. This means that 100% zoom will always refer to the image's native size, and zoomed images will be rendered at full quality. (Previously, a small browser window would shrink the base image such that zooming in would make it visibly blurry.)
  • Pinch gestures generally did not work before (as their detection was usually overridden by the double tap detection, since pinching inherently involves using two fingers); This should be fixed. (Waiting for a deployment to test properly!)
  • The double tap gesture will no longer be triggered by extremely fast double taps, to prevent accidental triggers.

Changes:

  • The Zoom % pill now allows entering a custom zoom value, rather than resetting to 100% zoom on click.
  • Related to the previous change, there is now a View Original Size button (with a photo icon) that only appears when you aren't already at 100% zoom.
  • With the image scaling changes, I have reasonably kept the original behavior, with alterations to stay intuitive: Until an image being viewed is manually panned or zoomed (or the view is reset), it is automatically scaled to fit the container it's in.
  • Related to the previous change, there is a Reset View button (with a refresh icon) that only appears when you have manually panned or zoomed away from the initial rendered position.
  • The default rendering style for images is now pixelated; this preserves detail for smaller images, especially pixel art, and shouldn't be relevant for larger images, but it's a change I'm willing to revert.

Known issues:

  • The Reset View button doesn't animate the transition back to the original view, but the View Original Size button does. I could not figure out how to get this to work properly.
  • Some functionalities/changes I'd make aren't possible without project-wide reworks:
    • Some of the buttons' functionalities would be much clearer with tooltips, but no components use browser-level tooltips and I don't feel confident adding the pop-up tooltips used in the sidebar.
    • I would add a border to the Download button for better contrast, but the only "Primary"-colored button I've seen with borders is the Mark All As Read button, so changing that would require a broader scope.
    • Some of these changes may need to be put into the PDF viewer as well, or perhaps we should combine those two things at some point?
  • It feels disingenuous for me to bundle a bug fix with added functionality, but the process of fixing these bugs led to gaps that needed to be filled; If necessary, we can try to separate this into two PRs, but I assume the functionality will be appreciated already.
  • This needs a changeset, but I'm not sure exactly how much of this will make sense to put into it, since it's a fairly big change.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

AI disclosure:

  • Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
  • Fully AI generated (explain what all the generated code does in moderate detail).

I used AI to help wire gestures correctly and deal with correctly selectively disabling animation transitions.

@Septicity Septicity requested review from 7w1 and hazre as code owners April 14, 2026 11:39
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