Merge branch 'v4.x-user-menu' into 'v4.x'

New User Menu

See merge request allianceauth/allianceauth!1582

allianceauth/menu/templates/menu/menu-logo.html

@@ -0,0 +1,4 @@
+{% load static %}
+<div class="align-items-center text-center">
+    <img src="{% static 'allianceauth/images/auth-logo.svg' %}" widht="128px" height="128px">
+</div>

allianceauth/menu/templates/menu/menu-user.html

@@ -2,57 +2,83 @@
 {% load evelinks %}
 {% load theme_tags %}
 
-<div style="z-index:5;" class="w100 d-flex flex-column justify-content-center align-items-center text-center pb-2">
+<div style="z-index:5;" class="w100 d-flex flex-column justify-content-center align-items-center text-center pb-2 border-top border-secondary">
-    {% if user.is_authenticated %}
+    <div class="d-flex mb-0 w-100 bg-dark text-light">
-        {% if request.user.profile.main_character %}
+        <div class="p-2 position-relative m-2">
             {% with request.user.profile.main_character as main %}
-                <div class="p-2 position-relative m-2">
+                <img class="rounded-circle" src="{{ main.character_id|character_portrait_url:64 }}" alt="{{ main.character_name }}">
-                    <img class="rounded-circle" src="{{ main.character_id|character_portrait_url:64 }}" alt="{{ main.character_name }}">
+                <img class="rounded-circle position-absolute bottom-0 start-0" src="{{ main.corporation_logo_url_32 }}" alt="{{ main.corporation_name }}">
-                    <img class="rounded-circle position-absolute bottom-0 start-0" src="{{ main.corporation_logo_url_32 }}" alt="{{ main.corporation_name }}">
+                {% if main.alliance_id %}
-
+                    <img class="rounded-circle position-absolute bottom-0 end-0" src="{{ main.alliance_logo_url_32 }}" alt="{{ main.alliance_name }}">
-                    {% if main.alliance_id %}
+                {% elif main.faction_id %}
-                        <img class="rounded-circle position-absolute bottom-0 end-0" src="{{ main.alliance_logo_url_32 }}" alt="{{ main.alliance_name }}">
+                    <img class="rounded-circle position-absolute bottom-0 end-0" src="{{ main.faction_logo_url_32 }}" alt="{{ main.faction_name }}">
-                    {% elif main.faction_id %}
+                {% endif %}
-                        <img class="rounded-circle position-absolute bottom-0 end-0" src="{{ main.faction_logo_url_32 }}" alt="{{ main.faction_name }}">
-                    {% endif %}
-                </div>
-                <h5>{{ main.character_name }}</h5>
             {% endwith %}
-        {% else %}
+        </div>
-            <img class="rounded-circle m-2" src="{{ 1|character_portrait_url:32 }}" alt="{% translate 'No Main Character!' %}">
+        <div class="align-self-center text-start">
-            <h5>{% translate "No Main Character!" %}</h5>
+            {% with request.user.profile.main_character as main %}
-        {% endif %}
+                <h5 class="m-0">{{ main.character_name }}</h5>
+                <p class="m-0 small">{{ main.corporation_name }}</p>
+                {% if main.alliance_id %}
+                    <p class="m-0 small">{{ main.alliance_name }}</p>
+                {% elif main.faction_id %}
+                    <p class="m-0 small">{{ main.faction_name }}</p>
+                {% endif %}
+            {% endwith %}
+        </div>
+        <div class="ms-auto dropup">
+            <button type="button" class="h-100 btn" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="fa-solid fa-gear fa-fw text-light"></i>
+            </button>
+            <ul class="dropdown-menu">
+                <li><h6 class="dropdown-header">{% translate "Language" %}</h6></li>
+                <li>
+                    <a class="dropdown-item">{% include "public/lang_select.html" %}</a>
+                </li>
+                <li><h6 class="dropdown-header">{% translate "Theme" %}</h6></li>
 
-        {% theme_select %}
+                <li>
-    {% endif %}
+                    <a class="dropdown-item">
+                        {% theme_select %}
+                    </a>
+                </li>
 
