feat: userlinks templates refactoring

unfoldadmin · Jun 21, 2023 · b86d78d · b86d78d
1 parent a68af6b
commit b86d78d
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 66 deletions.
diff --git a/src/unfold/templates/unfold/helpers/account_links.html b/src/unfold/templates/unfold/helpers/account_links.html
@@ -0,0 +1,37 @@
+{% load i18n %}
+
+<div class="relative">
+    <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
+        <span class="material-symbols-outlined">person</span>
+    </a>
+
+    <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
+        <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
+            <span class="block mx-1 px-3 py-2 truncate">
+                {% firstof user.get_short_name user.get_username %}
+            </span>
+        </div>
+
+        {% if nav_global %}
+            {{ nav_global }}
+        {% endif %}
+
+        {% if site_url %}
+            <a href="{{ site_url }}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+                {% translate 'View site' %}
+            </a>
+        {% endif %}
+
+        {% if user.has_usable_password %}
+            <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+                {% translate 'Change password' %}
+            </a>
+        {% endif %}
+
+        <div class="border-t mt-1 pt-1 dark:border-gray-700">
+            <a href="{% url 'admin:logout' %}" class="bg-none block mx-1 px-3 py-2 text-red-500 rounded hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
+                {% translate 'Log out' %}
+            </a>
+        </div>
+    </nav>
+</div>
diff --git a/src/unfold/templates/unfold/helpers/theme_switch.html b/src/unfold/templates/unfold/helpers/theme_switch.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+
+<div class="relative">
+    <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" x-on:click="openTheme = !openTheme">
+        <span class="material-symbols-outlined">
+            <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
+        </span>
+    </a>
+
+    <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-40 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openTheme" @click.outside="openTheme = false">
+        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+           x-on:click="adminTheme = 'dark'"
+           x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+            <span class="material-symbols-outlined mr-2">dark_mode</span>
+            <span class="leading-none self-center">{% trans "Dark" %}</span>
+        </a>
+
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+           x-on:click="adminTheme = 'light'"
+           x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+            <span class="material-symbols-outlined mr-2">light_mode</span>
+            <span class="leading-none self-center">{% trans "Light" %}</span>
+        </a>
+
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+           x-on:click="adminTheme = 'auto'"
+           x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+            <span class="material-symbols-outlined mr-2">computer</span>
+            <span class="leading-none self-center">{% trans "System" %}</span>
+        </a>
+    </nav>
+</div>
diff --git a/src/unfold/templates/unfold/helpers/userlinks.html b/src/unfold/templates/unfold/helpers/userlinks.html
@@ -2,73 +2,10 @@
 
 <div class="flex items-center ml-auto">
     <div class="flex flex-row group items-center leading-none relative" x-data="{ openUserLinks: false, openTheme: false }">
-        <div class="flex flex-row text-gray-500">
-            <div class="mr-4 relative">
-                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" x-on:click="openTheme = !openTheme">
-                    <span class="material-symbols-outlined">
-                        <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
-                    </span>
-                </a>
+        <div class="flex gap-4">
+            {% include "unfold/helpers/theme_switch.html" %}
 
-                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-40 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openTheme" @click.outside="openTheme = false">
-                    <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                       x-on:click="adminTheme = 'dark'"
-                       x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
-                        <span class="material-symbols-outlined mr-2">dark_mode</span>
-                        <span class="leading-none self-center">{% trans "Dark" %}</span>
-                    </a>
-
-                    <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                       x-on:click="adminTheme = 'light'"
-                       x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
-                        <span class="material-symbols-outlined mr-2">light_mode</span>
-                        <span class="leading-none self-center">{% trans "Light" %}</span>
-                    </a>
-
-                    <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                       x-on:click="adminTheme = 'auto'"
-                       x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
-                        <span class="material-symbols-outlined mr-2">computer</span>
-                        <span class="leading-none self-center">{% trans "System" %}</span>
-                    </a>
-                </nav>
-            </div>
-
-            <div class="relative">
-                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
-                    <span class="material-symbols-outlined">person</span>
-                </a>
-
-                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
-                    <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
-                        <span class="block mx-1 px-3 py-2 truncate">
-                            {% firstof user.get_short_name user.get_username %}
-                        </span>
-                    </div>
-
-                    {% if nav_global %}
-                        {{ nav_global }}
-                    {% endif %}
-
-                    {% if site_url %}
-                        <a href="{{ site_url }}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
-                            {% translate 'View site' %}
-                        </a>
-                    {% endif %}
-
-                    {% if user.has_usable_password %}
-                        <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
-                            {% translate 'Change password' %}
-                        </a>
-                    {% endif %}
-
-                    <div class="border-t mt-1 pt-1 dark:border-gray-700">
-                        <a href="{% url 'admin:logout' %}" class="bg-none block mx-1 px-3 py-2 text-red-500 rounded hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
-                            {% translate 'Log out' %}
-                        </a>
-                    </div>
-                </nav>
-            </div>
+            {% include "unfold/helpers/account_links.html" %}
         </div>
     </div>
 

diff --git a/src/unfold/templates/unfold/layouts/base_simple.html b/src/unfold/templates/unfold/layouts/base_simple.html
@@ -11,6 +11,7 @@
         {% endif %}
 
         <div id="main" class="shadow flex-grow">
+            {% block content_before %}{% endblock %}
             <div class="p-4 lg:p-12">
                 <div id="content" class="container mx-auto {% block coltype %}colM{% endblock %}">
                     {% block content %}