feat(Viewer): add rotate left/right to image viewer#1758
Open
vladopol wants to merge 2 commits into
Open
Conversation
Install panzoom library (9.4.4, 6 kB) and apply it to the image viewer wrapper in ViewerHandlerImages.vue: - Scroll wheel to zoom in/out (1× – 8×) - Drag to pan when zoomed in - Double-click to zoom in 3× at cursor, double-click again to reset - Auto-center image when zoom returns to 1× - Pan blocked at minimum zoom to prevent accidental shifts - Cursor changes: zoom-in at 1×, grab/grabbing when zoomed Fixes nextcloud#1535 Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Add rotate left (−90°) and rotate right (+90°) buttons to the image viewer actions menu alongside the existing "Open in web browser" action. - ViewerHandlerImages: rotation state with rotateLeft/rotateRight exposed via defineExpose; CSS transform applied to <img> with 0.3s transition; rotation resets to 0 when switching images - ViewerApp: NcActionButton entries wired to viewerRef.rotateLeft/Right; buttons only appear for handlers that expose these methods (image viewer) Rotation uses unbounded angle increments so CSS transition always animates in the correct direction regardless of how many times the button is pressed. Fixes nextcloud#1757 Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds rotate left and rotate right controls to the image viewer actions menu, so users can correct the orientation of images received in Talk chats without leaving the app.
Changes:
ViewerHandlerImages.vue— rotation state;rotateLeft/rotateRightexposed viadefineExpose; CSStransform: rotate()applied to<img>with a 0.3s transition; rotation resets when switching imagesViewerApp.vue— twoNcActionButtonentries wired toviewerRef.rotateLeft/Right; buttons are shown only for handlers that expose these methods, so video and other viewers are unaffectedRotation uses unbounded angle increments (
+90,+180, ...) so the CSS transition always animates in the correct direction regardless of how many times the button is pressed.Depends on #1756 (zoom/pan).
Test plan
Fixes #1757