diff --git a/android-client/web/app.html b/android-client/web/app.html index 6abb619..4aa0152 100644 --- a/android-client/web/app.html +++ b/android-client/web/app.html @@ -172,6 +172,11 @@ .btn.ico-btn svg { width: 22px; height: 22px; } /* Le retour d'appui ne peut plus venir du fond : il vient du trait. */ .btn.ico-btn:active { opacity: .45; } + @keyframes spin { to { transform: rotate(360deg); } } + /* L'ENREGISTREMENT DURE UNE A DEUX SECONDES, et le bouton doit le dire. Le + mot "Saving..." le disait ; une coche immobile ne dirait rien, et c'est + precisement pendant cette attente qu'on appuie une seconde fois. */ + .btn.spin svg { animation: spin .9s linear infinite; } .empty { text-align: center; color: var(--muted); padding: 48px 16px; } @@ -625,6 +630,10 @@ var ICONS = { edit: '', eye: '' + '', + check: '', + close: '', + // Un arc, pas un cercle : c'est l'ouverture qui rend la rotation visible. + loader: '', eyeOff: '' + '' + '' @@ -735,7 +744,7 @@ document.getElementById('fields').addEventListener('click', function (ev) { var iv = document.getElementById('editval'); var hid = iv.type === 'password'; iv.type = hid ? 'text' : 'password'; - t.textContent = hid ? 'Hide' : 'Show'; + t.innerHTML = ico(hid ? 'eyeOff' : 'eye', hid ? 'Hide' : 'Show'); return; } if (t.getAttribute('data-editcancel') !== null) { renderDetail(lastDetail); return; } @@ -749,10 +758,12 @@ document.getElementById('fields').addEventListener('click', function (ev) { toast('An empty password is not saved'); return; } - // DIRE QUE CA TRAVAILLE. L'enregistrement tire, dechiffre, rechiffre et - // publie : plusieurs secondes pendant lesquelles rien ne bougeait, et le - // bouton semblait n'avoir pas pris l'appui. - t.textContent = 'Saving...'; + // DIRE QUE CA TRAVAILLE. L'enregistrement dechiffre, rechiffre et publie : + // une a deux secondes pendant lesquelles rien ne bougeait, et le bouton + // semblait n'avoir pas pris l'appui. La coche cede la place a un arc qui + // tourne - immobile, elle laisserait croire que c'est fini. + t.innerHTML = ico('loader', 'Saving'); + t.classList.add('spin'); t.disabled = true; var cancel = document.querySelector('[data-editcancel]'); if (cancel) cancel.disabled = true; @@ -839,9 +850,16 @@ function openEditor(k) { line.innerHTML = editorControl(k) // Show n'a de sens que sur un champ masque. Sur un site en clair il // n'aurait rien a reveler - et l'inverse : il le CACHERAIT. - + (detailRows[k].s ? '' : '') - + '' - + ''; + // + // LES TROIS EN ICONES, comme les lignes au-dessus : ils partageaient la + // rangee avec le champ de saisie, et trois mots y laissaient a peine de + // quoi lire ce qu'on tape. La croix et la coche se lisent sans traduction. + + (detailRows[k].s ? '' : '') + + '' + + ''; var input = document.getElementById('editval'); input.value = detailRows[k].v; input.focus();