From 27ad1532e4dad5497dea4284d3534429a213fc17 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 18 Apr 2016 11:10:47 +0100 Subject: [PATCH 1/2] Make the flow of using templates better MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For users who: - want to send messages from a template - want to edit templates For developers: - who need to get the ID of a template This commit mainly cleans up the choose template page so there are less options, and the options that are there are less wordy. This means: - moving ‘send yourself a test’ onto the send messages page, and making it button - stripping a lot of stuff out of the ‘send from API’ page, so it’s more obvious what the template ID is --- app/assets/javascripts/apiKey.js | 17 +++--- app/assets/javascripts/highlightTags.js | 2 +- app/assets/stylesheets/app.scss | 8 +++ .../stylesheets/components/api-key.scss | 5 +- .../stylesheets/components/email-message.scss | 16 +++--- .../stylesheets/components/page-footer.scss | 1 - app/assets/stylesheets/components/pill.scss | 5 +- .../components/secondary-button.scss | 8 +++ .../stylesheets/components/sms-message.scss | 3 +- app/assets/stylesheets/components/table.scss | 3 +- app/assets/stylesheets/main.scss | 1 + app/main/views/send.py | 13 ++--- app/templates/components/api-key.html | 4 +- app/templates/components/sms-message.html | 4 +- app/templates/views/send-from-api.html | 55 +++++++------------ app/templates/views/send.html | 36 ++++++------ app/templates/views/templates/_template.html | 15 +++-- app/templates/views/templates/template.html | 15 +++-- docs/index.md | 2 +- tests/app/main/views/test_send.py | 4 -- 20 files changed, 102 insertions(+), 115 deletions(-) create mode 100644 app/assets/stylesheets/components/secondary-button.scss diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js index 215be5672..2bbfa174c 100644 --- a/app/assets/javascripts/apiKey.js +++ b/app/assets/javascripts/apiKey.js @@ -6,13 +6,13 @@ Modules.ApiKey = function() { const states = { - 'keyVisible': key => ` + 'keyVisible': (key, thing) => ` ${key} - + `, - 'keyCopied': ` + 'keyCopied': thing => ` Copied to clipboard - + ` }; @@ -30,21 +30,22 @@ this.start = function(component) { const $component = $(component), - key = $component.data('key'); + key = $component.data('key'), + thing = $component.data('thing'); $component - .html(states.keyVisible(key)) + .html(states.keyVisible(key, thing)) .attr('aria-live', 'polite') .on( 'click', '.api-key-button-copy', () => this.copyKey( $('.api-key-key', component)[0], () => - $component.html(states.keyCopied) + $component.html(states.keyCopied(thing)) ) ) .on( 'click', '.api-key-button-show', () => - $component.html(states.keyVisible(key)) + $component.html(states.keyVisible(key, thing)) ); }; diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js index 1e2dae456..62b9ba736 100644 --- a/app/assets/javascripts/highlightTags.js +++ b/app/assets/javascripts/highlightTags.js @@ -25,7 +25,7 @@ this.initialHeight = this.$textbox.height(); this.$backgroundMaskForeground.css({ - 'width': this.$textbox.width(), + 'width': this.$textbox.outerWidth(), 'border-width': this.$textbox.css('border-width') }); diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index a34ba0521..c14cc30c5 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -97,6 +97,10 @@ td { margin-bottom: 20px; } +.heading-medium { + margin-top: $gutter; +} + #footer { .footer-categories { @@ -132,3 +136,7 @@ a[rel='external'] { .hint { color: $secondary-text-colour; } + +.button { + padding: 0.3em 0.6em 0.2em 0.6em; +} diff --git a/app/assets/stylesheets/components/api-key.scss b/app/assets/stylesheets/components/api-key.scss index e17b45ef4..6099524b5 100644 --- a/app/assets/stylesheets/components/api-key.scss +++ b/app/assets/stylesheets/components/api-key.scss @@ -11,10 +11,7 @@ margin-bottom: 10px; } - &-button-show { - @include button($grey-3); - } - + &-button-show, &-button-copy { @include button($grey-3); } diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss index 15dbab8c7..a6e27ad5f 100644 --- a/app/assets/stylesheets/components/email-message.scss +++ b/app/assets/stylesheets/components/email-message.scss @@ -1,4 +1,5 @@ $white-50-opaque: rgba($white, 0.5); +$button-bottom-border-colour: rgba(0, 0, 0, 0.17); .email-message { @@ -63,7 +64,7 @@ $white-50-opaque: rgba($white, 0.5); position: absolute; left: 50%; bottom: -18px; - height: 25px; + height: 27px; display: inline-block; padding: 0; margin: 0 0 0 -30px; @@ -75,23 +76,20 @@ $white-50-opaque: rgba($white, 0.5); cursor: pointer; width: 60px; text-decoration: none; - background: $grey-1; - color: $white; + background: $grey-3; + color: $text-colour; border-style: solid; border-width: 3px; border-color: $white; - border-radius: 6px; - box-shadow: 0 0 0 1px $white-50-opaque; + box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque; &:hover { - background: $link-hover-colour; + background: $grey-2; } &:focus, &:active { - background: $yellow; - border-color: $white; - color: $text-colour; + border-color: $yellow; outline: none; } diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss index f38a0e6ea..bb627a396 100644 --- a/app/assets/stylesheets/components/page-footer.scss +++ b/app/assets/stylesheets/components/page-footer.scss @@ -5,7 +5,6 @@ &-back-link { @include button($grey-1); display: inline-block; - padding: 0.52632em 0.78947em 0.26316em 0.78947em; margin-left: 10px; } diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 42c56869f..de839a37c 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -2,7 +2,8 @@ display: flex; - a, span { + a, + span { display: block; padding: 10px; flex-grow: 1; @@ -38,4 +39,4 @@ border: 1px solid $grey-1; color: $text-colour; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/secondary-button.scss b/app/assets/stylesheets/components/secondary-button.scss new file mode 100644 index 000000000..6e7a0ff7c --- /dev/null +++ b/app/assets/stylesheets/components/secondary-button.scss @@ -0,0 +1,8 @@ +.secondary-button { + @include button($grey-1); + padding: 0.3em 0.1em 0.2em 0.1em; + width: 100%; + padding-left: 0; + padding-right: 0; + text-align: center; +} diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index b7ebd7144..32d57ebd9 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -52,6 +52,7 @@ .sms-message-use-links { @include copy-19; + margin-top: -5px; a { display: block; @@ -68,7 +69,7 @@ .sms-message-use-links-with-title { @extend %sms-message-use-links; - margin-top: 52px; + margin-top: 55px; } .sms-message-from { diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index 5455046c5..32b3e7512 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/app/assets/stylesheets/components/table.scss @@ -112,13 +112,12 @@ @include core-16; color: $secondary-text-colour; margin-top: -20px; - margin-bottom: $gutter * 1.5; + margin-bottom: $gutter * 1.3333; border-bottom: 1px solid $border-colour; padding-bottom: 10px; text-align: center; } a.table-show-more-link { - @include bold-16; color: $link-colour; } diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 98910957e..a8ba3e209 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -49,6 +49,7 @@ $path: '/static/images/'; @import 'components/api-key'; @import 'components/vendor/previous-next-navigation'; @import 'components/pill'; +@import 'components/secondary-button'; @import 'views/job'; @import 'views/edit-template'; diff --git a/app/main/views/send.py b/app/main/views/send.py index 6a97941de..469612a0d 100644 --- a/app/main/views/send.py +++ b/app/main/views/send.py @@ -183,19 +183,16 @@ def send_message_to_self(service_id, template_id): @user_has_permissions('manage_api_keys') def send_from_api(service_id, template_id): template = Template( - service_api_client.get_service_template(service_id, template_id)['data'] + service_api_client.get_service_template(service_id, template_id)['data'], + prefix=current_service['name'] ) - payload = { - "to": current_user.mobile_number, - "template": template.id, - "personalisation": { - placeholder: "{} 1".format(placeholder) for placeholder in template.placeholders - } + personalisation = { + placeholder: "..." for placeholder in template.placeholders } return render_template( 'views/send-from-api.html', template=template, - payload=json.dumps(payload, indent=4) + personalisation=json.dumps(personalisation, indent=4) if personalisation else None ) diff --git a/app/templates/components/api-key.html b/app/templates/components/api-key.html index 2a2eb2525..74bce2b55 100644 --- a/app/templates/components/api-key.html +++ b/app/templates/components/api-key.html @@ -1,8 +1,8 @@ -{% macro api_key(key, name) %} +{% macro api_key(key, name, thing="API key") %}

{{ name }}

-
+
{{ key }}
{% endmacro %} diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index 4d0e1fdd7..eb809d409 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -1,6 +1,4 @@ -{% macro sms_message( - body, recipient=None, name=None, id=None, edit_link=None, from=None -) %} +{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %} {% if name %}

{% if edit_link %} diff --git a/app/templates/views/send-from-api.html b/app/templates/views/send-from-api.html index 9bb1ddb4f..50536c2a0 100644 --- a/app/templates/views/send-from-api.html +++ b/app/templates/views/send-from-api.html @@ -1,6 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/email-message.html" import email_message %} {% from "components/sms-message.html" import sms_message %} +{% from "components/api-key.html" import api_key %} {% block page_title %} API integration – GOV.UK Notify @@ -9,50 +10,32 @@ {% block maincolumn_content %}

- API integration + API info

-
-
- - {% if 'email' == template.template_type %} - {{ email_message( - template.subject, - template.formatted_as_markup, - ) }} - {% elif 'sms' == template.template_type %} + {% if 'email' == template.template_type %} + {{ email_message( + template.formatted_subject_as_markup, + template.formatted_as_markup, + ) }} + {% elif 'sms' == template.template_type %} +
+
{{ sms_message( template.formatted_as_markup, ) }} - {% endif %} - -

- You can send this message from your existing apps or systems by - connecting them to GOV.UK Notify. -

-

- You’ll need to work with a developer to do this. -

- +
+ {% endif %} + +
+ {{ api_key(template.id, name="Template ID", thing='template ID') }}
-

- Example payload for this template -

- {{payload|syntax_highlight_json}} - -

- Endpoint -

- -
- 
-      {{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
-        template.template_type
-      ) -}}
-
-
+ {% if personalisation %} +

