From 8a381aed3839ca8c5e48c05d95574f47a2490014 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 8 Apr 2025 11:54:19 +0200
Subject: [PATCH] Smooth animation

---
 .../com/components/ics-calendar-index.ts      | 37 +++++++++++++------
 com/static/com/components/ics-calendar.scss   |  9 +++--
 core/static/core/style.scss                   |  6 +++
 locale/fr/LC_MESSAGES/djangojs.po             |  6 +--
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts
index 1373c517..09336db5 100644
--- a/com/static/bundled/com/components/ics-calendar-index.ts
+++ b/com/static/bundled/com/components/ics-calendar-index.ts
@@ -44,7 +44,18 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     return this.isMobile() ? "listMonth" : "dayGridMonth";
   }
 
-  currentToolbar() {
+  currentFooterToolbar() {
+    if (this.isMobile()) {
+      return {
+        start: "",
+        center: "getCalendarLink",
+        end: "",
+      };
+    }
+    return { start: "getCalendarLink", center: "", end: "" };
+  }
+
+  currentHeaderToolbar() {
     if (this.isMobile()) {
       return {
         left: "prev,next",
@@ -309,11 +320,14 @@ export class IcsCalendar extends inheritHtmlElement("div") {
           click: async (event: Event) => {
             const button = event.target as HTMLButtonElement;
             button.classList.add("text-copy");
-            button.setAttribute(
-              "tooltip",
-              gettext("Calendar link copied to the clipboard"),
-            );
-            button.setAttribute("position", "top");
+            if (!button.hasAttribute("position")) {
+              button.setAttribute("tooltip", gettext("Link copied"));
+              button.setAttribute("position", "top");
+              button.setAttribute("no-hover", "");
+            }
+            if (button.classList.contains("text-copied")) {
+              button.classList.remove("text-copied");
+            }
             navigator.clipboard.writeText(
               new URL(
                 await makeUrl(calendarCalendarInternal),
@@ -324,21 +338,20 @@ export class IcsCalendar extends inheritHtmlElement("div") {
               button.classList.remove("text-copied");
               button.classList.add("text-copied");
               button.classList.remove("text-copy");
-              button.removeAttribute("tooltip");
-              button.removeAttribute("position");
-            }, 700);
+            }, 1500);
           },
         },
       },
       height: "auto",
       locale: this.locale,
       initialView: this.currentView(),
-      headerToolbar: this.currentToolbar(),
-      footerToolbar: { start: "getCalendarLink" },
+      headerToolbar: this.currentHeaderToolbar(),
+      footerToolbar: this.currentFooterToolbar(),
       eventSources: await this.getEventSources(),
       windowResize: () => {
         this.calendar.changeView(this.currentView());
-        this.calendar.setOption("headerToolbar", this.currentToolbar());
+        this.calendar.setOption("headerToolbar", this.currentHeaderToolbar());
+        this.calendar.setOption("footerToolbar", this.currentFooterToolbar());
       },
       eventClick: (event) => {
         // Avoid our popup to be deleted because we clicked outside of it
diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss
index 9cb5638e..49713f82 100644
--- a/com/static/com/components/ics-calendar.scss
+++ b/com/static/com/components/ics-calendar.scss
@@ -107,16 +107,17 @@ ics-calendar {
   button.text-copy:focus,
   button.text-copy:hover {
     background-color: #67AE6E !important;
-    transition: 200ms linear;
+    transition: 500ms ease-in;
   }
 
   button.text-copied,
   button.text-copied:focus,
   button.text-copied:hover {
-    transition: 200ms linear;
+    transition: 500ms ease-out;
   }
 
-  [tooltip]::before {
-    font-size: 10px; // this will overflow otherwise
+  button.text-copied[tooltip]::before {
+    opacity: 0;
+    transition: opacity 500ms ease-out;
   }
 }
\ No newline at end of file
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 9ee96b7e..a87ed3a3 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -70,6 +70,12 @@ body {
 
 [tooltip]:hover::before {
   opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+[no-hover][tooltip]::before {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
 }
 
 [position="top"][tooltip]::before {
diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po
index e078509a..3693c144 100644
--- a/locale/fr/LC_MESSAGES/djangojs.po
+++ b/locale/fr/LC_MESSAGES/djangojs.po
@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-07 13:56+0200\n"
+"POT-Creation-Date: 2025-04-08 11:42+0200\n"
 "PO-Revision-Date: 2024-09-17 11:54+0200\n"
 "Last-Translator: Sli <antoine@bartuccio.fr>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -38,8 +38,8 @@ msgid "Copy calendar link"
 msgstr "Copier le lien du calendrier"
 
 #: com/static/bundled/com/components/ics-calendar-index.ts
-msgid "Calendar link copied to the clipboard"
-msgstr "Lien du calendrier copié dans le presse papier"
+msgid "Link copied"
+msgstr "Lien copié"
 
 #: com/static/bundled/com/components/moderation-alert-index.ts
 #, javascript-format