Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create an avatar tag to be usable anywhere we need an avatar. #1298

Merged
merged 4 commits into from
Sep 27, 2024
Merged

Create an avatar tag to be usable anywhere we need an avatar. #1298

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d4b5560
Create an avatar tag to be usable anywhere we need an avatar.
brianjp93 Sep 27, 2024
e58fad1
Allow avatar tag to take a User or CommitAuthor
brianjp93 Sep 27, 2024
16e9d62
Fix test.
brianjp93 Sep 27, 2024
27480e2
Unused import
brianjp93 Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions config/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@
CustomSignupView,
CustomSocialSignupViewView,
ProfileView,
UserAvatar,
UserViewSet,
)
from versions.api import ImportVersionsView, VersionViewSet
Expand Down Expand Up @@ -99,7 +98,6 @@
path("accounts/", include("allauth.urls")),
path("users/me/", CurrentUserProfileView.as_view(), name="profile-account"),
path("users/<int:pk>/", ProfileView.as_view(), name="profile-user"),
path("users/avatar/", UserAvatar.as_view(), name="user-avatar"),
path("api/v1/users/me/", CurrentUserAPIView.as_view(), name="current-user"),
path(
"api/v1/import-versions/",
Expand Down
9 changes: 6 additions & 3 deletions libraries/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,9 +265,9 @@ def get_context_data(self, **kwargs):
context["maintainers"] = self.get_maintainers(context["version"])
context["author_tag"] = self.get_author_tag()
exclude_maintainer_ids = [
getattr(x.commitauthor, "id")
x.commitauthor.id
for x in context["maintainers"]
if x.commitauthor
if getattr(x.commitauthor, "id", None)
]
context["top_contributors_release"] = self.get_top_contributors(
version=context["version"],
Expand Down Expand Up @@ -431,7 +431,10 @@ def get_maintainers(self, version):
if author_email := commit_authors.get(user.email.lower(), None):
user.commitauthor = author_email.author
else:
user.commitauthor = None
user.commitauthor = {
"github_profile_url": "",
"avatar_url": "",
}
return qs

def get_top_contributors(self, version=None, exclude=None):
Expand Down
22 changes: 5 additions & 17 deletions templates/admin/library_report_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% load static humanize %}
{% load static humanize avatar_tags %}
<!DOCTYPE html>
<html>
<head>
Expand Down Expand Up @@ -65,14 +65,8 @@ <h1 class="mx-auto">Boost {{ version.display_name }}</h1>
<div>
<div class="grid grid-cols-5 gap-2">
{% for author in top_contributors_release_overall %}
<div class="flex flex-col gap-y-2 w-20">
{% if author.avatar_url %}
<img src="{{ author.avatar_url }}"
alt="{{ author.name }}"
class="w-8 h-8 rounded mx-auto">
{% else %}
<div class="w-8 h-8 rounded bg-gray-300 mx-auto"></div>
{% endif %}
<div class="flex flex-col gap-y-2 w-20 items-center">
{% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
<div class="w-full flex flex-col">
Copy link
Member

@vinniefalco vinniefalco Sep 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a django tag? It looks just like a partial.. what am I missing?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's similar to a partial.

  1. The way that it is created is slightly different.
{% include "partials/avatar.html" with name="" image_url="" href="" %}
  1. Using a django tag ensures that the required fields are provided when using it. If we use the include method instead, and don't include a name for example, it will still render but without a name.

I opted for the django tag as it's slightly easier to use but I'm fine with either way.

<div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
{{ author.name }}
Expand Down Expand Up @@ -111,14 +105,8 @@ <h4>There were {{ item.version_count.commit_count }} commits in release {{ versi
<div class="mb-2">Top Contributors</div>
<div class="grid grid-cols-5 gap-2 flex-wrap">
{% for author in item.top_contributors_release %}
<div class="flex flex-col gap-y-2 w-20">
{% if author.avatar_url %}
<img src="{{ author.avatar_url }}"
alt="{{ author.name }}"
class="w-8 h-8 rounded mx-auto">
{% else %}
<div class="w-8 h-8 rounded bg-gray-300 mx-auto"></div>
{% endif %}
<div class="flex flex-col gap-y-2 w-20 items-center">
{% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
<div class="w-full flex flex-col justify-center items-center">
<div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
{{ author.name }}
Expand Down
18 changes: 3 additions & 15 deletions templates/admin/library_stat_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "admin/base_site.html" %}
{% load static %}
{% load static avatar_tags %}
{% block extrahead %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet" />
{% endblock extrahead %}
Expand Down Expand Up @@ -33,12 +33,7 @@ <h3 class="mb-2">
<div class="flex flex-col gap-y-1">
{% for author in commits_per_author %}
<div class="flex gap-x-1">
{% if author.avatar_url %}
<img src="{{ author.avatar_url }}" alt="github avatar" class="w-8 rounded">
{% else %}
<div class="w-8 h-8 rounded bg-silver">
</div>
{% endif %}
{% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
<div>
{{ author.name }}: {{ author.count }}
</div>
Expand All @@ -60,14 +55,7 @@ <h3 class="my-2">
<hr>
{% endifchanged %}
<div class="flex gap-x-1">
{% if item.commit__author__avatar_url %}
<img src="{{ item.commit__author__avatar_url }}"
alt="github avatar"
class="w-8 rounded">
{% else %}
<div class="w-8 h-8 rounded bg-silver">
</div>
{% endif %}
{% avatar name=item.commit__author__name image_url=item.commit__author__avatar_url href=None %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does "href" have different values here versus the previous one? Why is image_url different here from the previous one?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the object is different. Each item in this queryset is actually a LibraryVersion with annotations to count commits by commit author per version.

<div>
{{ item.commit__author__name }}: {{ item.count }}
</div>
Expand Down
20 changes: 3 additions & 17 deletions templates/includes/_header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,23 +403,9 @@
{% if not disable_theme_switcher %}
<i id="light-dark" class="fas fa-sun icon-link " onclick="changeTheme()"></i>
{% endif %}
{% comment %}
The html and context for the user avatar and profile dropdown menu are coming from the view as
and html fragment fetched view htmx get request and inserted into #avatar
{% endcomment %}
<span x-data="{ 'userOpen': false }" class="menu-link" style="position: relative; width: 2rem;">
<div hx-get="/users/avatar/"
hx-trigger="load"
hx-target="#avatar"
hx-indicator=".htmx-indicator">
</div>
<span id="avatar">
<svg aria-hidden="true" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
</svg>
</span>
</span>
<span x-data="{ 'userOpen': false }" class="menu-link w-8 relative">
{% include "users/includes/header_avatar.html" %}
</span>
</div>
</div>
<script>
Expand Down
59 changes: 7 additions & 52 deletions templates/libraries/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load i18n static avatar_tags %}

{% block title %}{{ object.display_name }} ({{ version.display_name }}){% endblock %}
{% block description %}{% trans object.description %}{% endblock %}
Expand Down Expand Up @@ -117,65 +116,21 @@
<!-- Avatars -->
<h2 class="text-2xl">Maintainers &amp; Contributors</h2>
<div class="flex flex-col gap-y-4">
<div class="flex flex-wrap justify-center">
<div class="flex flex-wrap justify-center gap-2">
{% for user in maintainers %}
<a {% if user.commitauthor.github_profile_url %}href="{{ user.commitauthor.github_profile_url }}"{% endif %}>
<div class="p-1 md:p-2 w-min text-center flex flex-col items-center">
<div class="bg-gray-300 dark:bg-slate rounded-lg h-12 w-12">
{% if user.image or user.commitauthor.avatar_url %}
<img src="{% if user.image %}{{ user.image.url}}{% else %}{{ user.commitauthor.avatar_url }}{% endif %}"
title="{{ user.get_full_name }}"
alt="{{ user.get_full_name }}"
class="rounded-lg h-12 w-12 object-cover" />
{% else %}
<i class="h-12 w-12 m-auto text-3xl align-middle fas fa-user text-white dark:text-white/60 " title="{{ user.get_full_name }}"></i>
{% endif %}
</div>
<span class="text-xs">{{ user.get_full_name }}</span>
</div>
</a>
{% avatar image_url=user.image|default:user.commitauthor.avatar_url href=user.commitauthor.github_profile_url name=user.get_full_name image_size="h-12 w-12" is_show_name=True %}
{% endfor %}
</div>

<div class="flex flex-wrap justify-center">
<div class="flex flex-wrap justify-center gap-2">
{% for author in top_contributors_release %}
<a
{% if author.github_profile_url %}
href="{{ author.github_profile_url }}"
{% endif %}
>
<div class="p-1 md:p-2 flex text-center justify-center" title="{{ author.name }}">
<div class="bg-gray-300 dark:bg-slate rounded-lg h-9 w-9 overflow-hidden">
{% if author.avatar_url %}
<img src="{{ author.avatar_url }}"
title="{{ author.name }}"
alt="{{ author.name }}"
class="rounded-lg h-9 w-9 object-cover" />
{% else %}
<i class="h-9 w-9 m-auto text-3xl fas fa-user text-white dark:text-white/60 " title="{{ author.name }}"></i>
{% endif %}
</div>
</div>
</a>
{% avatar image_url=author.avatar_url href=author.github_profile_url name=author.name %}
{% endfor %}
</div>

<div class="flex flex-wrap justify-center">
<div class="flex flex-wrap justify-center gap-2">
{% for author in top_contributors_overall %}
<a {% if author.github_profile_url %}href="{{ author.github_profile_url }}"{% endif %}>
<div class="p-1 md:p-2 flex text-center justify-center" title="{{ author.name }}">
<div class="bg-gray-300 dark:bg-slate rounded-lg h-9 w-9 overflow-hidden">
{% if author.avatar_url %}
<img src="{{ author.avatar_url }}"
title="{{ author.name }}"
alt="{{ author.name }}"
class="rounded-lg h-9 w-9 object-cover" />
{% else %}
<i class="h-9 w-9 m-auto text-3xl fas fa-user text-white dark:text-white/60 " title="{{ author.name }}"></i>
{% endif %}
</div>
</div>
</a>
{% avatar image_url=author.avatar_url href=author.github_profile_url name=author.name %}
{% endfor %}
</div>

Expand Down
28 changes: 21 additions & 7 deletions templates/partials/avatar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
{% if profile.avatar %}
<img class="avatar" src="{{ profile.avatar.url }}" alt="{{ profile.user }}" />
{% elif show_placeholder %}
<span class="avatar empty">
<i class="far fa-user fa-4x" ></i>
</span>
{% endif %}
{# Intended to be used with a django tag: avatar_tags.avatar #}
{% with av_size=av_size|default:"w-9 h-9" av_show_name=av_show_name|default:False av_title=av_title|default:av_name %}
{% with av_alt=av_alt|default:av_name av_icon_size=av_icon_size|default:"text-3xl" %}
<a {% if av_href %}href="{{ av_href }}"{% endif %}>
<div class="w-min text-center flex flex-col justify-center items-center">
<div class="bg-gray-300 dark:bg-slate rounded-lg {{ av_size }} flex items-center justify-center relative" title="{{ av_title }}">
{% if av_image_url %}
<img src="{{ av_image_url }}"
alt="{{ av_alt }}"
class="rounded-lg {{ av_size }} object-cover mx-auto" />
{% else %}
<i class="{{ av_icon_size }} align-middle fas fa-user text-white dark:text-white/60"></i>
{% endif %}
</div>
{% if av_show_name %}
<span class="text-xs">{{ av_name }}</span>
{% endif %}
</div>
</a>
{% endwith %}
{% endwith %}
85 changes: 34 additions & 51 deletions templates/users/includes/header_avatar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,36 @@
{% if mobile %}
{% if not user.is_authenticated %}
<a href="{% url 'account_signup' %}" class="menu-link-right">Join</a>
{% else %}
{% if user.image %}
<span class="block py-2 px-3">
<img src="{{ user.image.url }}" alt="user" class="inline -mt-1 rounded cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
</span>
{% endif %}
<a href="{% url 'profile-account' %}" class="block py-2 px-3 text-gray-500 dark:text-gray-400">My Profile</a>
<a href="{% url 'account_logout' %}" class="block py-2 px-3 text-gray-500 dark:text-gray-400">Log Out</a>
{% endif %}
{% load avatar_tags %}
{% if not request.user.is_authenticated %}
<a href="{% url 'account_signup' %}"
class="menu-link-right">
Join
</a>
{% else %}
{% if not user.is_authenticated %}
<a href="{% url 'account_signup' %}"
class="menu-link-right">
Join
</a>
{% else %}
{% if user.image %}
<div class="h-[30px] w-[30px] text-slate rounded dark:text-white dark:bg-slate justify-center flex overflow-hidden">
<img src="{{ user.image_thumbnail.url }}"
alt="user"
class="h-full w-full cursor-pointer object-cover"
@click="userOpen = !userOpen" />
</div>
{% else %}
<div class="h-[30px] w-[30px] bg-white text-slate rounded dark:text-white dark:bg-slate justify-center flex">
<i class="fas fa-user text-2xl" @click="userOpen = !userOpen"></i>
</div>
{% endif %}
<div x-show="userOpen"
@click.away="userOpen = false"
id="userMenu"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
x-ref="menu-items"
x-description="Profile Menu"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 border border-gray-300 shadow-lg dark:ring-gray-500 dark:divide-gray-500 dark:bg-charcoal"
>
<a href="{% url 'profile-account' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">My Profile</a>
<a href="{% url 'account_logout' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Log Out</a>
</div>
{% endif %}
<div
class="h-[30px] w-[30px] cursor-pointer object-cover flex text-slate rounded dark:text-white dark:bg-slate"
@click="userOpen = !userOpen"
>
{% avatar image_url=request.user.get_thumbnail_url href=None alt="user" name=request.user.get_full_name image_size="h-[30px] w-[30px]" icon_size="text-2xl" %}
</div>
<div x-show="userOpen"
@click.away="userOpen = false"
id="userMenu"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
x-ref="menu-items"
x-description="Profile Menu"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
{# have to set display: none so that x-show starts off as hidden, otherwise there is a flicker #}
style="display: none;"
class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 border border-gray-300 shadow-lg dark:ring-gray-500 dark:divide-gray-500 dark:bg-charcoal"
>
<a href="{% url 'profile-account' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">My Profile</a>
<a href="{% url 'account_logout' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Log Out</a>
</div>
{% endif %}
14 changes: 2 additions & 12 deletions templates/users/profile_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,10 @@
{% extends "base.html" %}

{% load static %}
{% load static avatar_tags %}

{% block subnav %}
<div class="flex items-center py-3 px-4 border-b md:px-0 md:border-0 border-slate">
<div>
{% if user.image %}
<div class="h-[80px] w-[80px] overflow-hidden rounded bg-white dark:bg-slate">
<img src="{{ user.image_thumbnail.url }}" alt="user" class="h-full w-full object-cover" />
</div>
{% else %}
<span class="block relative h-[80px] w-[80px] bg-white rounded dark:text-white mt-1 dark:bg-slate">
<i class="mr-2 text-7xl fas fa-user absolute bottom-0 left-2"></i>
</span>
{% endif %}
</div>
{% avatar image_url=user.get_thumbnail_url href=None name=user.get_full_name image_size="h-[80px] w-[80px]" icon_size="text-7xl" %}
<div class="ml-4 text-base">
<span class="block">{{ user.get_full_name }}</span>
<span class="text-xs text-slate dark:text-white/60 ">Joined {{ user.date_joined }}</span>
Expand Down
5 changes: 5 additions & 0 deletions users/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,11 @@ def claim(self):
self.claimed = True
self.save()

def get_thumbnail_url(self):
# convenience method for templates
if self.image_thumbnail:
return self.image_thumbnail.url


class LastSeen(models.Model):
"""
Expand Down
Empty file added users/templatetags/__init__.py
View file
Open in desktop
Empty file.
Loading
Loading