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.

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

Fix scroll to zoom, resize small images to fill #1063

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ktprograms
Copy link

Setting the background to white is removed since it doesn't work well with the zooming (Outside the image boundaries is still transparent).

Transitions are disabled when zooming (or rather only enabled when zooming back to 1x or in to 1.3x) because they don't work well with zooming (feels laggy).

@skjnldsv skjnldsv added 3. to review Waiting for reviews enhancement New feature or request labels Nov 8, 2021
@skjnldsv skjnldsv added this to the Nextcloud 24 milestone Nov 8, 2021
Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! :)
Thanks for your PR.
I added some comments, please check them and feel free to ping me if you have any questions

src/components/Images.vue Outdated Show resolved Hide resolved
src/components/Images.vue Outdated Show resolved Hide resolved
@skjnldsv skjnldsv added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Nov 8, 2021
@ktprograms
Copy link
Author

@skjnldsv Can you please take a look at my replies (in particular the one about the hover background)

Also I'm assuming the Node / node test failed because I didn't commit the correct js/viewer-main.js and js/viewer-main.js.map files?

@skjnldsv
Copy link
Member

skjnldsv commented Nov 9, 2021

Also I'm assuming the Node / node test failed because I didn't commit the correct js/viewer-main.js and js/viewer-main.js.map files?

Yes :)
You can either do it here or ask the bot to do it for you with one of the following comments:

  • /compile /js will create a new commit containing the compiled files
  • /compile amend /js, will amend your previous commit
  • /compile fixup /js will create a fixup based on the previous commit

@szaimen

This comment has been minimized.

@ktprograms

This comment has been minimized.

@szaimen

This comment has been minimized.

@ktprograms

This comment has been minimized.

@szaimen

This comment has been minimized.

@ktprograms
Copy link
Author

ktprograms commented Nov 11, 2021

The PRs title sounded like it could have fixed the mentioned issue.

What the scroll to zoom meant is that previously, whenever I scroll on an image it just moves in seemingly random directions (the zoom point doesn't stay under the cursor).

@ktprograms
Copy link
Author

@skjnldsv I think I've done all the changes you requested in aa829e4

Setting the background to white is removed since it doesn't work well
with the zooming (Outside the image boundaries is still transparent)

Signed-off-by: ktprograms <[email protected]>
Add window resize event listener to check if image is filling width or
height and then set either (width,max-height) or (height,max-width) such
that small images are still resized to fill the view area.

Signed-off-by: ktprograms <[email protected]>
@ktprograms
Copy link
Author

ktprograms commented Dec 8, 2021

@skjnldsv 70957b6 is because I set up YouCompleteMe, so I also fixed a few vls diagnostic warnings (all in the doc comments). If you don't want the jsconfig.json file or these warning fixes, I'll revert the commit.

Edit: 9407116 (turns out I didn't have let g:ycm_max_diagnostics_to_display = 0 in my vimrc, so I wasn't getting all the diagnostic warnings)

@ktprograms
Copy link
Author

Should I squash the handling of transparent images together with the fix zoom commit?

Also, why are the built js files stored in the repo? It makes it so much harder to make git changes like fixups (that I then rebase -i) because I need to also deal with the files in js/.

jsconfig.json Outdated Show resolved Hide resolved
Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, so this is much better already.
I like it actually, nice approach. There is some regression though and this is the very reason position: absolute was not being used in the first place.

Initially, we did NOT want to enlarge small pictures. Which currently, it is done by that PR. This is the only regression found when testing all the use cases I have with images sized 👍

Here is the list of other regressions:

  • Small pictures are enlarged
  • Arrows are over the pictures
  • Title is over the picture (bright image will hide the title)

dev skjnldsv com_apps_files__dir=_ openfile=35853

@jancborchardt @nimishavijay needs to validate this before we merge! ⚠️
I'm personally ok with that if we don't put the image under the title.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants