darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-14 00:52:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Tidy layout of team page

Browse Source 
The team page was a bit of a mess:

- invited and active tables didn’t line up
- lots of things were wrapping onto two lines
- the empty fields for when a user didn’t have permissions looked broken

This commit splits each row of the table (not actually a table any more)
onto two lines. First line has the user’s info, second has their
permissions and any associated actions.
This commit is contained in:
Chris Hill-Scott
2016-07-07 09:17:50 +01:00
parent dfbd6610cb
commit f9ebb337e3
7 changed files with 159 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/cross-grey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

46
app/assets/stylesheets/components/tick-cross.scss Normal file
View File

@@ -0,0 +1,46 @@
%tick-cross {
@include core-16;
display: inline-block;
background-size: 19px 19px;
background-repeat: no-repeat;
background-position: 0 0;
padding: 1px 0 0 25px;
}
.tick-cross {
&-tick {
@extend %tick-cross;
background-image: file-url('tick.png');
}
&-cross {
@extend %tick-cross;
background-image: file-url('cross-grey.png');
color: $secondary-text-colour;
}
&-list {
@extend %grid-row;
margin-top: 5px;
&-permissions {
@include grid-column(3/4);
li {
display: inline-block;
margin-right: 0.5em;
}
}
&-edit-link {
@include grid-column(1/4);
text-align: right;
}
}
}

2
app/assets/stylesheets/main.scss
View File

@@ -54,11 +54,13 @@ $path: '/static/images/';
@import 'components/message';
@import 'components/phone';
@import 'components/research-mode';
@import 'components/tick-cross';
@import 'views/job';
@import 'views/edit-template';
@import 'views/documenation';
@import 'views/dashboard';
@import 'views/users';
// TODO: break this up
@import 'app';

16
app/assets/stylesheets/views/users.scss Normal file
View File

@@ -0,0 +1,16 @@
.user-list {
@include core-16;
&-item {
padding: $gutter-half 0;
border-top: 1px solid $border-colour;
&:last-child {
border-bottom: 1px solid $border-colour;
}
}
}

15
app/templates/components/tick-cross.html Normal file
View File

@@ -0,0 +1,15 @@
{% macro tick_cross(yes, label) %}
<li>
{% if yes %}
<span class="tick-cross-tick">
<span class="visually-hidden">Can</span>
{{ label}}
</span>
{% else %}
<span class="tick-cross-cross">
<span class="visually-hidden">Can’t</span>
{{ label}}
</span>
{% endif %}
</li>
{% endmacro %}

104
app/templates/views/manage-users.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/table.html" import list_table, row, field, boolean_field, hidden_field_heading %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/tick-cross.html" import tick_cross %}
{% set table_options = {
'field_headings': [
@@ -29,49 +30,82 @@ Manage users – GOV.UK Notify
{% endif %}
</div>
{% call(item, row_number) list_table(
users, caption='Active', **table_options
) %}
{% call field() %}
{{ item.name }}
{%- if item.email_address == current_user.email_address -%}
&ensp;<span class="hint">(you)</span>
<h2 class="heading-medium">
Active
</h2>
<div class="user-list">
{% for user in users %}
<div class="user-list-item">
<h3>
{{ user.name }}&ensp;<span class="hint">
{%- if user.email_address == current_user.email_address -%}
(you)
{% endif %}
{% endcall %}
{{ boolean_field(item.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters'])) }}
{{ boolean_field(item.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings'])) }}
{{ boolean_field(item.has_permissions(permissions=['manage_api_keys'])) }}
{% call field(align='right') %}
</span>
</h3>
<ul class="tick-cross-list">
<div class="tick-cross-list-permissions">
{{ tick_cross(
user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
'Send messages'
) }}
{{ tick_cross(
user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
'Manage service'
) }}
{{ tick_cross(
user.has_permissions(permissions=['manage_api_keys']),
'Access API keys'
) }}
</div>
{% if current_user.has_permissions(['manage_users']) %}
{% if current_user.id != item.id %}
<a href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=item.id)}}">Edit</a>
{% if current_user.id != user.id %}
<li class="tick-cross-list-edit-link">
<a href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Edit permissions</a>
</li>
{% endif %}
{% endif %}
{% endcall %}
{% endcall %}
</ul>
</div>
{% endfor %}
</div>
{% if invited_users %}
{% call(item, row_number) list_table(
invited_users, caption='Invited', **table_options
) %}
{% call field() %}
{{ item.email_address }}
{% endcall %}
{{ boolean_field(item.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters'])) }}
{{ boolean_field(item.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings'])) }}
{{ boolean_field(item.has_permissions(permissions=['manage_api_keys'])) }}
{% if item.status == 'pending' %}
{% call field(align='right') %}
{% if current_user.has_permissions(['manage_users']) %}
<a href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=item.id)}}">Cancel invitation</a>
{% endif %}
{% endcall %}
<h2 class="heading-medium">
Invited
</h2>
<div class="user-list">
{% for user in invited_users %}
<div class="user-list-item">
<h3>
{{ user.email_address }}
</h3>
<ul class="tick-cross-list">
<div class="tick-cross-list-permissions">
{{ tick_cross(
user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
'Send messages'
) }}
{{ tick_cross(
user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
'Manage service'
) }}
{{ tick_cross(
user.has_permissions(permissions=['manage_api_keys']),
'Access API keys'
) }}
</div>
<li class="tick-cross-list-edit-link">
{% if user.status == 'pending' and current_user.has_permissions(['manage_users']) %}
<a href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation</a>
{% else %}
{% call field() %}
{{ item.status }}
{% endcall %}
{{ user.status|title }}
{% endif %}
{% endcall %}
</li>
</ul>
</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}

11
tests/app/main/views/test_manage_users.py
View File

@@ -205,10 +205,9 @@ def test_manage_users_shows_invited_user(app_,
assert response.status_code == 200
page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
assert page.h1.string.strip() == 'Team members'
invites_table = page.find_all('table')[1]
cols = invites_table.find_all('td')
assert cols[0].text.strip() == 'invited_user@test.gov.uk'
assert cols[4].text.strip() == 'Cancel invitation'
invited_users_list = page.find_all('div', {'class': 'user-list'})[1]
assert invited_users_list.find_all('h3')[0].text.strip() == 'invited_user@test.gov.uk'
assert invited_users_list.find_all('a')[0].text.strip() == 'Cancel invitation'
def test_manage_users_does_not_show_accepted_invite(app_,
@@ -232,8 +231,8 @@ def test_manage_users_does_not_show_accepted_invite(app_,
assert response.status_code == 200
page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
assert page.h1.string.strip() == 'Team members'
tables = page.find_all('table')
assert len(tables) == 1
user_lists = page.find_all('div', {'class': 'user-list'})
assert len(user_lists) == 1
assert not page.find(text='invited_user@test.gov.uk')