diff --git a/app/assets/images/cross-grey.png b/app/assets/images/cross-grey.png new file mode 100644 index 000000000..3c665adb9 Binary files /dev/null and b/app/assets/images/cross-grey.png differ diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss new file mode 100644 index 000000000..a44aa023c --- /dev/null +++ b/app/assets/stylesheets/components/tick-cross.scss @@ -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; + } + + } + +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index b1e27910b..a6d147629 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -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'; diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss new file mode 100644 index 000000000..93a4631c3 --- /dev/null +++ b/app/assets/stylesheets/views/users.scss @@ -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; + } + + } + +} diff --git a/app/templates/components/tick-cross.html b/app/templates/components/tick-cross.html new file mode 100644 index 000000000..6467b38ca --- /dev/null +++ b/app/templates/components/tick-cross.html @@ -0,0 +1,15 @@ +{% macro tick_cross(yes, label) %} +
  • + {% if yes %} + + + {{ label}} + + {% else %} + + + {{ label}} + + {% endif %} +
    • +{% endmacro %} diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index 2448a4409..34dc100ab 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -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,84 @@ Manage users – GOV.UK Notify {% endif %} - {% call(item, row_number) list_table( - users, caption='Active', **table_options - ) %} - {% call field() %} - {{ item.name }} - {%- if item.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') %} - {% if current_user.has_permissions(['manage_users']) %} - {% if current_user.id != item.id %} - Edit - {% endif %} - {% endif %} - {% endcall %} - {% endcall %} +

    + Active +

    +
    + {% for user in users %} +
    +

    + {{ user.name }}  + {%- if user.email_address == current_user.email_address -%} + (you) + {% else %} + {{ user.email_address }} + {% endif %} + +

    + +
    + {% endfor %} +
    {% 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']) %} - Cancel invitation - {% endif %} - {% endcall %} - {% else %} - {% call field() %} - {{ item.status }} - {% endcall %} - {% endif %} - {% endcall %} +

    + Invited +

    +
    + {% for user in invited_users %} +
    +

    + {{ user.email_address }} +

    + +
    + {% endfor %} +
    {% endif %} {% endblock %} diff --git a/tests/app/main/views/test_manage_users.py b/tests/app/main/views/test_manage_users.py index e090d443d..767fb752e 100644 --- a/tests/app/main/views/test_manage_users.py +++ b/tests/app/main/views/test_manage_users.py @@ -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')