From b5ce2f733fa9c78061bd56245a62b7bca390fd96 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Wed, 26 Jun 2024 12:25:31 +0530
Subject: [PATCH] Use x-clock on user-menu popover to hide it during initial
load (#3997)
Also, use `ms-2` on the admin icon margin
Update html for better git diff and readability, linebreak on each
property
---
hypha/templates/includes/user_menu.html | 80 ++++++++++++++++++-------
1 file changed, 58 insertions(+), 22 deletions(-)
diff --git a/hypha/templates/includes/user_menu.html b/hypha/templates/includes/user_menu.html
index baf5a0bb3..3f0b54930 100644
--- a/hypha/templates/includes/user_menu.html
+++ b/hypha/templates/includes/user_menu.html
@@ -2,33 +2,69 @@
{% if request.user.is_authenticated %}
<div x-data="{ show: false }" class="relative flex">
- <button x-on:click="show = ! show" class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm" type="button">
+ <button
+ x-on:click="show = ! show"
+ class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm"
+ 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-40 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>
+ <div
+ x-cloak
+ 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="pe-4 py-3 block text-black ps-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>
+ <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="ms-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>
+ <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 %}
--
GitLab