Invitations redesign

themes/default/public/css/custom.css

@@ -207,3 +207,15 @@ tr.deleted {
     background: repeating-linear-gradient(-45deg, transparent 0 2rem, var(--bulma-danger-05) 2rem 4rem);
   }
 }
+
+.modal-card-title {
+  width: 100%
+}
+
+.modal-card-title p {
+  width: 95%
+}
+
+.files-list {
+  list-style: disc;
+}

themes/default/public/js/list-invitations.js

@@ -1,5 +1,5 @@
 import { filesize } from "~/lib/filesize.esm.min.js";
-import { addToast, hideNode, showNode } from "~/lib/utils.js";
+import { addToast, formatDate, hideNode, showNode } from "~/lib/utils.js";
 
 const updateButtonsStatus = () => {
   const targetSelectionDOM = document.querySelectorAll(".target-selection");
@@ -159,7 +159,9 @@ const toggleVisibility = () => {
           if (t.show) {
             itemDOM.setAttribute("data-visibility", "shown");
             showNode(itemDOM);
-            itemDOM.querySelector(".selection .icon").classList.add("is-hidden");
+            itemDOM
+              .querySelector(".selection .icon")
+              .classList.add("is-hidden");
           } else {
             itemDOM.setAttribute("data-visibility", "hidden");
 
@@ -170,7 +172,9 @@ const toggleVisibility = () => {
               hideNode(itemDOM);
             }
 
-            itemDOM.querySelector(".selection .icon").classList.remove("is-hidden")
+            itemDOM
+              .querySelector(".selection .icon")
+              .classList.remove("is-hidden");
           }
 
           itemDOM.querySelector(".selection input").click();
@@ -194,18 +198,20 @@ const getTokensBody = () => {
   return tokens;
 };
 
-const fillModal = (event) => {
-  const buttonDOM = event.target;
-  const modalDOM = document.querySelector(".modal.files-info");
+const fillModal = (buttonDOM) => {
+  const modalDOM = document.getElementById("modal-files-list");
 
   // Cleanup the modal
   modalDOM.querySelector(".files-list").replaceChildren();
 
-  modalDOM.querySelector("h1").innerText = i18n.listFiles
+  modalDOM.querySelector("header .modal-card-title p").innerText =
+    i18n.listFiles
       .replace("XX1", buttonDOM.dataset.token)
       .replace("XX2", buttonDOM.dataset.guest);
 
-  const files = JSON.parse(buttonDOM.dataset.files) || [];
+  const files = buttonDOM.dataset.files
+    ? JSON.parse(buttonDOM.dataset.files)
+    : [];
   const itemList = new DocumentFragment();
 
   files.forEach((file) => {
@@ -213,15 +219,15 @@ const fillModal = (event) => {
       "XXX",
       formatDate(file.delay * 86400 + file.created_at)
     );
-    const item = modalDOM
-      .querySelector("template#item")
-      .content.cloneNode(true);
+    const item = document.querySelector("template#item").content.cloneNode(true)
+      .children[0];
 
+    console.debug(file.name);
     item.querySelector(".file-link").href = file.url;
-    item.querySelector(".file-link").value = file.name;
-    item.querySelector(".file-size").innerText = `${filesize(
+    item.querySelector(".file-link").innerText = file.name;
+    item.querySelector(".file-size").innerText = `(${filesize(
       file.size
-    )}, ${expires}`;
+    )}, ${expires})`;
 
     itemList.appendChild(item);
   });
@@ -230,18 +236,13 @@ const fillModal = (event) => {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll(".modal-button.action-files-info").forEach(
-    (button) =>
-    (button.onclick = (event) => {
-      fillModal(event);
-
-      document.querySelector(".modal.files-info").showModal();
-    })
-  );
-
-  document.querySelector(".close-modal").onclick = () => {
-    document.querySelector(".modal").close();
-  };
+  document
+    .querySelectorAll(".js-modal-trigger.action-files-info")
+    .forEach((node) => {
+      node.addEventListener("click", () => {
+        fillModal(node);
+      });
+    });
 
   document
     .querySelectorAll(".selection input")

themes/default/templates/invitations/my_invitations.html.ep

@@ -7,7 +7,7 @@
   <div class="message is-info">
     <div class="message-body">
       <p>
-        <%= l('Rows in purple mean that the invitations have expired.') %>
+        <%= l('Hatched lines mean that the invitations have expired.') %>
       </p>
     </div>
   </div>
@@ -60,11 +60,12 @@
           <td class="actions is-vcentered">
           % if ($e->files) {
             <a
-              class="button modal-button action-files-info"
+              class="js-modal-trigger button action-files-info is-primary"
               href="#files-info"
-              data-files='<%= $e->files %>'
+              data-files="<%= $e->files %>"
               data-token="<%= $e->token %>"
               data-guest="<%= $e->guest_mail %>"
+              data-target="modal-files-list"
             >
               <%= l('Files') %>
             </a>
@@ -75,33 +76,16 @@
       </tbody>
     </table>
   </div>
-
-  <dialog class="modal files-info">
-    <section>
-      <header>
-        <h1><%= l('Files sent in invitation XX1 by XX2') %></h1>
-      </header>
-
-      <div class="content">
-        <ul class="files-list"></ul>
-      </div>
-      
-      <footer class="actions">
-        <button autofocus class="button close-modal"><%= l('Close') %></button>
-      </footer>
-    </section>
-  </dialog>
 </div>
 
-
-<div id="modal-language-selector" class="modal files-info">
+<div id="modal-files-list" class="modal files-info">
   <div class="modal-background"></div>
   <div class="modal-card">
     <header class="modal-card-head is-shadowless">
-      <p class="modal-card-title">
-        <%= l('Files sent in invitation XX1 by XX2') %>
+      <div class="modal-card-title">
+        <p class="is-inline-block wb-word"><%= l('Files sent in invitation XX1 by XX2') %></p>
         <button class="delete is-pulled-right" aria-label="close"></button>
-      </p>
+      </div>
     </header>
 
     <section class="modal-card-body">