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") %}
- 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. -
- +
- {{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
- template.template_type
- ) -}}
-
-
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 %}
-
- - 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/