Identity profile menus

static/css/style.css

@@ -285,6 +285,11 @@ header menu a.identity i {
     padding: 0 7px 2px 0;
 }
 
+header menu a.identity a.view-profile {
+    display: inline-block;
+    margin-right: 20px;
+}
+
 header menu a img {
     display: inline-block;
     vertical-align: middle;
@@ -592,26 +597,85 @@ form.inline {
     padding: 0;
 }
 
-form.follow-profile {
+div.follow-profile {
     float: right;
     margin: 20px 0 0 0;
     font-size: 16px;
     text-align: center;
 }
 
-form.follow-profile.has-reverse {
+div.follow-profile.has-reverse {
     margin-top: 0;
 }
 
-form.follow-profile .reverse-follow {
+div.follow-profile .reverse-follow {
     display: block;
     margin: 0 0 5px 0;
 }
 
-form.follow-profile button {
+div.follow-profile button,
+div.follow-profile .button {
     margin: 0;
 }
 
+div.follow-profile .actions {
+    /* display: flex; */
+    position: relative;
+    justify-content: space-between;
+    /* padding: 8px 0 0 0; */
+    align-items: center;
+    align-content: center;
+}
+
+div.follow-profile .actions a {
+    border-radius: 4px;
+    min-width: 40px;
+    text-align: center;
+    cursor: pointer;
+}
+
+div.follow-profile .actions menu {
+    display: none;
+    background-color: var(--color-bg-menu);
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    position: absolute;
+    right: 0;
+    top: 43px;
+}
+
+div.follow-profile .actions menu.enabled {
+    display: block;
+    min-width: 160px;
+    z-index: 10;
+}
+
+div.follow-profile .actions menu a {
+    text-align: left;
+    display: block;
+    font-size: 15px;
+    padding: 4px 10px;
+    color: var(--color-text-dull);
+}
+
+div.follow-profile .actions menu a i {
+    margin-right: 4px;
+    width: 16px;
+}
+
+div.follow-profile .actions a:hover {
+    color: var(--color-text-main);
+}
+
+div.follow-profile .actions a.active {
+    color: var(--color-highlight);
+}
+
+form.inline-menu {
+    margin: 0px;
+    display:inline;
+}
+
 form.follow {
     display: inline;
 }
@@ -1166,6 +1230,8 @@ table.metadata td .emoji {
     /* Fixes a bit of extra padding on the bottom of the link. */
 }
 
+
+
 /* Posts */
 
 .post {

takahe/urls.py

@@ -186,7 +186,7 @@ urlpatterns = [
     path("auth/reset/<token>/", auth.PerformReset.as_view(), name="password_reset"),
     # Identity selection
     path("@<handle>/activate/", identity.ActivateIdentity.as_view()),
-    path("identity/select/", identity.SelectIdentity.as_view()),
+    path("identity/select/", identity.SelectIdentity.as_view(), name="identity_select"),
     path("identity/create/", identity.CreateIdentity.as_view()),
     # Flat pages
     path("about/", core.About.as_view(), name="about"),

templates/activities/_menu.html

@@ -36,6 +36,9 @@
         <a href="{% url "settings" %}" {% if top_section == "settings" %}class="selected"{% endif %} title="Settings">
             <i class="fa-solid fa-gear"></i> Settings
         </a>
+        <a href="{% url "identity_select" %}" title="Select Identity">
+            <i class="fa-solid fa-users-viewfinder"></i> Select Identity
+        </a>
     {% else %}
         <a href="{% url "local" %}" {% if current_page == "local" %}class="selected"{% endif %} title="Local Posts">
             <i class="fa-solid fa-city"></i> Local Posts

templates/base.html

@@ -55,7 +55,7 @@
                         </a>
                     {% endif %}
                     <div class="gap"></div>
-                    <a href="/identity/select/" role="menuitem" class="identity">
+                    <a href="{{ request.identity.urls.view }}" role="menuitem" class="identity">
                         {% if not request.identity %}
                             No Identity
                             <img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected">

templates/identity/_menu.html

@@ -1,6 +1,6 @@
 <nav>
     <a href="/identity/select/" {% if identities %}class="selected"{% endif %} title="Select Identity">
-        <i class="fa-solid fa-user"></i> Select Identity
+        <i class="fa-solid fa-users-viewfinder"></i> Select Identity
     </a>
     <a href="/identity/create/" {% if form %}class="selected"{% endif %} title="Create Identity">
         <i class="fa-solid fa-plus"></i> Create Identity

templates/identity/_view_menu.html

@@ -0,0 +1,43 @@
+
+<div class="inline follow-profile {% if reverse_follow %}has-reverse{% endif %}">
+
+    <div class="actions" role="menubar">
+        {% if request.identity == identity %}
+            <a href="{% url "settings_profile" %}" class="button" title="Edit Profile">
+                <i class="fa-solid fa-user-edit"></i>
+            </a>
+        {% else %}
+            {% if reverse_follow %}
+                <span class="reverse-follow">Follows You</span>
+            {% endif %}
+            <form action="{{ identity.urls.action }}" method="POST" class="inline-menu">
+                {% csrf_token %}
+            {% if follow %}
+                <input type="hidden" name="action" value="unfollow">
+                <button class="destructive" title="Unfollow"><i class="fa-solid fa-user-minus"></i>
+                {% if follow.pending %}Follow Pending{% else %}Unfollow{% endif %}
+                </button>
+            {% else %}
+                <input type="hidden" name="action" value="follow">
+                <button><i class="fa-solid fa-user-plus"></i> Follow</button>
+            {% endif %}
+            </form>
+        {% endif %}
+
+        {% if request.user.admin %}
+        <a title="Menu" class="menu button" _="on click toggle .enabled on the next <menu/> then halt" aria-haspopup="menu">
+            <i class="fa-solid fa-bars"></i>
+        </a>
+        <menu>
+            {% if request.user.admin %}
+            <a href="{{ identity.urls.admin_edit }}" role="menuitem">
+                <i class="fa-solid fa-user-gear"></i> View in Admin
+            </a>
+            <a href="{{ identity.urls.djadmin_edit }}" role="menuitem">
+                <i class="fa-solid fa-gear"></i> View in djadmin
+            </a>
+            {% endif %}
+        </menu>
+    {% endif %}
+    </div>
+</div>

templates/identity/view.html

@@ -22,29 +22,7 @@
 
         <img src="{{ identity.local_icon_url.relative }}" class="icon">
 
-        {% if request.identity %}
-            {% if identity == request.identity %}
-                <form class="inline follow-profile">
-                    <a class="button" href="{% url "settings_profile" %}">Edit Profile</a>
-                </form>
-            {% else %}
-                <form action="{{ identity.urls.action }}" method="POST" class="inline follow-profile {% if reverse_follow %}has-reverse{% endif %}">
-                    {% csrf_token %}
-                    {% if reverse_follow %}
-                        <span class="reverse-follow">Follows You</span>
-                    {% endif %}
-                    {% if follow %}
-                        <input type="hidden" name="action" value="unfollow">
-                        <button class="destructive">
-                            {% if follow.pending %}Follow Pending{% else %}Unfollow{% endif %}
-                        </button>
-                    {% else %}
-                        <input type="hidden" name="action" value="follow">
-                        <button>Follow</button>
-                    {% endif %}
-                </form>
-            {% endif %}
-        {% endif %}
+        {% if request.identity %}{% include "identity/_view_menu.html" %}{% endif %}
 
         {{ identity.html_name_or_handle }}
         <small>

users/models/identity.py

@@ -232,6 +232,7 @@ class Identity(StatorModel):
         activate = "{view}activate/"
         admin = "/admin/identities/"
         admin_edit = "{admin}{self.pk}/"
+        djadmin_edit = "/djadmin/users/identity/{self.id}/change/"
 
         def get_scheme(self, url):
             return "https"