diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts index 09336db5..11a84834 100644 --- a/com/static/bundled/com/components/ics-calendar-index.ts +++ b/com/static/bundled/com/components/ics-calendar-index.ts @@ -48,11 +48,11 @@ export class IcsCalendar extends inheritHtmlElement("div") { if (this.isMobile()) { return { start: "", - center: "getCalendarLink", + center: "getCalendarLink helpButton", end: "", }; } - return { start: "getCalendarLink", center: "", end: "" }; + return { start: "getCalendarLink helpButton", center: "", end: "" }; } currentHeaderToolbar() { @@ -341,6 +341,16 @@ export class IcsCalendar extends inheritHtmlElement("div") { }, 1500); }, }, + helpButton: { + text: "?", + click: () => { + const helpUrl = this.getAttribute("data-help-url"); + + if (helpUrl) { + window.open(helpUrl, "_blank"); + } + }, + }, }, height: "auto", locale: this.locale, @@ -352,6 +362,13 @@ export class IcsCalendar extends inheritHtmlElement("div") { this.calendar.changeView(this.currentView()); this.calendar.setOption("headerToolbar", this.currentHeaderToolbar()); this.calendar.setOption("footerToolbar", this.currentFooterToolbar()); + + setTimeout(() => { + const button = this.node.querySelector(".fc-helpButton-button"); + if (button) { + button.classList.add("help-button"); + } + }, 10); }, eventClick: (event) => { // Avoid our popup to be deleted because we clicked outside of it @@ -363,6 +380,13 @@ export class IcsCalendar extends inheritHtmlElement("div") { }); this.calendar.render(); + setTimeout(() => { + const button = this.node.querySelector(".fc-helpButton-button"); + if (button) { + button.classList.add("help-button"); + } + }, 0); + window.addEventListener("click", (event: MouseEvent) => { // Auto close popups when clicking outside of it const popup = document.getElementById("event-details"); diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss index 49713f82..80fb4a0f 100644 --- a/com/static/com/components/ics-calendar.scss +++ b/com/static/com/components/ics-calendar.scss @@ -114,10 +114,28 @@ ics-calendar { button.text-copied:focus, button.text-copied:hover { transition: 500ms ease-out; + margin-right: 0.5rem; } button.text-copied[tooltip]::before { opacity: 0; transition: opacity 500ms ease-out; } + + .fc .help-button { + border-radius: 70%; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: rgba(0, 0, 0, 0.8); + transition: 100ms ease-out; + width: 30px; + height: 30px; + font-size: 11px; + } + + + .fc .help-button:hover, + .fc help-button:focus { + background-color: rgba(20, 20, 20, 0.6); + } } \ No newline at end of file diff --git a/com/templates/com/news_list.jinja b/com/templates/com/news_list.jinja index 172cc888..251f3817 100644 --- a/com/templates/com/news_list.jinja +++ b/com/templates/com/news_list.jinja @@ -192,6 +192,7 @@ @calendar-delete="$dispatch('news-moderated', {newsId: $event.detail.id, state: AlertState.DELETED})" @calendar-unpublish="$dispatch('news-moderated', {newsId: $event.detail.id, state: AlertState.PENDING})" @calendar-publish="$dispatch('news-moderated', {newsId: $event.detail.id, state: AlertState.PUBLISHED})" + data-help-url="{{ url('core:page', page_name='Index/calendrier')}}" locale="{{ get_language() }}" can_moderate="{{ user.has_perm("com.moderate_news") }}" can_delete="{{ user.has_perm("com.delete_news") }}" diff --git a/core/static/core/img/promo_24.png b/core/static/core/img/promo_24.png deleted file mode 100644 index d671febe..00000000 Binary files a/core/static/core/img/promo_24.png and /dev/null differ