From 02271a7362dc2c63610975af10b00374b63f971f Mon Sep 17 00:00:00 2001
From: sandeepsajan0 <sandeepsajan0@gmail.com>
Date: Thu, 23 Jun 2022 09:53:24 +0530
Subject: [PATCH] Add notification heading, make bellicon clickable, and align
nav icons
---
.../src/javascript/apply/notifications.js | 17 +++++++++++++++++
.../components/_activity-notifications.scss | 12 +++++-------
hypha/templates/base-apply.html | 8 +++++---
3 files changed, 27 insertions(+), 10 deletions(-)
create mode 100644 hypha/static_src/src/javascript/apply/notifications.js
diff --git a/hypha/static_src/src/javascript/apply/notifications.js b/hypha/static_src/src/javascript/apply/notifications.js
new file mode 100644
index 000000000..43e3de514
--- /dev/null
+++ b/hypha/static_src/src/javascript/apply/notifications.js
@@ -0,0 +1,17 @@
+function notificationToggle() {
+ document.getElementById("notificationDropdown").classList.toggle("show");
+}
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+ if (!event.target.matches('.dropbtn, .dropbtn *')) {
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+}
diff --git a/hypha/static_src/src/sass/apply/components/_activity-notifications.scss b/hypha/static_src/src/sass/apply/components/_activity-notifications.scss
index 86d2dfdd3..9cdc26e2d 100644
--- a/hypha/static_src/src/sass/apply/components/_activity-notifications.scss
+++ b/hypha/static_src/src/sass/apply/components/_activity-notifications.scss
@@ -1,17 +1,11 @@
.dropbtn {
- padding: 5px 12px;
+ padding: 7px 12px;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
-
- &:hover {
- .dropdown-content {
- display: block;
- }
- }
}
.dropdown-content {
@@ -42,3 +36,7 @@
.source-label {
background-color: #7dc588;
}
+
+.show {
+ display:block;
+}
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index a9d4b8e1f..c67b94e85 100644
--- a/hypha/templates/base-apply.html
+++ b/hypha/templates/base-apply.html
@@ -30,6 +30,7 @@
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/js.cookie.min.js' %}"></script>
<script src="{% static 'js/main-top.js' %}"></script>
+ <script src="{% static 'js/apply/notifications.js' %}"></script>
{% if COOKIES_ACCEPTED and MATOMO_URL and MATOMO_SITEID %}
{# we are only expecting strings, so make sure we escape the values #}
<script>
@@ -106,14 +107,15 @@
<div class="header__button-container">
{% if latest_notifications %}
<div class="dropdown">
- <a href="#" class=" button--contains-icons dropbtn" aria-haspopup="activity" aria-expanded="false" role="button">
+ <a href="#" onclick="return notificationToggle()" class=" button--contains-icons dropbtn" aria-haspopup="activity" aria-expanded="false" role="button">
<svg class="icon"><use xlink:href="#bell-icon"></use></svg>
</a>
- <div class="dropdown-content" role="activity">
+ <div id="notificationDropdown" class="dropdown-content" role="activity">
+ <p><b>Notifications</b></p>
{% for notification in latest_notifications %}
<p class="dropdown-item">
<span class="source-label">{{ notification.source_content_type.name|source_type }}</span>
- <a href="{{ notification.source.get_absolute_url }}">{{ notification.source.title|capfirst }}</a>
+ <a href="{{ notification.source.get_absolute_url }}">{{ notification.source.title|capfirst|truncatechars:15 }}</a>
: {{ notification.user }} {% ifequal notification.type 'comment' %}made a comment{% else %} {{ notification.message|safe }}{% endifequal %}
</p>
{% endfor %}
--
GitLab