Update interface.html

Use Bangle styling for buttons.
Move main token list UI button to above the tokens.
master
Andrew Gregory 2022-03-27 09:02:15 +08:00 committed by GitHub
parent dd27b11eb8
commit 4c90ea57d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 19 deletions

View File

@ -226,15 +226,15 @@ function editToken(id) {
markup += selectMarkup('algorithm', otpAlgos, tokens[id].algorithm); markup += selectMarkup('algorithm', otpAlgos, tokens[id].algorithm);
markup += '</td></tr>'; markup += '</td></tr>';
markup += '</tbody><tr><td id="advbtn" colspan="2">'; markup += '</tbody><tr><td id="advbtn" colspan="2">';
markup += '<button type="button" onclick="document.getElementById(\'edittoken\').classList.toggle(\'showadv\')">Advanced</button>'; markup += '<button class="btn btn-primary" type="button" onclick="document.getElementById(\'edittoken\').classList.toggle(\'showadv\')">Advanced</button>';
markup += '</td></tr></table></form>'; markup += '</td></tr></table></form>';
markup += '<button type="button" onclick="updateTokens()">Cancel Edit</button>'; markup += '<button class="btn btn-primary" type="button" onclick="updateTokens()">Cancel Edit</button>';
markup += '<button type="button" onclick="saveEdit(' + id + ', false)">Save Changes</button>'; markup += '<button class="btn btn-primary" type="button" onclick="saveEdit(' + id + ', false)">Save Changes</button>';
if (tokens[id].isnew) { if (tokens[id].isnew) {
markup += '<button type="button" onclick="startScan(handleTokenQr,cancelTokenQr)">Scan QR</button>'; markup += '<button class="btn btn-primary" type="button" onclick="startScan(handleTokenQr,cancelTokenQr)">Scan QR</button>';
} else { } else {
markup += '<button type="button" onclick="showTokenQr()">Show QR</button>'; markup += '<button class="btn btn-primary" type="button" onclick="showTokenQr()">Show QR</button>';
markup += '<button type="button" onclick="saveEdit(' + id + ', true)">Forget Token</button>'; markup += '<button class="btn btn-primary" type="button" onclick="saveEdit(' + id + ', true)">Forget Token</button>';
} }
document.getElementById('edit').innerHTML = markup; document.getElementById('edit').innerHTML = markup;
document.body.className = 'editing'; document.body.className = 'editing';
@ -304,9 +304,19 @@ function updateTokens() {
return '<input name="exp_' + id + '" type="checkbox" onclick="exportTokens(false, \'' + id + '\')">'; return '<input name="exp_' + id + '" type="checkbox" onclick="exportTokens(false, \'' + id + '\')">';
}; };
const tokenButton = function(fn, id, label, dir) { const tokenButton = function(fn, id, label, dir) {
return '<button type="button" onclick="' + fn + '(' + id + (dir ? ',' + dir : '') + ')">' + label + '</button>'; return '<button class="btn btn-primary" type="button" onclick="' + fn + '(' + id + (dir ? ',' + dir : '') + ')">' + label + '</button>';
}; };
var markup = '<table><tr><th>'; var markup = '';
markup += '<div class="select">';
markup += '<button class="btn btn-primary" type="button" onclick="addToken()">Add Token</button>';
markup += '<button class="btn btn-primary" type="button" onclick="saveTokens()">Save to watch</button>';
markup += '<button class="btn btn-primary" type="button" onclick="startScan(handleImportQr,cancelImportQr)">Import</button>';
markup += '<button class="btn btn-primary" type="button" onclick="document.body.className=\'export\'">Export</button>';
markup += '</div><div class="export">';
markup += '<button class="btn btn-primary" type="button" onclick="document.body.className=\'select\'">Cancel</button>';
markup += '<button class="btn btn-primary" type="button" onclick="exportTokens(true, null)">Show QR</button>';
markup += '</div>';
markup += '<table><tr><th>';
markup += tokenSelect('all'); markup += tokenSelect('all');
markup += '</th><th>Token</th><th colspan="2">Order</th></tr>'; markup += '</th><th>Token</th><th colspan="2">Order</th></tr>';
/* any tokens marked new are cancelled new additions and must be removed */ /* any tokens marked new are cancelled new additions and must be removed */
@ -331,15 +341,6 @@ function updateTokens() {
markup += '</td></tr>'; markup += '</td></tr>';
} }
markup += '</table>'; markup += '</table>';
markup += '<div class="select">';
markup += '<button type="button" onclick="addToken()">Add Token</button>';
markup += '<button type="button" onclick="saveTokens()">Save to watch</button>';
markup += '<button type="button" onclick="startScan(handleImportQr,cancelImportQr)">Import</button>';
markup += '<button type="button" onclick="document.body.className=\'export\'">Export</button>';
markup += '</div><div class="export">';
markup += '<button type="button" onclick="document.body.className=\'select\'">Cancel</button>';
markup += '<button type="button" onclick="exportTokens(true, null)">Show QR</button>';
markup += '</div>';
document.getElementById('tokens').innerHTML = markup; document.getElementById('tokens').innerHTML = markup;
document.body.className = 'select'; document.body.className = 'select';
} }
@ -604,7 +605,7 @@ function qrBack() {
<div id="scan"> <div id="scan">
<table> <table>
<tr><td><canvas id="qr-canvas"></canvas></td></tr> <tr><td><canvas id="qr-canvas"></canvas></td></tr>
<tr><td><button type="button" onclick="scanBack()">Cancel</button></td></tr> <tr><td><button class="btn btn-primary" type="button" onclick="scanBack()">Cancel</button></td></tr>
</table> </table>
</div> </div>
@ -613,7 +614,7 @@ function qrBack() {
<div id="showqr"> <div id="showqr">
<table><tr><td id="qrcode"></td></tr><tr><td> <table><tr><td id="qrcode"></td></tr><tr><td>
<button type="button" onclick="qrBack()">Back</button> <button class="btn btn-primary" type="button" onclick="qrBack()">Back</button>
</td></tr></table> </td></tr></table>
</div> </div>