From 1872e4abe5a187208b41af7921d9c46132bbeaeb Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Fri, 25 Apr 2025 16:08:15 +0200
Subject: [PATCH] Adapt calendar to new tooltip library
---
.../com/components/ics-calendar-index.ts | 6 +++--
com/static/com/components/ics-calendar.scss | 8 ++----
core/static/core/style.scss | 5 +++-
core/static/core/tooltips.scss | 26 +++++++++++++++++++
core/templates/core/base.jinja | 1 +
5 files changed, 37 insertions(+), 9 deletions(-)
create mode 100644 core/static/core/tooltips.scss
diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts
index 33044996..c339c2d5 100644
--- a/com/static/bundled/com/components/ics-calendar-index.ts
+++ b/com/static/bundled/com/components/ics-calendar-index.ts
@@ -320,13 +320,13 @@ export class IcsCalendar extends inheritHtmlElement("div") {
const button = event.target as HTMLButtonElement;
button.classList.add("text-copy");
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");
}
+ button.setAttribute("tooltip", gettext("Link copied"));
+ button.dispatchEvent(new Event("mouseover", { bubbles: true }));
navigator.clipboard.writeText(
new URL(
await makeUrl(calendarCalendarInternal),
@@ -337,6 +337,8 @@ export class IcsCalendar extends inheritHtmlElement("div") {
button.classList.remove("text-copied");
button.classList.add("text-copied");
button.classList.remove("text-copy");
+ button.dispatchEvent(new Event("mouseout", { bubbles: true }));
+ button.removeAttribute("tooltip");
}, 1500);
},
},
diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss
index d0c0f92c..7eb75c5c 100644
--- a/com/static/com/components/ics-calendar.scss
+++ b/com/static/com/components/ics-calendar.scss
@@ -1,4 +1,5 @@
@import "core/static/core/colors";
+@import "core/static/core/tooltips";
:root {
@@ -117,11 +118,6 @@ ics-calendar {
margin-right: 0.5rem;
}
- button.text-copied[tooltip]::before {
- opacity: 0;
- transition: opacity 500ms ease-out;
- }
-
.fc .fc-helpButton-button {
border-radius: 70%;
padding-left: 0.5rem;
@@ -137,4 +133,4 @@ ics-calendar {
.fc .fc-helpButton-button:hover {
background-color: rgba(20, 20, 20, 0.6);
}
-}
\ No newline at end of file
+}
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index ec962a2a..0481c280 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -45,7 +45,7 @@ body {
}
}
-.tooltip {
+@mixin tooltip {
@include shadow;
z-index: 1;
pointer-events: none;
@@ -58,7 +58,10 @@ body {
white-space: nowrap;
opacity: 0;
transition: opacity 500ms ease-in;
+}
+.tooltip {
+ @include tooltip;
position: absolute;
width: max-content;
diff --git a/core/static/core/tooltips.scss b/core/static/core/tooltips.scss
new file mode 100644
index 00000000..57bcb7a3
--- /dev/null
+++ b/core/static/core/tooltips.scss
@@ -0,0 +1,26 @@
+@import "colors";
+
+.tooltip {
+ @include shadow;
+ z-index: 1;
+ pointer-events: none;
+ background-color: #333;
+ color: #fff;
+ border: 0.5px solid hsl(0, 0%, 50%);
+ border-radius: 5px;
+ padding: 5px 10px;
+ position: absolute;
+ white-space: nowrap;
+ opacity: 0;
+ transition: opacity 500ms ease-out;
+ position: absolute;
+ width: max-content;
+
+ left: 0;
+ top: 0;
+}
+
+.tooltip[tooltip-status=open] {
+ opacity: 1;
+ transition: opacity 500ms ease-in;
+}
\ No newline at end of file
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 832bc1b8..6479e833 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -7,6 +7,7 @@
<link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
<link rel="stylesheet" href="{{ static('core/base.css') }}">
<link rel="stylesheet" href="{{ static('core/style.scss') }}">
+ <link rel="stylesheet" href="{{ static('core/tooltips.scss') }}">
<link rel="stylesheet" href="{{ static('core/markdown.scss') }}">
<link rel="stylesheet" href="{{ static('core/header.scss') }}">
<link rel="stylesheet" href="{{ static('core/navbar.scss') }}">