Copy amount to clipboard on click

This commit is contained in:
RunasSudo 2020-04-16 03:20:53 +10:00
parent 6df8b58a89
commit 50c2522654
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
5 changed files with 102 additions and 8 deletions

View File

@ -286,20 +286,20 @@ def filter_amount(amt, link=None):
return flask.Markup('<a href="{}"><span title="{}">({})</span></a>'.format(link, amt.tostr(False), amt_str)) return flask.Markup('<a href="{}"><span title="{}">({})</span></a>'.format(link, amt.tostr(False), amt_str))
else: else:
if is_pos: if is_pos:
return flask.Markup('<span title="{}">{}</span>&nbsp;'.format(amt.tostr(False), amt_str)) return flask.Markup('<span class="copyable-amount" title="{}">{}</span>&nbsp;'.format(amt.tostr(False), amt_str))
else: else:
return flask.Markup('<span title="{}">({})</span>'.format(amt.tostr(False), amt_str)) return flask.Markup('<span class="copyable-amount" title="{}">({})</span>'.format(amt.tostr(False), amt_str))
@app.template_filter('b') @app.template_filter('b')
def filter_amount_positive(amt): def filter_amount_positive(amt):
return flask.Markup('<span title="{}">{:,.2f}</span>'.format(amt.tostr(False), amt.amount).replace(',', '&#8239;')) return flask.Markup('<span class="copyable-amount" title="{}">{:,.2f}</span>'.format(amt.tostr(False), amt.amount).replace(',', '&#8239;'))
@app.template_filter('bc') @app.template_filter('bc')
def filter_commodity_positive(amt): def filter_commodity_positive(amt):
if amt.commodity.is_prefix: if amt.commodity.is_prefix:
return flask.Markup('<span title="{}">{}{:,.2f}</span>'.format(amt.tostr(False), amt.commodity.name, amt.amount).replace(',', '&#8239;')) return flask.Markup('<span class="copyable-amount" title="{}">{}{:,.2f}</span>'.format(amt.tostr(False), amt.commodity.name, amt.amount).replace(',', '&#8239;'))
else: else:
return flask.Markup('<span title="{}">{:,.2f} {}</span>'.format(amt.tostr(False), amt.amount, amt.commodity.name).replace(',', '&#8239;')) return flask.Markup('<span class="copyable-amount" title="{}">{:,.2f} {}</span>'.format(amt.tostr(False), amt.amount, amt.commodity.name).replace(',', '&#8239;'))
@app.template_filter('bt') @app.template_filter('bt')
def filter_commodity_table_positive(amt, show_price, link=None): def filter_commodity_table_positive(amt, show_price, link=None):
@ -313,12 +313,12 @@ def filter_commodity_table_positive(amt, show_price, link=None):
amt_full = amt.tostr(False) amt_full = amt.tostr(False)
result.append('<td style="text-align: right;"><a href="{}"><span title="{}">{}</span></a></td>'.format(link, amt_full, amt_str) if link else '<td style="text-align: right;"><span title="{}">{}</span></td>'.format(amt_full, amt_str)) result.append('<td style="text-align: right;"><a href="{}"><span class="copyable-amount" title="{}">{}</span></a></td>'.format(link, amt_full, amt_str) if link else '<td style="text-align: right;"><span class="copyable-amount" title="{}">{}</span></td>'.format(amt_full, amt_str))
result.append('<td><span title="{}">{}</span></td>'.format(amt_full, cur_str)) result.append('<td><span class="copyable-amount" title="{}">{}</span></td>'.format(amt_full, cur_str))
if show_price: if show_price:
if amt.commodity.price: if amt.commodity.price:
result.append('<td><span title="{}">{{{}}}</span></td>'.format(amt_full, filter_commodity_positive(amt.commodity.price))) result.append('<td>{{{}}}</td>'.format(filter_commodity_positive(amt.commodity.price)))
else: else:
result.append('<td></td>') result.append('<td></td>')

View File

@ -26,5 +26,9 @@
</head> </head>
<body> <body>
{% block body %}{% endblock %} {% block body %}{% endblock %}
<script src="/static/toasts.js"></script>
<script src="/static/copyAmounts.js"></script>
<div class="toast"></div>
</body> </body>
</html> </html>

View File

@ -0,0 +1,35 @@
/*
ledger-pyreport
Copyright © 2020 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// Consider replacing this when the Clipboard API has better availability
function copyText(text) {
var ta = document.createElement('textarea');
ta.value = text;
ta.style = 'position: fixed; top: 0; left: 0;'; // Avoid scrolling
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
document.querySelectorAll('.copyable-amount').forEach(function(el) {
el.addEventListener('click', function() {
copyText(el.getAttribute('title'));
showToast('Amount was copied to the clipboard');
});
});

View File

@ -20,6 +20,8 @@ body {
font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Times New Roman', 'Liberation Serif', Times, serif; font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Times New Roman', 'Liberation Serif', Times, serif;
} }
/* Tables */
h1 { h1 {
text-align: center; text-align: center;
font-size: x-large; font-size: x-large;
@ -73,6 +75,8 @@ table.ledger a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Navigation bar */
.nav-header { .nav-header {
color: #888; color: #888;
position: absolute; position: absolute;
@ -86,6 +90,8 @@ table.ledger a:hover {
color: #666; color: #666;
} }
/* Home page */
.index-group { .index-group {
margin-bottom: 1em; margin-bottom: 1em;
line-height: 2; line-height: 2;
@ -95,6 +101,26 @@ label {
white-space: nowrap; white-space: nowrap;
} }
/* Toasts */
.toast {
opacity: 0%;
transition: opacity 0.2s;
position: fixed;
bottom: 2em;
left: 50%;
transform: translateX(-50%);
background-color: #eee;
padding: 0.5em 1.5em;
border: 1px solid #666;
}
.toast.visible {
opacity: 100%;
transition: opacity 0s;
}
@media screen { @media screen {
body { body {
padding: 2em; padding: 2em;

View File

@ -0,0 +1,29 @@
/*
ledger-pyreport
Copyright © 2020 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
var toastInterval;
function showToast(toastText) {
document.querySelector('.toast').innerText = toastText;
document.querySelector('.toast').classList.add('visible');
clearInterval(toastInterval);
toastInterval = setInterval(function() {
document.querySelector('.toast').classList.remove('visible');
}, 1000);
}