Merge pull request #1086 from ae-utbm/calendar_link_help

Calendar link help button

com/static/bundled/com/components/ics-calendar-index.ts

@@ -17,11 +17,12 @@ import {
 
 @registerComponent("ics-calendar")
 export class IcsCalendar extends inheritHtmlElement("div") {
-  static observedAttributes = ["locale", "can_moderate", "can_delete"];
+  static observedAttributes = ["locale", "can_moderate", "can_delete", "ics-help-url"];
   private calendar: Calendar;
   private locale = "en";
   private canModerate = false;
   private canDelete = false;
+  private helpUrl = "";
 
   attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
     if (name === "locale") {
@@ -33,6 +34,10 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     if (name === "can_delete") {
       this.canDelete = newValue.toLowerCase() === "true";
     }
+
+    if (name === "ics-help-url") {
+      this.helpUrl = newValue;
+    }
   }
 
   isMobile() {
@@ -48,11 +53,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() {
@@ -335,6 +340,15 @@ export class IcsCalendar extends inheritHtmlElement("div") {
             }, 1500);
           },
         },
+        helpButton: {
+          text: "?",
+          hint: gettext("How to use calendar link"),
+          click: () => {
+            if (this.helpUrl) {
+              window.open(this.helpUrl, "_blank");
+            }
+          },
+        },
       },
       height: "auto",
       locale: this.locale,

com/static/com/components/ics-calendar.scss

@@ -114,10 +114,27 @@ 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 .fc-helpButton-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 .fc-helpButton-button:hover {
+    background-color: rgba(20, 20, 20, 0.6);
+  }
 }

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})"
+        ics-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") }}"

locale/fr/LC_MESSAGES/djangojs.po

@@ -37,6 +37,10 @@ msgstr "Supprimer"
 msgid "Copy calendar link"
 msgstr "Copier le lien du calendrier"
 
+#: com/static/bundled/com/components/ics-calendar-index.ts
+msgid "How to use calendar link"
+msgstr "Comment utiliser le lien du calendrier"
+
 #: com/static/bundled/com/components/ics-calendar-index.ts
 msgid "Link copied"
 msgstr "Lien copié"