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.

Sign up for GitHub

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

Jump to bottom

enhancement: preview image presentation #9806

Merged
merged 2 commits into from
Oct 16, 2023
Merged

enhancement: preview image presentation #9806

merged 2 commits into from
Oct 16, 2023

Conversation

fschade
Copy link
Contributor

@fschade fschade commented Oct 15, 2023 •
edited
Loading

Description

the preview app now has a more user friendly image browsing experience,
image zooming, rotation and movement is smoother, images are no longer cropped.

basic mouse control (axis) is part of it which makes navigation in large files (e.g. maps) more easz.

Related Issue

Motivation and Context

web preview app is not just in use to preview images, but also to actually consume the content, therefor it is needed that images are un-cropped for that, in the file-list for example it is fine to have cropping in place.

How Has This Been Tested?

  • unit tests
  • e2e tests
  • manual testing

Screenshots (if appropriate):

BEFORE:
https://github.com/owncloud/web/assets/49308105/d9b4b4d7-7e55-4c5a-993c-0c0c77912717

AFTER:
https://github.com/owncloud/web/assets/49308105/c27e38e8-f053-412f-ada8-f95f54fab4e1

Types of changes

  • 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 change)
  • Technical debt
  • Tests

Checklist:

  • Code changes
  • Unit tests added
  • Acceptance tests added
  • Documentation ticket raised:

Open tasks:

  • test on more devices
  • check DOM structure regarding a11y, not an expert in that field, cc.: @pascalwengerter
  • more unit tests!? old tests work, maybe i have to review, add or update some.

@fschade fschade force-pushed the preview-image-processor branch from 8d42040 to 62b9985 Compare October 15, 2023 17:06
fschade
fschade commented Oct 15, 2023
View reviewed changes
packages/web-app-preview/src/components/Sources/MediaImage.vue
let h: number
let v: number

switch (props.currentImageRotation) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

only 4 steps supported currently, needs matrix multiplication if more granular steps needed....

@fschade fschade mentioned this pull request Oct 16, 2023
Merged
9 tasks
@AlexAndBear
Copy link
Contributor

Could you please shortly elaborate, what

the preview app now has a more user friendly image browsing experience,
image zooming, rotation and movement is smoother

exactly means, so I can review the PR according to the expected behavior.

IHMO includes, moving the image in the zone via drag and drop + animation while zooming/rotating, correct ?

@fschade
Copy link
Contributor Author

fschade commented Oct 16, 2023

Could you please shortly elaborate, what

the preview app now has a more user friendly image browsing experience,
image zooming, rotation and movement is smoother

exactly means, so I can review the PR according to the expected behavior.

IHMO includes, moving the image in the zone via drag and drop + animation while zooming/rotating, correct ?

it means, it uses css3 (the lib) for those operations which is gpu accelerated, not sure if it makes a huge difference, it felt pretty smooth here.

the main reason was to not have images cropped (ocis), but in some cases it still happened even if the source is un-cropped (css op origin was off).

yup, drag and drop is possible, zooming via mouse wheel should be possible too easily but not part of this pr.

@fschade
enhancement: preview image presentation
d54290a 
use a more user friendly image preview and take care that images are no longer cropped
@fschade
fix> e2e test preview image xpath
dfbcc28
@fschade fschade force-pushed the preview-image-processor branch from 8fe46ae to dfbcc28 Compare October 16, 2023 11:20
@sonarcloud
Copy link

sonarcloud bot commented Oct 16, 2023

SonarCloud Quality Gate failed.    Quality Gate failed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

27.5% 27.5% Coverage
0.0% 0.0% Duplication

idea Catch issues before they fail your Quality Gate with our IDE extension sonarlint SonarLint

@fschade fschade merged commit 2ca9310 into master Oct 16, 2023
1 of 2 checks passed
@delete-merged-branch delete-merged-branch bot deleted the preview-image-processor branch October 16, 2023 14:23
@pasnox pasnox mentioned this pull request Dec 8, 2023
Closed
@micbar micbar mentioned this pull request Dec 12, 2023
Merged
12 tasks
AlexAndBear pushed a commit that referenced this pull request Dec 13, 2023
@fschade @AlexAndBear
enhancement: preview image presentation (#9806)
3a77045 
* enhancement: preview image presentation

use a more user friendly image preview and take care that images are no longer cropped

* fix> e2e test preview image xpath
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AlexAndBear AlexAndBear AlexAndBear approved these changes

@JammingBen JammingBen Awaiting requested review from JammingBen

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add no-crop thumbnails rendering in images preview
2 participants
@fschade @AlexAndBear