BTCPrivate
/
lightningtip
mirror of https://github.com/BTCPrivate/lightningtip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

reworked displaying of invoice

This commit is contained in:
michael1011 2018-03-30 19:30:09 +02:00
parent 8c2f331303
commit 6c69629eed
No known key found for this signature in database
GPG Key ID: 84D249BA71685D46
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/lightningTip.css
View File

@ -1,3 +1,4 @@
/* TODO: add light theme */
.lightningTipInput {
width: 100%;
@ -95,15 +96,15 @@
}
#lightningTipInvoice {
margin-top: 0.6em;
margin-bottom: 1em;
margin-top: 1em;
margin-bottom: 0.5em;
}
#lightningTipTools {
height: 100px;
}
#lightningTipGetQR {
#lightningTipCopy {
border-right: 1px solid #F5F5F5;
border-top-right-radius: 0;

28
frontend/lightningTip.js
View File

@ -10,6 +10,7 @@ var qrCode;
var defaultGetInvoice;
// TODO: solve this without JavaScript
// Fixes weird bug which moved the button up one pixel when its content was changed
window.onload = function () {
var button = document.getElementById("lightningTipGetInvoice");
@ -19,7 +20,7 @@ window.onload = function () {
};
// TODO: fix scaling on phones
// TODO: maybe don't show full invoice
// TODO: optimize creating bigger QR codes
// TODO: show price in dollar?
function getInvoice() {
if (running === false) {
@ -50,26 +51,29 @@ function getInvoice() {
listenInvoiceSettled(hash);
// Update UI
invoice = json.Invoice;
// Update UI
var wrapper = document.getElementById("lightningTip");
wrapper.innerHTML = "<a>Your tip request</a>";
wrapper.innerHTML += "<textarea class='lightningTipInput' id='lightningTipInvoice' onclick='copyToClipboard(this)' readonly>" + json.Invoice + "</textarea>";
wrapper.innerHTML += "<input type='text' class='lightningTipInput' id='lightningTipInvoice' onclick='copyInvoiceToClipboard()' value='" + invoice + "' readonly>";
wrapper.innerHTML += "<div id='lightningTipQR'></div>";
resizeInput(document.getElementById("lightningTipInvoice"));
showQRCode();
wrapper.innerHTML += "<div id='lightningTipTools'>" +
"<button class='lightningTipButton' id='lightningTipGetQR' onclick='showQRCode()'>QR</button>" +
"<button class='lightningTipButton' id='lightningTipCopy' onclick='copyInvoiceToClipboard()'>Copy</button>" +
"<button class='lightningTipButton' id='lightningTipOpen'>Open</button>" +
"<a id='lightningTipExpiry'></a>" +
"</div>";
starTimer(json.Expiry, document.getElementById("lightningTipExpiry"));
document.getElementById("lightningTipTools").style.height = document.getElementById("lightningTipGetQR").clientHeight + "px";
// Fixes bug which caused the content of #lightningTipTools to be visually outside of #lightningTip
document.getElementById("lightningTipTools").style.height = document.getElementById("lightningTipCopy").clientHeight + "px";
document.getElementById("lightningTipOpen").onclick = function () {
location.href = "lightning:" + json.Invoice;
@ -130,7 +134,7 @@ function listenInvoiceSettled(hash) {
};
} catch (e) {
console.info(e);
console.error(e);
console.warn("Your browser does not support EventSource. Sending a request to the server every two second to check if the invoice is settled");
var interval = setInterval(function () {
@ -227,7 +231,7 @@ function showQRCode() {
createQRCode(10);
}
element.style.marginBottom = "1em";
element.style.marginBottom = "0.8em";
element.innerHTML = qrCode;
var size = document.getElementById("lightningTipInvoice").clientWidth + "px";
@ -267,7 +271,9 @@ function createQRCode(typeNumber) {
}
function copyToClipboard(element) {
function copyInvoiceToClipboard() {
var element = document.getElementById("lightningTipInvoice");
element.select();
document.execCommand('copy');
@ -296,5 +302,9 @@ function showErrorMessage(message) {
function resizeInput(element) {
element.style.height = "auto";
element.style.height = (element.scrollHeight) + "px";
// Change the size only if
if (element.clientHeight !== element.scrollHeight) {
element.style.height = (element.scrollHeight) + "px";
}
}