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

fix: saveable share qr code #4191

Merged
merged 13 commits into from
Jul 23, 2024
Merged

fix: saveable share qr code #4191

merged 13 commits into from
Jul 23, 2024

Conversation

Schwehn42
Copy link
Collaborator

Description

Makes the QR code available in the share view saveable as a file. Note this works for FF and Chrome, but not Safari for me, seems to be a limitation on their part so I won't be bothered 🫣
Closes #4170

Changelog

ShareSession

  • change QR code render type from svg to canvas (makes it saveable)
  • increase render size 10-fold (otherwise it's blurry)

Checklist

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • The light- and dark-theme are both supported and tested
  • The design was implemented and is responsive for all devices and screen sizes
  • The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

@Schwehn42 Schwehn42 self-assigned this Jun 3, 2024
@Schwehn42 Schwehn42 added the Review Needed This pull request is ready for review label Jun 3, 2024
@brandstetterm
Copy link
Collaborator

The QR code doesn't look that nice in dark mode anymore :/

Before:
image
After:
image

@brandstetterm brandstetterm removed the Review Needed This pull request is ready for review label Jun 15, 2024
@Schwehn42
Copy link
Collaborator Author

Schwehn42 commented Jun 17, 2024 •
edited
Loading

@brandstetterm seems like qrcode.react doesn't support setting colors directly using CSS. The workaround used until this point was changing the fill of the svg, however, this isn't possible anymore since we're using a canvas now. Different libraries like https://github.com/rosskhanas/react-qr-code have the same issue. There are two ways to go on about this:

  1. set fgColor and bgColor of element manually using the retreived attribute theme (JSX)
  2. invert color of whole class using the filter function if [theme='dark'] (CSS)

I opted for using 1.,but am open for the other option as well.

EDIT (2024-07-17):

Using the new theme state hook introduced in #4310, the current theme is now detected and applied to the QR Code.

@Schwehn42 Schwehn42 added the Review Needed This pull request is ready for review label Jun 17, 2024
@octomind-dev OctoMind-dev

This comment has been minimized.

Sign in to view
@octomind-dev OctoMind-dev
Copy link

octomind-dev bot commented Jul 17, 2024 •
edited
Loading

🐙 Octomind

Test Report: 14/14 successful.

description status details
About Section Visibility Test Passed ✅ click
change avatar Passed ✅ click
check Privacy Policy Passed ✅ click
check terms & conditions Passed ✅ click
close cookie banner - front page Passed ✅ click
close cookie banner - sign-in Passed ✅ click
create and delete board columns Passed ✅ click
create_and_delete_notes_and_actions_v2 Passed ✅ click
create lean coffee board Passed ✅ click
edit_notes_and_actions_v5 Passed ✅ click
get started Passed ✅ click
share_session Passed ✅ click
sign-in Passed ✅ click
test all ways to open the setup flow Passed ✅ click

commit sha: c692f8b

mateo-ivc
mateo-ivc approved these changes Jul 23, 2024
View reviewed changes
Copy link
Collaborator

@mateo-ivc mateo-ivc left a comment

Choose a reason for hiding this comment

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

lgtm :shipit:

@Schwehn42 Schwehn42 added this pull request to the merge queue Jul 23, 2024
@Schwehn42 Schwehn42 removed the Review Needed This pull request is ready for review label Jul 23, 2024
@github-actions GitHub Actions
Copy link

The deployment to the dev cluster was successful. You can find the deployment here: https://4191.development.scrumlr.fra.ics.inovex.io
This deployment is only for testing purposes and will be deleted after 1 week.
To redeploy rerun the workflow.
DO NOT STORE IMPORTANT DATA ON THIS DEPLOYMENT

Deployed Images

  • ghcr.io/inovex/scrumlr.io/scrumlr-frontend:sha-d16cabf

  • ghcr.io/inovex/scrumlr.io/scrumlr-server:sha-d16cabf

Merged via the queue into main with commit ef36751 Jul 23, 2024
11 of 12 checks passed
@Schwehn42 Schwehn42 deleted the js/saveable-share-qr-code branch July 23, 2024 14:02
liza-kl pushed a commit that referenced this pull request Jul 25, 2024
@Schwehn42 @brandstetterm @liza-kl
fix: saveable share qr code (#4191)
ae03b1e 
Co-authored-by: Manuel Brandstetter <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mateo-ivc mateo-ivc mateo-ivc approved these changes

Assignees

@Schwehn42 Schwehn42

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Make QR code exportable as image
3 participants
@Schwehn42 @brandstetterm @mateo-ivc