Personalisation (all fields are required)

+ {{ personalisation|syntax_highlight_json }} + {% endif %}


See the developer documentation for full details. diff --git a/app/templates/views/send.html b/app/templates/views/send.html index b916b5e28..0ff51054a 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -11,32 +11,34 @@ {% block maincolumn_content %} -

Send from a CSV file

- {% if 'sms' == template.template_type %} -
-
+

Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}

+ +
+
+ {% if 'sms' == template.template_type %} {{ sms_message(template.formatted_as_markup) }} -
+ {% elif 'email' == template.template_type %} + {{ email_message( + template.formatted_subject_as_markup, + template.formatted_as_markup + ) }} + {% endif %}
- {% elif 'email' == template.template_type %} - {{ email_message( - template.formatted_subject_as_markup, - template.formatted_as_markup, - from_address='{}@notifications.service.gov.uk'.format(current_service.email_from), - from_name=current_service.name - ) }} - {% endif %} +
+ Send yourself a test +
+

- You need + Make a CSV file with {{ template.placeholders|length + 1 }} {% if template.placeholders %} - columns + columns, {% else %} - column + column, {% endif %} - in your file, like this: + like this:

{% call(item, row_number) list_table( diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html index 7863ac383..77d67cc07 100644 --- a/app/templates/views/templates/_template.html +++ b/app/templates/views/templates/_template.html @@ -10,22 +10,21 @@ ) }} {% elif 'sms' == template.template_type %} {{ sms_message( - template.formatted_as_markup, - name=template.name if show_title else None - ) }} + template.formatted_as_markup, + name=template.name if show_title else None + ) }} {% endif %}
{% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %} - Send from a CSV file - Send yourself a test - {% endif %} - {% if current_user.has_permissions(permissions=['manage_api_keys']) %} - API integration + + Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }} + {% endif %} {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %} Edit template {% endif %} + API info
\ No newline at end of file diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html index 8a6ec558b..4257761f6 100644 --- a/app/templates/views/templates/template.html +++ b/app/templates/views/templates/template.html @@ -14,15 +14,14 @@

