Skip to content

Keyboard zoom #293

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
eridilla wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Keyboard zoom #293

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b75360e
resizing progress
eridilla Dec 7, 2022
0db6462
.
eridilla Dec 7, 2022
220d6f3
zoom works
Dec 18, 2022
3f740e4
pull request changes
Dec 20, 2022
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 @@ -158,6 +158,10 @@
"message": "How to use?",
"description": "The common button for tips, where you can get more information about how to use a feature just presented."
},
"zoomQrCodeHotkey": {
"message": "Use Alt and +/- to zoom the QR code!",
"description": "Tooltip for the unconventional zoom key combination."
},

// placeholder
"qrCodePlaceholder": {
Expand Down
12 changes: 12 additions & 0 deletions src/common/modules/data/Tips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,18 @@ const tipArray = [
action: "tipSaveQrCodeLink"
}
},
{
id: "zoomQrHotkey",
requiredShowCount: 5,
requireDismiss: 1,
maximumDismiss: 2,
requiredTriggers: 5,
showInContext: {
"popup": 1
},
randomizeDisplay: false,
text: "tipZoomQrCodeHotkey"
},
// {
// id: "donate",
// requiredShowCount: 4,
Expand Down
15 changes: 4 additions & 11 deletions src/popup/modules/UserInterface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,26 +712,19 @@ export function init() {
]);
}

// zoom listener
document.onkeydown = zoomQrCode;

/**
* Listens to Alt + plus/minus keypresses to alter
* QR code size.
*
* @function
* @returns {void}
*/
function zoomQrCode(e) {
var evtobj = window.event ? event : e;
if (evtobj.keyCode == 61 && evtobj.altKey && qrLastSize < 440) {
document.addEventListener('keydown', function(event) {
Copy link
Owner

@rugk rugk Dec 30, 2022

Choose a reason for hiding this comment

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

naaaw, I would still keep the function zoomQrCode or so you had… You can just reference that here AFAIK.

if ((event.key == '=' || event.key == '+') && event.altKey && qrLastSize < 440) {
setNewQrCodeSize(qrLastSize + 30, true);
Copy link
Owner

@rugk rugk Dec 18, 2022

Choose a reason for hiding this comment

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

Note setNewQrCodeSize may – depending on

offline-qr-code/src/popup/modules/UserInterface.js

Line 242 in 220d6f3

if (qrCodeSizeOption.sizeType === "remember") {
save the size to add-on storage's, too. THough thinking about it, that makes sense, because it is then just persisted.

So yeah, I dunno whether my idea of remembering it additionally, was a good idea, but it seems okay'ish.


localStorage.setItem("lastSize", qrLastSize);
}
if (evtobj.keyCode == 173 && evtobj.altKey && qrLastSize > 50) {
if (event.key == '-' && event.altKey && qrLastSize > 50) {
setNewQrCodeSize(qrLastSize - 30, true);
Copy link
Owner

@rugk rugk Dec 30, 2022

Choose a reason for hiding this comment

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

Ah and could you extract the 30 into a const KEYBOARD_ZOOM_SIZE = 30 constant or so? Magic numbers are not a good practise in source code that should be readable… 🙃

Copy link
Owner

@rugk rugk Dec 30, 2022

Choose a reason for hiding this comment

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

Same for 50 which I assume is something as MINIMAL_ZOOM_SIZE or so?

Just place the constants at the top, there should be some, already. 😉


localStorage.setItem("lastSize", qrLastSize);
}
}
});
4 changes: 0 additions & 4 deletions src/popup/qrcode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,3 @@ html, body {
color: var(--white-100);
}
}

#zoomTooltip {
font-weight: 700;
}
3 changes: 0 additions & 3 deletions src/popup/qrcode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@
<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
</div>
</div>
<div>
<p id="zoomTooltip">Alt +/- to zoom</p>
</div>
<div id="qrcode-container" class="center-container">
<div id="qrcode-resize-container">
<div id="qrcode" class="qrcode invisible">
Expand Down