added qr code to copyDialog

Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
Danny Coates 2020-07-27 14:49:10 -07:00 committed by timvisee
parent 24aa1f2e17
commit 7cdef4bbfc
No known key found for this signature in database
GPG Key ID: B8DB720BC383E172
5 changed files with 1121 additions and 8 deletions

View File

@ -4,4 +4,5 @@ firefox
coverage
android/app/build
app/locale.js
app/capabilities.js
app/capabilities.js
app/qrcode.js

View File

@ -119,4 +119,6 @@ The android implementation is contained in the `android` directory, and can be v
[Mozilla Public License Version 2.0](LICENSE)
[qrcode.js](https://github.com/kazuhikoarase/qrcode-generator) licensed under MIT
---

1076
app/qrcode.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,6 @@
const html = require('choo/html');
const { copyToClipboard } = require('../utils');
const qr = require('./qr');
module.exports = function(name, url) {
const dialog = function(state, emit, close) {
@ -16,13 +17,23 @@ module.exports = function(name, url) {
${state.translate('copyLinkDescription')} <br />
${name}
</p>
<input
type="text"
id="share-url"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}"
readonly="true"
/>
<div class="flex flex-row items-center justify-center w-full">
<input
type="text"
id="share-url"
class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}"
readonly="true"
/>
<button
id="qr-btn"
class="w-16 m-1 p-1"
onclick="${toggleQR}"
title="QR code"
>
${qr(url)}
</button>
</div>
<button
class="btn rounded-lg w-full flex-shrink-0 focus:outline"
onclick="${copy}"
@ -40,6 +51,19 @@ module.exports = function(name, url) {
</send-copy-dialog>
`;
function toggleQR(event) {
event.stopPropagation();
const shareUrl = document.getElementById('share-url');
const qrBtn = document.getElementById('qr-btn');
if (shareUrl.classList.contains('hidden')) {
shareUrl.classList.replace('hidden', 'block');
qrBtn.classList.replace('w-48', 'w-16');
} else {
shareUrl.classList.replace('block', 'hidden');
qrBtn.classList.replace('w-16', 'w-48');
}
}
function copy(event) {
event.stopPropagation();
copyToClipboard(url);

10
app/ui/qr.js Normal file
View File

@ -0,0 +1,10 @@
const raw = require('choo/html/raw');
const qrcode = require('../qrcode');
module.exports = function(url) {
const gen = qrcode(5, 'L');
gen.addData(url);
gen.make();
const qr = gen.createSvgTag({ scalable: true });
return raw(qr);
};