{{ template.name }}

- {% include 'views/templates/_template.html' %} + {% with show_title=False %} + {% include 'views/templates/_template.html' %} + {% endwith %}
-

- - All - {{ 'email' if 'email' == template.template_type else 'text message' }} - templates - -

+ {{ page_footer( + secondary_link=url_for('.choose_template', service_id=current_service.id, template_type=template.template_type), + secondary_link_text='All {} templates'.format('email' if 'email' == template.template_type else 'text message') + ) }} {% endblock %} diff --git a/docs/index.md b/docs/index.md index 017ba4446..d639967b8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -158,7 +158,7 @@ where: * `to` is the phone number (required) * `template` is the template ID to send (required) - **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates**, click on **Edit template** and recover the template id from the url eg `/templates//edit` + **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates** or **Email templates** and click on **API info**. * `personalisation` (optional) specifies the values for the placeholders in your templates diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py index 07ea44e60..79512cde4 100644 --- a/tests/app/main/views/test_send.py +++ b/tests/app/main/views/test_send.py @@ -419,10 +419,6 @@ def test_route_choose_template_send_messages_permissions(mocker, "main.send_messages", service_id=service_one['id'], template_id=template_id) in page - assert url_for( - "main.send_message_to_self", - service_id=service_one['id'], - template_id=template_id) in page assert url_for( "main.edit_service_template", service_id=service_one['id'], From 8d3fa79180d7cd548e3aa105ab2da23980d84b23 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 19 Apr 2016 15:07:49 +0100 Subject: [PATCH 2/2] Reorder navigation to put emails before SMS Elsewhere (eg the dashboard, the activity page) we have email first. Emails are also anticipated to be slightly more popular in terms of the number of services sending them. Therefore it makes sense to have emails first in the main navigation. --- app/templates/main_nav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html index a9685cec1..901a4ad7f 100644 --- a/app/templates/main_nav.html +++ b/app/templates/main_nav.html @@ -7,8 +7,8 @@
  • Activity
    • {% endif %} {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %} -
  • Text message templates
  • Email templates
    • +
  • Text message templates
    • {% endif %} {% if current_user.has_permissions(['manage_users', 'manage_settings'], admin_override=True) %}
  • Team members