Skip to content

Improve the full-screen ImageViewer #646

@kevinaboos

Description

@kevinaboos

PR #565 introduced a new ImageViewer widget that downloads and displays the full-screen version of an image upon clicking on a thumbnail in the timeline. While this image viewer is fully functional, there are some visual and functional improvements that can be made.

Here's an example screenshot:

Image
  1. After loading the full-size image, it should fill the entire view by default.
    • Currently, the full-size image only takes up a small part of the view by default (see above screenshot). This will force the user to manually click the zoom in button several times.
  2. Allow zooming in much further.
    • Ideally we shouldn't restrict the zoom-in amount at all, since some images may have very small text that requires the user to zoom in 100x just to read it.
  3. Make the background partially transparent instead of just opaque white.
    • This should match other modals where we have a slightly-transparent dark gray overlay as the background, but in this case the background should be more opaque than other modals in order to make the image stand out more clearly.
  4. Make the rotation animation faster — it should take no more than 200-300 milliseconds, perhaps even faster.
  5. Reformat the buttons to look better.
    1. Add padding to the view group of buttons so that they're further away from the edge of the window. They should line up horizontally with the image metadata view on the upper left.
    2. We should use the RobrixIconButton widget such that the button style is consistent with other buttons. For example, look at the X close button on the settings screen.
  6. Add a "reset view" button that resets the pan/zoom settings to the default, which is just the image filling the view with no rotation.
  7. Handle the regular set of actions/gestures that close the modal: pressing Escape, the back navigational gesture on Android, etc.
    • This can be achieved using by handling the ModalAction::Dismissed action, like we do here:
      let modal_dismissed = actions
      .iter()
      .any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
      if cancel_button_clicked || modal_dismissed {
      if let Some(state) = self.state.as_ref() {
      let _ = state.response_sender.send(VerificationUserResponse::Cancel);
      }
      self.reset_state();
      // If the modal was dismissed by clicking outside of it, we MUST NOT emit
      // a `VerificationModalAction::Close` action, as that would cause
      // an infinite action feedback loop.
      if !modal_dismissed {
      cx.action(VerificationModalAction::Close);
      }
      }

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions