From 5ca1f03d9d9367a16bddf828e0dfc0ba18117855 Mon Sep 17 00:00:00 2001 From: Kenneth SOARES Date: Sun, 11 May 2025 14:33:04 +0200 Subject: [PATCH 1/5] ics help button --- .../com/components/ics-calendar-index.ts | 15 ++++++++++++++- com/static/com/components/ics-calendar.scss | 18 ++++++++++++++++++ com/templates/com/news_list.jinja | 1 + 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts index 227d4128..f3bb9e9e 100644 --- a/com/static/bundled/com/components/ics-calendar-index.ts +++ b/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() { @@ -335,6 +340,14 @@ export class IcsCalendar extends inheritHtmlElement("div") { }, 1500); }, }, + helpButton: { + text: "?", + click: () => { + if (this.helpUrl) { + window.open(this.helpUrl, "_blank"); + } + }, + }, }, height: "auto", locale: this.locale, diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss index 49713f82..214c52a0 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 .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, + .fc .fc-helpButton-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..e9ff641a 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})" + 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") }}" From 33ba1e8bbb109a97edcfc72648ce072f47d89b25 Mon Sep 17 00:00:00 2001 From: Kenneth SOARES Date: Sun, 11 May 2025 16:05:21 +0200 Subject: [PATCH 2/5] added button to layout --- com/static/bundled/com/components/ics-calendar-index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts index f3bb9e9e..d0f3e542 100644 --- a/com/static/bundled/com/components/ics-calendar-index.ts +++ b/com/static/bundled/com/components/ics-calendar-index.ts @@ -53,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() { @@ -342,6 +342,7 @@ export class IcsCalendar extends inheritHtmlElement("div") { }, helpButton: { text: "?", + hint: gettext("how to use calendar link"), click: () => { if (this.helpUrl) { window.open(this.helpUrl, "_blank"); From 39422a0cb85ddcca4af4f6e5d40e723d564dafd8 Mon Sep 17 00:00:00 2001 From: Kenneth SOARES Date: Sun, 11 May 2025 16:05:47 +0200 Subject: [PATCH 3/5] added tooltip translations --- locale/fr/LC_MESSAGES/djangojs.po | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po index 8c1cc3f6..eeb84bd9 100644 --- a/locale/fr/LC_MESSAGES/djangojs.po +++ b/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é" From 2ed0fad51ad9e539a6ce03b815e0f1d6a1df6a94 Mon Sep 17 00:00:00 2001 From: Kenneth SOARES Date: Sun, 11 May 2025 16:06:22 +0200 Subject: [PATCH 4/5] remove unwanted focus behavior --- com/static/com/components/ics-calendar.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss index 214c52a0..d0c0f92c 100644 --- a/com/static/com/components/ics-calendar.scss +++ b/com/static/com/components/ics-calendar.scss @@ -134,8 +134,7 @@ ics-calendar { } - .fc .fc-helpButton-button:hover, - .fc .fc-helpButton-button:focus { + .fc .fc-helpButton-button:hover { background-color: rgba(20, 20, 20, 0.6); } } \ No newline at end of file From cab2adb45df5813e8e4a847109ee24b631eb2396 Mon Sep 17 00:00:00 2001 From: Kenneth SOARES Date: Mon, 12 May 2025 16:02:39 +0200 Subject: [PATCH 5/5] fixed translations --- com/static/bundled/com/components/ics-calendar-index.ts | 2 +- locale/fr/LC_MESSAGES/djangojs.po | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts index d0f3e542..33044996 100644 --- a/com/static/bundled/com/components/ics-calendar-index.ts +++ b/com/static/bundled/com/components/ics-calendar-index.ts @@ -342,7 +342,7 @@ export class IcsCalendar extends inheritHtmlElement("div") { }, helpButton: { text: "?", - hint: gettext("how to use calendar link"), + hint: gettext("How to use calendar link"), click: () => { if (this.helpUrl) { window.open(this.helpUrl, "_blank"); diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po index eeb84bd9..ce90c30b 100644 --- a/locale/fr/LC_MESSAGES/djangojs.po +++ b/locale/fr/LC_MESSAGES/djangojs.po @@ -38,8 +38,8 @@ 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" +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"