From c55c919fa0125894d23c006fc01b624b67ff1364 Mon Sep 17 00:00:00 2001
From: Sandeep Chauhan <sandeepsajan0@gmail.com>
Date: Thu, 13 Jun 2024 19:47:37 +0530
Subject: [PATCH] Add user menu as a dropdown (#3943)
Fixes #3888
Co-authored-by: Fredrik Jonsson <frjo@xdeb.org>
---
hypha/templates/base-apply.html | 12 ++-----
hypha/templates/includes/login_button.html | 31 ----------------
hypha/templates/includes/user_menu.html | 42 ++++++++++++++++++++++
3 files changed, 45 insertions(+), 40 deletions(-)
delete mode 100644 hypha/templates/includes/login_button.html
create mode 100644 hypha/templates/includes/user_menu.html
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index 1575922fe..bb5d7248b 100644
--- a/hypha/templates/base-apply.html
+++ b/hypha/templates/base-apply.html
@@ -49,7 +49,7 @@
</button>
{% else %}
{% if request.path != '/auth/' and request.path != '/login/' %}
- {% include "includes/login_button.html" %}
+ {% include "includes/user_menu.html" %}
{% endif %}
{% endif %}
</div>
@@ -100,7 +100,7 @@
{% endif %}
</section>
- <div class="header__button-container flex gap-4">
+ <div class="header__button-container flex h-10 gap-4">
{% comment %} Todo List {% endcomment %}
{% if request.user.is_authenticated and request.user.is_apply_staff %}
<div
@@ -154,13 +154,7 @@
{% comment %} Todo List End{% endcomment %}
{% if request.path != '/auth/' and request.path != '/login/' %}
- {% include "includes/login_button.html" %}
- {% endif %}
-
- {% if request.user.is_authenticated %}
- <a href="{% url 'users:logout' %}" class="button button--transparent button--narrow">
- {% trans "Log out" %}
- </a>
+ {% include "includes/user_menu.html" %}
{% endif %}
</div>
</div>
diff --git a/hypha/templates/includes/login_button.html b/hypha/templates/includes/login_button.html
deleted file mode 100644
index 3ea049ea9..000000000
--- a/hypha/templates/includes/login_button.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% load i18n heroicons %}
-
-{% if request.user.is_authenticated %}
- {% if request.path == "/" and request.user.can_access_dashboard %}
- <a
- class="button button--transparent button--narrow {{ class }}"
- href="{{ APPLY_SITE.root_url }}{% url 'dashboard:dashboard' %}"
- >
- {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
-
- {% blocktrans %}My {{ ORG_SHORT_NAME }}{% endblocktrans %}
- </a>
- {% else %}
- <a
- class="button button--transparent button--narrow {{ class }}"
- href="{{ APPLY_SITE.root_url }}{% url 'users:account' %}"
- title="Goto your account"
- >
- {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
- {{ request.user }}
- </a>
- {% endif %}
-{% else %}
- <a
- class="button button--transparent button--narrow {{ class }}"
- href="{{ APPLY_SITE.root_url }}{% url 'users:passwordless_login_signup' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
- >
- {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
- {% trans "Log in" %} {% if ENABLE_PUBLIC_SIGNUP %} {% trans " or Sign up" %} {% endif %}
- </a>
-{% endif %}
diff --git a/hypha/templates/includes/user_menu.html b/hypha/templates/includes/user_menu.html
new file mode 100644
index 000000000..bfec385a8
--- /dev/null
+++ b/hypha/templates/includes/user_menu.html
@@ -0,0 +1,42 @@
+{% load i18n heroicons %}
+
+{% if request.user.is_authenticated %}
+ <div x-data="{ show: false }" class="relative flex">
+ <button x-on:click="show = ! show" class="button button--narrow font-bold text-center flex items-center justify-center px-2 hover:bg-black hover:text-white active:bg-black active:text-white focus:bg-black focus:text-white" type="button">
+ {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 me-1" aria_hidden=true %}
+ <span>{{ request.user }}</span>
+ </button>
+ <div x-show="show" x-transition @click.outside="show = false" class="min-w-36 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10">
+ <a href="{% url 'users:account' %}" title="Goto your account" class="pr-4 py-3 block text-black pl-3
+ focus-visible:outline-dashed outline-1 transition-colors border-r
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+ {% trans 'My account' %}</a>
+ {% if request.user.is_apply_staff %}
+ <a href="{% url 'activity:notifications' %}" title="Check latest notifications" class="pr-4 py-3 block text-black pl-3
+ focus-visible:outline-dashed outline-1 transition-colors border-r
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+ {% trans "Activity feed" %}</a>
+ <a href="{% url "apply:submissions:list-alt" %}?query=flagged:@me" title="Goto your flagged submissions" class="pr-4 py-3 block text-black pl-3
+ focus-visible:outline-dashed outline-1 transition-colors border-r
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+ {% trans "My flagged" %}</a>
+ <a href="{% url 'wagtailadmin_home' %}" title="Goto wagtail admin" class="pr-4 py-3 block text-black pl-3
+ focus-visible:outline-dashed outline-1 transition-colors border-r
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+ {% trans "Admin" %}{% heroicon_micro "wrench-screwdriver" class="ml-2 inline align-text-bottom" %}</a>
+ {% endif %}
+ <a href="{% url 'users:logout' %}" title="Log out" class="pr-4 py-3 block text-black pl-3 focus-visible:outline-dashed
+ outline-1 transition-colors border-r
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+ {% trans "Log out" %}</a>
+ </div>
+ </div>
+{% else %}
+ <a
+ class="button button--transparent button--narrow"
+ href="{{ APPLY_SITE.root_url }}{% url 'users:passwordless_login_signup' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
+ >
+ {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
+ {% trans "Log in" %} {% if ENABLE_PUBLIC_SIGNUP %} {% trans " or Sign up" %} {% endif %}
+ </a>
+{% endif %}
--
GitLab