klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-05-05 00:54:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adapt calendar to new tooltip library

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-04-25 16:08:15 +02:00
parent 273944f2a7
commit 0ab812c325
5 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
com/static/bundled/com/components/ics-calendar-index.ts
View File

@ -315,13 +315,13 @@ export class IcsCalendar extends inheritHtmlElement("div") {
const button = event.target as HTMLButtonElement; const button = event.target as HTMLButtonElement;
button.classList.add("text-copy"); button.classList.add("text-copy");
if (!button.hasAttribute("position")) { if (!button.hasAttribute("position")) {
button.setAttribute("tooltip", gettext("Link copied"));
button.setAttribute("position", "top"); button.setAttribute("position", "top");
button.setAttribute("no-hover", "");
} }
if (button.classList.contains("text-copied")) { if (button.classList.contains("text-copied")) {
button.classList.remove("text-copied"); button.classList.remove("text-copied");
} }
button.setAttribute("tooltip", gettext("Link copied"));
button.dispatchEvent(new Event("mouseover", { bubbles: true }));
navigator.clipboard.writeText( navigator.clipboard.writeText(
new URL( new URL(
await makeUrl(calendarCalendarInternal), await makeUrl(calendarCalendarInternal),
@ -332,6 +332,8 @@ 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.dispatchEvent(new Event("mouseout", { bubbles: true }));
button.removeAttribute("tooltip");
}, 1500); }, 1500);
}, },
}, },

5
com/static/com/components/ics-calendar.scss
View File

@ -1,4 +1,5 @@
@import "core/static/core/colors"; @import "core/static/core/colors";
@import "core/static/core/tooltips";
:root { :root {
@ -116,8 +117,4 @@ ics-calendar {
transition: 500ms ease-out; transition: 500ms ease-out;
} }
button.text-copied[tooltip]::before {
opacity: 0;
transition: opacity 500ms ease-out;
}
} }

5
core/static/core/style.scss
View File

@ -45,7 +45,7 @@ body {
} }
} }
.tooltip { @mixin tooltip {
@include shadow; @include shadow;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
@ -58,7 +58,10 @@ body {
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
transition: opacity 500ms ease-in; transition: opacity 500ms ease-in;
}
.tooltip {
@include tooltip;
position: absolute; position: absolute;
width: max-content; width: max-content;

26
core/static/core/tooltips.scss Normal file
View File

@ -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;
}

1
core/templates/core/base.jinja
View File

@ -7,6 +7,7 @@
<link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}"> <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
<link rel="stylesheet" href="{{ static('core/base.css') }}"> <link rel="stylesheet" href="{{ static('core/base.css') }}">
<link rel="stylesheet" href="{{ static('core/style.scss') }}"> <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/markdown.scss') }}">
<link rel="stylesheet" href="{{ static('core/header.scss') }}"> <link rel="stylesheet" href="{{ static('core/header.scss') }}">
<link rel="stylesheet" href="{{ static('core/navbar.scss') }}"> <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">