Add expand/compress image button on image view box #15068
Conversation
mashirozx
force-pushed
the
pr-branch-add-image-zoom-button
branch
from
640cc70 to
a2df38c
Compare
mashirozx
changed the title
|
I have checked out the demo and noticed an issue. When you expand the image and try to pan it by dragging, the browser tries to drag the image file. Then when you release the mouse button, the image starts following the cursor until you click (I am on Firefox) |
|
Intuitively, I would rely on the pan-by-dragging behaviour instead of scrollbars or mouse wheel. It takes a lot of effort to scroll somewhere using the mouse wheel on a long image, and dragging the scrollbar thumb is buggy because the scrollbar overlays with other modal elements. Plus, the scrollbars aren't very visually appealing. So I would suggest hiding scrollbars and fixing the pan-by-dragging functionality. |
|
@Gargron If it's convenient for you, please have a try. 😄
|
mashirozx
force-pushed
the
pr-branch-add-image-zoom-button
branch
from
fc5947a to
fff0ced
Compare
|
In the context of translation for Crowdin, I'd like to understand what "compress" means in this context. I assume it is not related to image file compression, but something visual in the lightbox. Does it mean close? Or minimize? Or shrink? Perhaps one of those might also work better in English. Thank you! For now, based on the demo, I have loosely translated these in Dutch as "Enlarge image" and "Fit image". |
@Krinkle This works! Yes, it's about how the picture is displayed in the browser window. |
@Krinkle I can't agree more on this! 😀 |
* add zoom image button * enhance zoom algorithm & add translation * code structure * code structure * code structure * enhance grab performance * rm useless state * fix behavior on Firefox & scroll lock & horizontal scroll with mousewheel * remove scroll lock on MouseWheelEvent * code structure * enhance algorithm and code structure * rm Gemfile.lock from tree * codeclimate * fix a stupid mistake
Add feature for #15018
A live demo here: https://hello.2heng.xin/@mashiro/105123931762135694
Feature
Motivation
Consider the condition that there is a very long image, it's hard to scale and read on desktop:
In this PR, we add a button that can scale image on click, to fit the width/height (depend on image's width/height ratio) of the screen so image can be read easily though scroll: