groups templates improvements

- require confirmation before removing a member
- require confirmation before removing self
- make button text less verbose
- use more standardised formatting for group editing form
- improve button colours
- add missing trans tags
- reload group page when removing member
This commit is contained in:
Hugh Rundle 2021-10-16 16:43:09 +11:00
parent 1736419538
commit 85784f07d2
6 changed files with 49 additions and 63 deletions

View file

@ -5,5 +5,5 @@
<h2 class="title is-5">
{% trans "Add new members!" %}
</h2>
{% include 'groups/suggested_users.html' with suggested_users=suggested_users query=query %}
{% include 'groups/suggested_users.html' with suggested_users=suggested_users %}
{% endblock %}

View file

@ -8,6 +8,23 @@
<div class="columns mt-3">
<section class="column is-three-quarters">
{% if group.user == request.user %}
<div class="block">
<form class="field has-addons" method="get" action="{% url 'group-find-users' group.id %}">
<div class="control">
<input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
</div>
<div class="control">
<button class="button" type="submit">
<span class="icon icon-search" title="{% trans 'Search' %}">
<span class="is-sr-only">{% trans "Search" %}</span>
</span>
</button>
</div>
</form>
</div>
{% endif %}
{% block searchresults %}
{% endblock %}
<div class="mb-2">
@ -61,26 +78,5 @@
{% endif %}
{% include "snippets/pagination.html" with page=items %}
</section>
{% if group.user == request.user %}
<section class="column is-one-quarter">
<div class="block">
<h2 class="title is-5">Find new members</h2>
<form class="field has-addons" method="get" action="{% url 'group-find-users' group.id %}">
<div class="control">
<input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
</div>
<div class="control">
<button class="button" type="submit">
<span class="icon icon-search" title="{% trans 'Search' %}">
<span class="is-sr-only">{% trans "Search" %}</span>
</span>
</button>
</div>
</form>
</div>
</section>
{% endif %}
</div>
{% endblock %}

View file

@ -7,10 +7,24 @@
<h2 class="title is-5">Group Members</h2>
<p class="subtitle is-6">{% trans "Members can add and remove books on a group's book lists" %}</p>
{% if group.user != request.user and group|is_member:request.user %}
<form action="{% url 'remove-group-member' %}" method="POST" class="my-4">
{% csrf_token %}
<input type="hidden" name="group" value="{{ group.id }}">
<input type="hidden" name="user" value="{{ user.username }}">
<button id="remove_self_button" class="button is-small is-danger is-light is-hidden" type="submit">
{% trans "Confirm" %}
</button>
<button id="hide_remove_self_button" data-controls="remove_self_button" class="button is-small" type="button" aria-pressed="false">
{% trans "Leave group" %}
</button>
</form>
{% endif %}
<div class="is-multiline is-flex is-flex-grow-0 is-flex-wrap-wrap">
{% for membership in group.memberships.all %}
{% with member=membership.user %}
<div class="box has-text-centered is-shadowless has-background-white-bis my-2 mx-2">
<div class="box has-text-centered is-shadowless has-background-white-bis my-2 mx-2 member_{{ member.id }}">
<a href="{{ member.local_path }}" class="has-text-black">
{% include 'snippets/avatar.html' with user=member large=True %}
<span title="{{ member.display_name }}" class="is-block is-6 has-text-weight-bold">{{ member.display_name|truncatechars:10 }}</span>
@ -21,7 +35,7 @@
<span class="is-sr-only">Manager</span>
</span>
{% endif %}
{% include 'snippets/remove_from_group_button.html' with user=member group=group minimal=True %}
{% include 'snippets/remove_from_group_button.html' with user=member group=group %}
{% if request.user in member.following.all %}
<p class="help">
{% trans "Follows you" %}
@ -31,18 +45,3 @@
{% endwith %}
{% endfor %}
</div>
{% if group.user != request.user and group|is_member:request.user %}
<form action="{% url 'remove-group-member' %}" method="POST" class="my-4">
{% csrf_token %}
<input type="hidden" name="group" value="{{ group.id }}">
<input type="hidden" name="user" value="{{ user.username }}">
<button class="button is-small is-danger is-light" type="submit">
{% if show_username %}
{% blocktrans with username=user.localname %}Remove @{{ username }}{% endblocktrans %}
{% else %}
{% trans "Remove self from group" %}
{% endif %}
</button>
</form>
{% endif %}

View file

@ -5,13 +5,13 @@
{% if suggested_users %}
<div class="column is-flex is-flex-grow-0">
{% for user in suggested_users %}
<div class="box has-text-centered is-shadowless has-background-white-bis m-0">
<div class="box has-text-centered is-shadowless has-background-white-bis m-2">
<a href="{{ user.local_path }}" class="has-text-black">
{% include 'snippets/avatar.html' with user=user large=True %}
<span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
<span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>
</a>
{% include 'snippets/add_to_group_button.html' with user=user group=group minimal=True %}
{% include 'snippets/add_to_group_button.html' with user=user group=group %}
{% if user.mutuals %}
<p class="help">
{% blocktrans trimmed with mutuals=user.mutuals|intcomma count counter=user.mutuals %}
@ -36,7 +36,7 @@
{% endfor %}
</div>
{% else %}
<p>No potential members found for "{{ query }}"</p>
<p>No potential members found for "{{ user_query }}"</p>
<br/>
{% endif %}

View file

@ -5,18 +5,14 @@
{% include 'snippets/block_button.html' with blocks=True %}
{% else %}
<div class="field{% if not minimal %} has-addons{% else %} mb-0{% endif %}">
<div class="field mb-0">
<div class="control">
<form action="{% url 'invite-group-member' %}" method="POST" class="interaction add_{{ user.id }} {% if group|is_member:user or group|is_invited:user %}is-hidden{%endif %}" data-id="add_{{ user.id }}">
{% csrf_token %}
<input type="hidden" name="group" value="{{ group.id }}">
<input type="hidden" name="user" value="{{ user.username }}">
<button class="button is-small{% if not minimal %} is-link{% endif %}" type="submit">
{% if show_username %}
{% blocktrans with username=user.localname %}Invite @{{ username }}{% endblocktrans %}
{% else %}
<button class="button is-small" type="submit">
{% trans "Invite" %}
{% endif %}
</button>
</form>
<form action="{% url 'remove-group-member' %}" method="POST" class="interaction add_{{ user.id }} {% if not group|is_member:user and not group|is_invited:user %}is-hidden{% endif %}" data-id="add_{{ user.id }}">
@ -25,17 +21,13 @@
<input type="hidden" name="user" value="{{ user.username }}">
{% if not group|is_member:user %}
<button class="button is-small is-danger is-light" type="submit">
{% trans "Undo Invitation" %}
{% trans "Uninvite" %}
</button>
{% else %}
<button class="button is-small is-danger is-light" type="submit">
{% if show_username %}
{% blocktrans with username=user.localname %}Remove @{{ username }}{% endblocktrans %}
{% else %}
{% trans "Remove" %}
{% endif %}
{% blocktrans with username=user.localname %}Remove @{{ username }}{% endblocktrans %}
</button>
{% endif %}
{% endif %}
</form>
</div>
</div>

View file

@ -6,18 +6,17 @@
{% include 'snippets/block_button.html' with blocks=True %}
<br/>
{% endif %}
<div class="field{% if not minimal %} has-addons{% else %} mb-0{% endif %}">
<div class="fieldmb-0">
<div class="control">
<form action="{% url 'remove-group-member' %}" method="POST" class="interaction add_{{ user.id }}" data-id="add_{{ user.id }}">
<form action="{% url 'remove-group-member' %}" method="POST" class="has-text-centered">
{% csrf_token %}
<input type="hidden" name="group" value="{{ group.id }}">
<input type="hidden" name="user" value="{{ user.username }}">
<button class="button is-small" type="submit">
{% if show_username %}
{% blocktrans with username=user.localname %}Remove @{{ username }}{% endblocktrans %}
{% else %}
{% trans "Remove" %}
{% endif %}
<button id="submit_button" class="button is-small is-danger is-light is-hidden" type="submit" data-id="member_{{ member.id }}">
{% blocktrans with username=user.localname %} Confirm {% endblocktrans %}
</button>
<button id="hide_submit_button" data-controls="submit_button" class="button is-small" type="button" aria-pressed="false">
{% blocktrans with username=user.localname %} Remove {% endblocktrans %}
</button>
</form>
</div>