Merge branch '69-return-button-in-round-management' into 'master'

Feat : Animation for round management

Closes #69

See merge request !88

web/components/management/round.js

@@ -22,7 +22,7 @@ class Round {
             Liste des tours
           </div>
         </div>
-        <div class="column" style="padding-right:40px;">
+        <div id="rounds-panel" class="column" style="padding-right:40px;">
           <div id="round-desks" class="card-no-hover card-list">
             Liste des bureaux d'un tour
           </div>

web/components/management/rounds-card.js

@@ -5,6 +5,7 @@ import * as ElectionModel from "/services/model/election-model.js";
 import * as RoundModel from "/services/model/round-model.js";
 import * as Messages from "/services/messages/messages.js";
 import { Delete } from "/services/common/delete.js";
+import { AnimateCSS } from "/services/common/common.js";
 
 // DOM elements
 
@@ -353,23 +354,34 @@ class Round {
   }
 
   hideRounds() {
+    let roundList = document.getElementById("rounds-list");
+    let roundPanel = document.getElementById("rounds-panel");
+
     let roundsHandler = this;
-    document.getElementById("rounds-list").innerHTML =
-      '<p id="display-rounds">Afficher la liste des tours</p>';
-    document.getElementById("rounds-list").className = "upper-text";
-    document.getElementById("rounds-list").parentElement.className =
-      "column upper-text";
-    document.getElementById("candidate-lists").parentElement.className =
-      "column is-full";
-    document
-      .getElementById("display-rounds")
-      .addEventListener("click", async function () {
-        await roundsHandler.mount("rounds-list");
-        document.getElementById("rounds-list").className = "card";
-        document.getElementById("rounds-list").parentElement.className =
-          "column is-full";
-        document.getElementById("candidate-lists").parentElement.className =
-          "column";
-      });
+    AnimateCSS(roundList, "fadeOutLeft", function () {
+      roundList.innerHTML =
+        '<p id="display-rounds">Afficher la liste des tours</p>';
+      roundList.className = "upper-text";
+      roundList.parentElement.className = "column upper-text";
+      document.getElementById("candidate-lists").parentElement.className =
+        "column is-full";
+      document
+        .getElementById("display-rounds")
+        .addEventListener("click", async function () {
+          AnimateCSS(roundPanel, "fadeOutRight", async function () {
+            roundPanel.style.display = "none";
+            roundList.style.display = "none";
+            await roundsHandler.mount("rounds-list");
+            roundList.className = "card";
+            roundList.parentElement.className = "column is-full";
+            document.getElementById("candidate-lists").parentElement.className =
+              "column";
+            AnimateCSS(roundList, "fadeInLeft", function () {});
+            roundList.style.display = "block";
+          });
+        });
+      roundPanel.style.display = "block";
+      AnimateCSS(roundPanel, "fadeInRight", function () {});
+    });
   }
 }