style(android): the inline editor's buttons become icons too

Show, Cancel and Save shared their row with the input field, and three words
left barely enough room to read what one types - the very crowding that made
the row overflow in the first place. A cross and a tick read without
translation.

The tick gives way to a turning arc while saving. The word "Saving..." said
the wait was real; a motionless tick would say nothing, and it is exactly
during that second or two that one presses again.

The form's Save and Delete entry keep their words: they are not inline
controls sharing a row, and the second is the only action with no way back.

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: '<path d="M4 20h4L20 8l-4-4L4 16z"/>',
   eye:  '<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z"/>'
       + '<circle cx="12" cy="12" r="3"/>',
+  check: '<path d="M4 12.5l5.5 5.5L20 7"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
+  // Un arc, pas un cercle : c'est l'ouverture qui rend la rotation visible.
+  loader: '<path d="M12 3a9 9 0 019 9"/>',
   eyeOff: '<path d="M4 4l16 16"/>'
         + '<path d="M9.5 5.4A9.8 9.8 0 0112 5c6.5 0 10 6 10 6a17 17 0 01-3.3 3.7"/>'
         + '<path d="M6.3 7.7A17 17 0 002 11s3.5 6 10 6a9.7 9.7 0 003.4-.6"/>'
@@ -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 ? '<button class="btn" data-editshow>Show</button>' : '')
-    + '<button class="btn" data-editcancel>Cancel</button>'
-    + '<button class="btn main" data-editsave>Save</button>';
+    //
+    // 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 ? '<button class="btn ico-btn" data-editshow>'
+                       + ico('eye', 'Show') + '</button>' : '')
+    + '<button class="btn ico-btn" data-editcancel>'
+    + ico('close', 'Cancel') + '</button>'
+    + '<button class="btn ico-btn main" data-editsave>'
+    + ico('check', 'Save') + '</button>';
   var input = document.getElementById('editval');
   input.value = detailRows[k].v;
   input.focus();