added qr code to copyDialog
Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
parent
24aa1f2e17
commit
7cdef4bbfc
|
@ -4,4 +4,5 @@ firefox
|
||||||
coverage
|
coverage
|
||||||
android/app/build
|
android/app/build
|
||||||
app/locale.js
|
app/locale.js
|
||||||
app/capabilities.js
|
app/capabilities.js
|
||||||
|
app/qrcode.js
|
|
@ -119,4 +119,6 @@ The android implementation is contained in the `android` directory, and can be v
|
||||||
|
|
||||||
[Mozilla Public License Version 2.0](LICENSE)
|
[Mozilla Public License Version 2.0](LICENSE)
|
||||||
|
|
||||||
|
[qrcode.js](https://github.com/kazuhikoarase/qrcode-generator) licensed under MIT
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,5 +1,6 @@
|
||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
const { copyToClipboard } = require('../utils');
|
const { copyToClipboard } = require('../utils');
|
||||||
|
const qr = require('./qr');
|
||||||
|
|
||||||
module.exports = function(name, url) {
|
module.exports = function(name, url) {
|
||||||
const dialog = function(state, emit, close) {
|
const dialog = function(state, emit, close) {
|
||||||
|
@ -16,13 +17,23 @@ module.exports = function(name, url) {
|
||||||
${state.translate('copyLinkDescription')} <br />
|
${state.translate('copyLinkDescription')} <br />
|
||||||
${name}
|
${name}
|
||||||
</p>
|
</p>
|
||||||
<input
|
<div class="flex flex-row items-center justify-center w-full">
|
||||||
type="text"
|
<input
|
||||||
id="share-url"
|
type="text"
|
||||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
id="share-url"
|
||||||
value="${url}"
|
class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
||||||
readonly="true"
|
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
|
<button
|
||||||
class="btn rounded-lg w-full flex-shrink-0 focus:outline"
|
class="btn rounded-lg w-full flex-shrink-0 focus:outline"
|
||||||
onclick="${copy}"
|
onclick="${copy}"
|
||||||
|
@ -40,6 +51,19 @@ module.exports = function(name, url) {
|
||||||
</send-copy-dialog>
|
</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) {
|
function copy(event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
copyToClipboard(url);
|
copyToClipboard(url);
|
||||||
|
|
|
@ -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);
|
||||||
|
};
|
Loading…
Reference in New Issue