Smooth animation

This commit is contained in:
Antoine Bartuccio 2025-04-08 11:54:19 +02:00
parent 5de05c0360
commit 8a381aed38
4 changed files with 39 additions and 19 deletions

View File

@ -44,7 +44,18 @@ export class IcsCalendar extends inheritHtmlElement("div") {
return this.isMobile() ? "listMonth" : "dayGridMonth"; return this.isMobile() ? "listMonth" : "dayGridMonth";
} }
currentToolbar() { currentFooterToolbar() {
if (this.isMobile()) {
return {
start: "",
center: "getCalendarLink",
end: "",
};
}
return { start: "getCalendarLink", center: "", end: "" };
}
currentHeaderToolbar() {
if (this.isMobile()) { if (this.isMobile()) {
return { return {
left: "prev,next", left: "prev,next",
@ -309,11 +320,14 @@ export class IcsCalendar extends inheritHtmlElement("div") {
click: async (event: Event) => { click: async (event: Event) => {
const button = event.target as HTMLButtonElement; const button = event.target as HTMLButtonElement;
button.classList.add("text-copy"); button.classList.add("text-copy");
button.setAttribute( if (!button.hasAttribute("position")) {
"tooltip", button.setAttribute("tooltip", gettext("Link copied"));
gettext("Calendar link copied to the clipboard"), button.setAttribute("position", "top");
); button.setAttribute("no-hover", "");
button.setAttribute("position", "top"); }
if (button.classList.contains("text-copied")) {
button.classList.remove("text-copied");
}
navigator.clipboard.writeText( navigator.clipboard.writeText(
new URL( new URL(
await makeUrl(calendarCalendarInternal), await makeUrl(calendarCalendarInternal),
@ -324,21 +338,20 @@ export class IcsCalendar extends inheritHtmlElement("div") {
button.classList.remove("text-copied"); button.classList.remove("text-copied");
button.classList.add("text-copied"); button.classList.add("text-copied");
button.classList.remove("text-copy"); button.classList.remove("text-copy");
button.removeAttribute("tooltip"); }, 1500);
button.removeAttribute("position");
}, 700);
}, },
}, },
}, },
height: "auto", height: "auto",
locale: this.locale, locale: this.locale,
initialView: this.currentView(), initialView: this.currentView(),
headerToolbar: this.currentToolbar(), headerToolbar: this.currentHeaderToolbar(),
footerToolbar: { start: "getCalendarLink" }, footerToolbar: this.currentFooterToolbar(),
eventSources: await this.getEventSources(), eventSources: await this.getEventSources(),
windowResize: () => { windowResize: () => {
this.calendar.changeView(this.currentView()); 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) => { eventClick: (event) => {
// Avoid our popup to be deleted because we clicked outside of it // Avoid our popup to be deleted because we clicked outside of it

View File

@ -107,16 +107,17 @@ ics-calendar {
button.text-copy:focus, button.text-copy:focus,
button.text-copy:hover { button.text-copy:hover {
background-color: #67AE6E !important; background-color: #67AE6E !important;
transition: 200ms linear; transition: 500ms ease-in;
} }
button.text-copied, button.text-copied,
button.text-copied:focus, button.text-copied:focus,
button.text-copied:hover { button.text-copied:hover {
transition: 200ms linear; transition: 500ms ease-out;
} }
[tooltip]::before { button.text-copied[tooltip]::before {
font-size: 10px; // this will overflow otherwise opacity: 0;
transition: opacity 500ms ease-out;
} }
} }

View File

@ -70,6 +70,12 @@ body {
[tooltip]:hover::before { [tooltip]:hover::before {
opacity: 1; opacity: 1;
transition: opacity 500ms ease-in;
}
[no-hover][tooltip]::before {
opacity: 1;
transition: opacity 500ms ease-in;
} }
[position="top"][tooltip]::before { [position="top"][tooltip]::before {

View File

@ -7,7 +7,7 @@
msgid "" msgid ""
msgstr "" msgstr ""
"Report-Msgid-Bugs-To: \n" "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" "PO-Revision-Date: 2024-09-17 11:54+0200\n"
"Last-Translator: Sli <antoine@bartuccio.fr>\n" "Last-Translator: Sli <antoine@bartuccio.fr>\n"
"Language-Team: AE info <ae.info@utbm.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" msgstr "Copier le lien du calendrier"
#: com/static/bundled/com/components/ics-calendar-index.ts #: com/static/bundled/com/components/ics-calendar-index.ts
msgid "Calendar link copied to the clipboard" msgid "Link copied"
msgstr "Lien du calendrier copié dans le presse papier" msgstr "Lien copié"
#: com/static/bundled/com/components/moderation-alert-index.ts #: com/static/bundled/com/components/moderation-alert-index.ts
#, javascript-format #, javascript-format