diff --git a/src/popup/pwgen.css b/src/popup/pwgen.css index 755fb06..69eb96f 100644 --- a/src/popup/pwgen.css +++ b/src/popup/pwgen.css @@ -21,6 +21,18 @@ input[type="number"] { font-size: inherit; padding: 5px 10px; } + input[type="checkbox"] { margin-bottom: -7px; } + +#copied { + /*height: 100%;*/ + width: 100%; + background-color: #FFF8DC; + position: absolute; + margin: -25px; + margin-top: -5px; + padding: 5px; + text-align: center; +} diff --git a/src/popup/pwgen.html b/src/popup/pwgen.html index d021fb2..87f82fd 100644 --- a/src/popup/pwgen.html +++ b/src/popup/pwgen.html @@ -10,6 +10,8 @@ + +
diff --git a/src/popup/pwgen.js b/src/popup/pwgen.js index 4117be9..b76874c 100644 --- a/src/popup/pwgen.js +++ b/src/popup/pwgen.js @@ -34,14 +34,29 @@ function saveOptions(options) { return browser.storage.local.set(options); } -function copypasstoclippboard() { +function copypasstoclippboard(cb) { setTimeout(function() { var copyText = document.getElementById('pw'); copyText.select(); document.execCommand('copy'); + if (typeof(cb) === 'function') { + cb(); + } }, 200); } +function fade(element) { + var op = 1; // initial opacity + var timer = setInterval(function () { + if (op <= 0.1) { + clearInterval(timer); + element.style.display = 'none'; + } + element.style.opacity = op; + op -= op * 0.1; + }, 50); +} + document.addEventListener('DOMContentLoaded', function() { document.getElementById('new').addEventListener('click', (ev) => { @@ -69,9 +84,12 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('pw').value = randPassword(getParams().length, getParams().special); if (options.directcopy) { - copypasstoclippboard(); + copypasstoclippboard(() => { + let copied = document.getElementById('copied'); + copied.style.display = 'block'; + fade(copied) + }); } }); }); -