-    <div class="btn-group m-2">
+                {% if user.is_superuser %}
-        <button type="button" class="btn btn-secondary p-1">
+                    <li><hr class="dropdown-divider"></li>
-            {% include "public/lang_select.html" %}
+                    <li><h6 class="dropdown-header">{% translate "Super User" %}</h6></li>
-        </button>
+                    <li>
+                        <a class="dropdown-item"  href="https://allianceauth.readthedocs.io/" title="Alliance Auth Documentation"><i class="fa-solid fa-book fa-fw"></i> Alliance Auth Documentation</a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item"  href="https://discord.gg/fjnHAmk" title="Alliance Auth Discord"><i class="fa-brands fa-discord fa-fw"></i> Alliance Auth Discord</a>
+                    </li>
+                        <li>
+                            <a class="dropdown-item" href="https://gitlab.com/allianceauth/allianceauth" title="Alliance Auth Git"><i class="fa-brands fa-gitlab fa-fw"></i> Alliance Auth Git</a>
+                        </li>
+                    <li>
+                        <a class="dropdown-item" href="{% url 'admin:index' %}">
+                            <i class="fa-solid fa-gear fa-fw"></i> {% translate "Admin" %}
+                        </a>
+                    </li>
+                {% endif %}
+                <li><hr class="dropdown-divider"></li>
+                {% if user.is_authenticated %}
+                    <li>
+                        <a class="dropdown-item" href="{% url 'authentication:token_management' %}">
+                            <i class="fa-solid fa-user-lock fa-fw"></i> Token Management
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item text-danger" href="{% url 'logout' %}" title="{% translate 'Sign Out' %}"><i class="fa-solid fa-right-from-bracket fa-fw "></i> {% translate 'Sign Out' %}</a>
+                    </li>
+                {% else %}
+                    <li>
+                        <a class="dropdown-item text-success" href="{% url 'authentication:login' %}" title="{% translate 'Sign In' %}"> <i class="fa-solid fa-right-to-bracket fa-fw "></i> {% translate 'Sign In' %}</a>
+                    </li>
+                {% endif %}
 
-        {% if user.is_superuser %}
-            <a role="button" class="btn btn btn-secondary d-flex" href="{% url 'admin:index' %}">
-                <span class="align-self-center">{% translate "Admin" %}</span>
-            </a>
-        {% endif %}
-    </div>
 
-    <div class="btn-group m-2">
+            </ul>
-        {% if user.is_authenticated %}
+        </div>
-            <a role="button" class="btn btn-info" href="{% url 'authentication:token_management' %}" title="Token Management"><i class="fa-solid fa-user-lock fa-fw"></i></a>
-        {% endif %}
-
-        {% if user.is_superuser %}
-            <a role="button" class="btn btn-info" href="https://allianceauth.readthedocs.io/" title="Alliance Auth Documentation"><i class="fa-solid fa-book fa-fw"></i></a>
-            <a role="button" class="btn btn-info" href="https://discord.gg/fjnHAmk" title="Alliance Auth Discord"><i class="fa-brands fa-discord fa-fw"></i></a>
-            <a role="button" class="btn btn-info" href="https://gitlab.com/allianceauth/allianceauth" title="Alliance Auth Git"><i class="fa-brands fa-gitlab fa-fw"></i></a>
-        {% endif %}
-
-        {% if user.is_authenticated %}
-            <a role="button" class="btn btn-danger" href="{% url 'logout' %}" title="{% translate 'Sign Out' %}"><i class="fa-solid fa-right-from-bracket fa-fw"></i></a>
-        {% else %}
-            <a role="button" class="btn btn-success" href="{% url 'authentication:login' %}" title="{% translate 'Sign In' %}"> <i class="fa-solid fa-right-to-bracket fa-fw"></i></a>
-        {% endif %}
     </div>
 </div>

allianceauth/menu/templates/menu/sortable-side-menu.html

@@ -5,7 +5,7 @@
 <div class="col-auto px-0">
     <div class="collapse collapse-horizontal" tabindex="-1" id="sidebar">
         <div style="width: 350px;">
-            <div class="nav-padding navbar-dark bg-dark text-light px-0 d-flex flex-column overflow-hidden vh-100 auth-logo">
+            <div class="nav-padding navbar-dark bg-dark text-light px-0 d-flex flex-column overflow-hidden vh-100">
                 {% if user.is_authenticated %}
                     <ul style="z-index:5;" id="sidebar-menu" class="navbar-nav flex-column mb-auto overflow-auto pt-2">
                         <li class="d-flex flex-wrap m-2 p-2 pt-0 pb-0 mt-0 mb-0 me-0 pe-0">
@@ -18,7 +18,7 @@
                         {% sorted_menu_items %}
                     </ul>
                 {% endif %}
-
+                {% include 'menu/menu-logo.html' %}
                 {% include 'menu/menu-user.html' %}
             </div>
         </div>

allianceauth/templates/allianceauth/base-bs5.html

@@ -34,12 +34,6 @@
                     padding-top: {% header_padding_size %} !important;
                 }
             {% endif %}
-
-            .auth-logo {
-                background-position: bottom;
-                background-repeat: no-repeat;
-                background-image: url("{% static 'allianceauth/images/auth-logo.png' %}") ;
-            }
         </style>
         {% block extra_css %}{% endblock extra_css %}
     </head>