Skip to content

Add qr code size warning #353

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

Open
lvchamao wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add qr code size warning #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4d6040
Add QR Code Size Warning
lvchamao Apr 17, 2025
37994a5
Changed QR Size Warning text
lvchamao Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/_locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,10 @@
"message": "Use contrasting color",
"description": "The text of a button that sets a new color with a sufficient contrast."
},
"qrCodeSizeTooLargeWarning": {
"message": "The selected QR code size exceeds the available display space. The displayed QR code has been resized to fit. ",
"description": "The message shown when the requested QR code size is too large to display and has been automatically scaled down to fit."
},

// tips
"tipYouLikeAddon": {
Expand Down
32 changes: 30 additions & 2 deletions src/popup/modules/UserInterface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@ import {createMenu} from "/common/modules/ContextMenu.js";

const TOP_SCROLL_TIMEOUT = 20; // ms
const QR_CODE_REFRESH_TIMEOUT = 200; // ms
const QR_CODE_CONTAINER_MARGIN = 40; // px
export const QR_CODE_CONTAINER_MARGIN = 40; // px
const QR_CODE_SIZE_SNAP = 5; // px
const QR_CODE_SIZE_DECREASE_SNAP = 2; // px
const WINDOW_MINIMUM_HEIGHT = 250; // px
const THROTTLE_SIZE_SAVING_FOR_REMEMBER = 500; // ms
export const MAX_WINDOW_HEIGHT = 600;

const CONTEXT_MENU_SAVE_IMAGE_CANVAS = "save-image-canvas";
const CONTEXT_MENU_SAVE_IMAGE_SVG = "save-image-svg";
Expand All @@ -47,6 +48,8 @@ const qrCodeText = document.getElementById("qrcodetext");
let resizeMutationObserver;

let placeholderShown = true;
let sizeWarningShown = false;
let firstResize = true; // check if initial resize is needed

// default/last size
let qrLastSize = 200;
Expand Down Expand Up @@ -267,7 +270,29 @@ function saveQrCodeTextSize() {
* @returns {void}
*/
function resizeElements() {
const newQrCodeSize = Math.min(qrCodeContainer.offsetHeight, qrCodeContainer.offsetWidth) - QR_CODE_CONTAINER_MARGIN;

// if a size warning is shown upon resize, hide it
if (sizeWarningShown) {
CommonMessages.hideWarning();
}

let newQrCodeSize = Math.min(qrCodeContainer.offsetHeight, qrCodeContainer.offsetWidth) - QR_CODE_CONTAINER_MARGIN;

// the warning is shown only on desktop
if (!navigator.userAgent.includes("Mobile")) {
// if initial resize is needed, compute maximum allowed qr code size
if (firstResize) {
firstResize = false;
newQrCodeSize = Math.min(qrLastSize, MAX_WINDOW_HEIGHT - qrCodeText.offsetHeight - QR_CODE_CONTAINER_MARGIN);

// if the fixed qr code size is larger than the maximum allowed qr code size, add warning
if (newQrCodeSize < qrLastSize) {
sizeWarningShown = true;
CommonMessages.showWarning("qrCodeSizeTooLargeWarning", true);
}
}
}

const qrSizeDiff = newQrCodeSize - qrLastSize;

// rezizing at small window heights (e.g. when popup is being constructed)
Expand Down Expand Up @@ -641,6 +666,9 @@ export function init() {
console.error("too small size", window.innerHeight, "should be at least: ", minimalSize);
}
}

// initial resize to fit centering issue of QR code
resizeElements();
});

const initQrTypespecificSettings = createContextMenu();
Expand Down
4 changes: 4 additions & 0 deletions src/popup/qrcode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
<span class="message-text" data-i18n="__MSG_couldNotGenerateQrCode__">Could not generate QR code.</span>
<img class="icon-dismiss invisible" src="/common/img/close-white.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
</div>
<div id="messageWarning" aria-label="warning message" data-i18n data-i18n-aria-label="__MSG_ariaMessageWarning__" class="message-box warning float-qr float-qr-bottom invisible fade-hide">
<span class="message-text"></span>
<img class="icon-dismiss invisible" src="/common/img/close-white.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
</div>
<div id="messageLoading" aria-label="loading message" data-i18n data-i18n-aria-label="__MSG_ariaMessageLoading__" class="message-box info float-qr float-qr-bottom">
<span class="message-text" data-i18n="__MSG_loading__">Loading…</span>
</div>
Expand Down