From db39763758e8cd0a7df2e50951bcaa66e514cffc Mon Sep 17 00:00:00 2001 From: Rebecca Law Date: Thu, 6 Apr 2017 10:22:20 +0100 Subject: [PATCH 01/17] Refactor s3upload. s3upload now calls into the common notifications-utils method to upload a s3 file. --- app/main/uploader.py | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/app/main/uploader.py b/app/main/uploader.py index cc1f708c3..4c00fbce5 100644 --- a/app/main/uploader.py +++ b/app/main/uploader.py @@ -2,37 +2,18 @@ import uuid import botocore from boto3 import resource from flask import current_app +from notifications_utils.s3 import s3upload as utils_s3upload FILE_LOCATION_STRUCTURE = 'service-{}-notify/{}.csv' def s3upload(service_id, filedata, region): - s3 = resource('s3') - bucket_name = current_app.config['CSV_UPLOAD_BUCKET_NAME'] - contents = filedata['data'] - - exists = True - try: - s3.meta.client.head_bucket( - Bucket=bucket_name) - except botocore.exceptions.ClientError as e: - error_code = int(e.response['Error']['Code']) - if error_code == 404: - exists = False - else: - current_app.logger.error( - "Unable to create s3 bucket {}".format(bucket_name)) - raise e - - if not exists: - s3.create_bucket(Bucket=bucket_name, - CreateBucketConfiguration={'LocationConstraint': region}) - upload_id = str(uuid.uuid4()) upload_file_name = FILE_LOCATION_STRUCTURE.format(service_id, upload_id) - key = s3.Object(bucket_name, upload_file_name) - key.put(Body=contents, ServerSideEncryption='AES256') - + utils_s3upload(filedata=filedata['data'], + region=region, + bucket_name=current_app.config['CSV_UPLOAD_BUCKET_NAME'], + file_location=upload_file_name) return upload_id From b2088762c37717e69ca59ab6e45d9054390d772f Mon Sep 17 00:00:00 2001 From: Rebecca Law Date: Thu, 6 Apr 2017 10:24:23 +0100 Subject: [PATCH 02/17] Update requirements with notifications-utils version --- requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements.txt b/requirements.txt index f186ab97a..89858964c 100644 --- a/requirements.txt +++ b/requirements.txt @@ -31,4 +31,4 @@ notifications-python-client>=3.1,<3.2 awscli>=1.11,<1.12 awscli-cwlogs>=1.4,<1.5 -git+https://github.com/alphagov/notifications-utils.git@14.0.0#egg=notifications-utils==14.0.0 +git+https://github.com/alphagov/notifications-utils.git@14.0.0#egg=notifications-utils==15.0.1 From faad2f5a0947b50f277b3b49f01ca53358ab6d2b Mon Sep 17 00:00:00 2001 From: Rebecca Law Date: Thu, 6 Apr 2017 10:26:31 +0100 Subject: [PATCH 03/17] correct version number in requirements. --- requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements.txt b/requirements.txt index 89858964c..a1642c343 100644 --- a/requirements.txt +++ b/requirements.txt @@ -31,4 +31,4 @@ notifications-python-client>=3.1,<3.2 awscli>=1.11,<1.12 awscli-cwlogs>=1.4,<1.5 -git+https://github.com/alphagov/notifications-utils.git@14.0.0#egg=notifications-utils==15.0.1 +git+https://github.com/alphagov/notifications-utils.git@15.0.1#egg=notifications-utils==15.0.1 From 7904256bce5531269c3fc8227ea9432d3344baaa Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 7 Apr 2017 18:27:00 +0100 Subject: [PATCH 04/17] Increase width of edit letter textbox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The textbox we use for editing letters is the same size as that for email and text messages. This is problematic because: - it feels quite cramped – letters will often be longer than emails or text messages - it has a narrower line length than the printed letters (which is a constant, unlike for emails and text messages) The printed letters have a line length of 137.5mm and a font size of 12.5pt. 137.5mm = 5.41 inches = 389.7pt line length 389.7pt/12.5pt = 31.8em So we could make the box 31.8em wide, but then it wouldn’t align to our grid. Our grid splits the page into quarters initially because this is how wide the navigation is. So this means that we can use grid units of 1/multiples of four, eg 1/4, 1/8, 1/12, 1/16, etc. But the smaller the denominator, the less effective the grid will be – it gets closer to no grid at all. After having a play around, 5/8 of the page looks closest to 31.8em. Since the main column of the page is 3/4, we set a column of 5/6 width inside that, which equals 5/8 of the total page. --- app/assets/stylesheets/_grids.scss | 4 ++++ app/templates/views/edit-letter-template.html | 4 +--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss index afd38dc71..c7becdee2 100644 --- a/app/assets/stylesheets/_grids.scss +++ b/app/assets/stylesheets/_grids.scss @@ -18,6 +18,10 @@ @include grid-column(1/8); } +.column-five-eighths { + @include grid-column(5/8); +} + .column-seven-eighths { @include grid-column(7/8); } diff --git a/app/templates/views/edit-letter-template.html b/app/templates/views/edit-letter-template.html index a44895432..5cb345e55 100644 --- a/app/templates/views/edit-letter-template.html +++ b/app/templates/views/edit-letter-template.html @@ -14,11 +14,9 @@
-
+
{{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }} {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }} -
-
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }} {{ page_footer( 'Save', From 0ba7d1109761198be1a645b294e3f37926a9b774 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Apr 2017 09:28:23 +0100 Subject: [PATCH 05/17] Fix alignment of edit letter links MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Not sure how these got out of line (maybe when we brought the date into the left-hand text area). But this commit updates the percentages to match the comments. This is so it’s clear from the position of the link which part of the letter you’re editing. --- app/assets/stylesheets/views/template.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/views/template.scss b/app/assets/stylesheets/views/template.scss index 93ca1aea8..a059504e8 100644 --- a/app/assets/stylesheets/views/template.scss +++ b/app/assets/stylesheets/views/template.scss @@ -30,12 +30,12 @@ .edit-template-link-letter-address { @extend %edit-template-link; - top: 16.5%; // align bottom edge to bottom of address + top: 14.65%; // align bottom edge to bottom of address left: -5px; } .edit-template-link-letter-body { @extend %edit-template-link; - top: 33.3%; // aligns to top of subject + top: 38.5%; // aligns to top of subject left: -5px; } From 80898e350e6a32b56634b204e62bc37cfddc16d9 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Apr 2017 10:28:27 +0100 Subject: [PATCH 06/17] More tweaks to width of elements - SMS message preview gets slightly wider so it lines up with a 4/8 column - Edit email box gets wider to match more closely the width of the previewed and delivered emails --- app/assets/stylesheets/components/sms-message.scss | 2 +- app/templates/views/edit-email-template.html | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index 9b260cf9d..a5a79e6d6 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -2,7 +2,7 @@ .sms-message-wrapper { width: 100%; - max-width: 450px; + max-width: 464px; box-sizing: border-box; padding: $gutter-half $gutter-half $gutter-half $gutter-half; background: $panel-colour; diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index 33790e878..0319820a1 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -15,11 +15,9 @@
-
+
{{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }} {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }} -
-
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }} {% if current_user.has_permissions([], admin_override=True) %} {{ radios(form.process_type) }} From 80a82cfdab9eae0a17beb3de05a931be6d2e79f9 Mon Sep 17 00:00:00 2001 From: Rebecca Law Date: Mon, 10 Apr 2017 11:43:45 +0100 Subject: [PATCH 07/17] Update notifications-utils to the latest version --- requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements.txt b/requirements.txt index a1642c343..3442d47e3 100644 --- a/requirements.txt +++ b/requirements.txt @@ -31,4 +31,4 @@ notifications-python-client>=3.1,<3.2 awscli>=1.11,<1.12 awscli-cwlogs>=1.4,<1.5 -git+https://github.com/alphagov/notifications-utils.git@15.0.1#egg=notifications-utils==15.0.1 +git+https://github.com/alphagov/notifications-utils.git@15.0.3#egg=notifications-utils==15.0.3 From bb9fe35ab5a720074acb4351f0363522ed13f752 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:25:14 +0000 Subject: [PATCH 08/17] Upgrade GOV.UK toolkit, template and elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We should make sure that the parts of the UI that we inherit from these packages are kept up to date. This commit: - updates each dependency to the latest version - makes patch (bug fixing) version bumps automatic because - it makes less work for us - we don’t get so far behind - we should be able to trust dependencies that are coming from other teams in this building Full changes that this brings in: GOV.UK Template --- - Increase skiplink colour contrast ([GOV.UK Template PR #263](https://github.com/alphagov/govuk_template/pull/263)) GOV.UK Elements --- - Too many to show – see https://github.com/alphagov/govuk_elements/compare/v1.1.1...v3.0.2#diff-4ac32a78649ca5bdd8e0ba38b7006a1e GOV.UK Frontend Toolkit --- - Too many to show – see https://github.com/alphagov/govuk_frontend_toolkit/compare/v4.6.0...v5.2.0#diff-4ac32a78649ca5bdd8e0ba38b7006a1e --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0f67bdf70..5e3e3bf98 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,9 @@ "babel-core": "6.3.26", "babel-preset-es2015": "6.3.13", "diff-dom": "2.1.0", - "govuk-elements-sass": "1.1.1", - "govuk_frontend_toolkit": "4.6.0", - "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.19.1/jinja_govuk_template-0.19.1.tgz", + "govuk-elements-sass": "3.0.x", + "govuk_frontend_toolkit": "5.2.x", + "govuk_template_jinja": "0.19.x", "gulp": "3.9.0", "gulp-add-src": "0.2.0", "gulp-babel": "6.1.1", From e62bd2a0188b39a490103887b88ddec13755f09d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:24:54 +0000 Subject: [PATCH 09/17] Remove override to make beta banner blue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the beta bar was orange, which we didn’t want. So we wrote some SASS to make it blue. Now that GOV.UK Frontend Toolkit makes it blue, we can remove this SASS. See https://github.com/alphagov/govuk_frontend_toolkit/pull/370 --- app/assets/stylesheets/app.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 5d6ccea31..02887fd3f 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -46,8 +46,7 @@ } .beta-badge { - @include phase-tag(beta); - background: $govuk-blue; + @include phase-tag(); margin: 10px 0 0 0; } From 31d03acc1142612857069803aef8d9f805db39d2 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:25:05 +0000 Subject: [PATCH 10/17] Remove external link styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The external link icon, and associated mixin, were deprecated in https://github.com/alphagov/govuk_frontend_toolkit/pull/293 This means we can’t and shouldn’t use them any more. --- app/assets/stylesheets/app.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 02887fd3f..9b467299d 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -150,14 +150,6 @@ td { margin-bottom: 5px; } -a[rel='external'] { - @include external-link-default; - @include external-link-16; - @include media(tablet) { - @include external-link-19; - } -} - .hint { color: $secondary-text-colour; } From a592898eff7dcb6e3090612675241bad1acf61d6 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:36:17 +0000 Subject: [PATCH 11/17] Make radio select work w/ new checkboxes/radios MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons --- app/assets/javascripts/main.js | 2 +- app/assets/javascripts/radioSelect.js | 50 ++++++++++-------- .../stylesheets/components/radio-select.scss | 20 ++++--- app/templates/components/checkbox.html | 39 ++++++-------- app/templates/components/radios.html | 52 +++++++++++-------- .../views/manage-users/permissions.html | 8 +-- gulpfile.babel.js | 1 - 7 files changed, 91 insertions(+), 81 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index a6153dcbc..4f17b03fa 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -2,7 +2,7 @@ $(() => $("time.timeago").timeago()); $(() => GOVUK.modules.start()); -$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input')); +$(() => new GOVUK.SelectionButtons('.block-label input')); $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus')); diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js index 8d359cc7d..62fc2b938 100644 --- a/app/assets/javascripts/radioSelect.js +++ b/app/assets/javascripts/radioSelect.js @@ -5,54 +5,57 @@ let states = { 'initial': Hogan.compile(`
- +
+ + +
{{#categories}} - + {{/categories}}
`), 'choose': Hogan.compile(`
- +
+ + +
{{#choices}} - +
+ + +
{{/choices}}
`), 'chosen': Hogan.compile(`
- +
+ + +
{{#choices}} -
- +
`) }; let focusSelected = function() { setTimeout( - () => $('[type=radio]:checked').parent('label').blur().trigger('focus').addClass('selected'), + () => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'), 10 ); }; @@ -62,13 +65,16 @@ this.start = function(component) { let $component = $(component); - let render = (state, data) => $component.html(states[state].render(data)); + let render = (state, data) => { + $component.html(states[state].render(data)); + new GOVUK.SelectionButtons('.block-label input'); + }; let choices = $('label', $component).toArray().map(function(element) { let $element = $(element); return { 'id': $element.attr('for'), 'label': $.trim($element.text()), - 'value': $element.find('input').attr('value') + 'value': $element.prev('input').attr('value') }; }); let categories = $component.data('categories').split(','); @@ -95,7 +101,7 @@ if (!event.pageX) return true; event.preventDefault(); - let value = $(this).attr('value'); + let value = $('input', this).attr('value'); render('chosen', { 'choices': choices.filter( element => element.value == value diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss index 1440d0ad6..dc48fbff6 100644 --- a/app/assets/stylesheets/components/radio-select.scss +++ b/app/assets/stylesheets/components/radio-select.scss @@ -5,19 +5,25 @@ display: inline-block; vertical-align: top; - .block-label { + .multiple-choice { margin-right: 5px; - padding-right: $gutter - 10px; + padding-right: 10px; padding-left: 54px - 10px; } } - .tertiary-button { + .js-reset-button, + .js-category-button { + background: none; + text-decoration: underline; + color: $link-colour; + //font-weight: bold; + border: none; display: inline-block; vertical-align: top; width: auto; - padding: 20px $gutter-half 15px $gutter-half; + padding: 7px 20px 7px 10px; margin-right: 5px; } @@ -26,12 +32,12 @@ height: 60px; overflow: visible; - .block-label { + .multiple-choice { display: none; } - .js-block-label { - display: inline-block; + .js-multiple-choice { + display: block; } } diff --git a/app/templates/components/checkbox.html b/app/templates/components/checkbox.html index 3e71a949c..a0edb9c65 100644 --- a/app/templates/components/checkbox.html +++ b/app/templates/components/checkbox.html @@ -1,29 +1,22 @@ {% macro checkbox( field, hint=False, - help_link=None, - help_link_text=None, - width='2-3', - suffix=None, - block=False + width='2-3' ) %} -
@@ -56,10 +58,12 @@
{% for option in field %} -
@@ -88,7 +92,7 @@ {% endif %} {% for value, option, checked in field.iter_choices() %} -
diff --git a/app/templates/views/manage-users/permissions.html b/app/templates/views/manage-users/permissions.html index 0c290f323..f96e9a3ba 100644 --- a/app/templates/views/manage-users/permissions.html +++ b/app/templates/views/manage-users/permissions.html @@ -4,9 +4,9 @@ Permissions - {{ checkbox(form.send_messages, block=True) }} - {{ checkbox(form.manage_service, block=True) }} - {{ checkbox(form.manage_api_keys, block=True) }} + {{ checkbox(form.send_messages) }} + {{ checkbox(form.manage_service) }} + {{ checkbox(form.manage_api_keys) }}
@@ -18,4 +18,4 @@
  • history of sent messages
  • who the other team members are
    • -
    \ No newline at end of file +
    diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 5c4a93783..667f55499 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -54,7 +54,6 @@ gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/ gulp.task('javascripts', () => gulp .src([ paths.toolkit + 'javascripts/govuk/modules.js', - paths.toolkit + 'javascripts/govuk/selection-buttons.js', paths.src + 'javascripts/detailsPolyfill.js', paths.src + 'javascripts/apiKey.js', paths.src + 'javascripts/autofocus.js', From 87c81c994f5f7b3ac3703130ebf319a13aecd492 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Apr 2017 14:51:32 +0100 Subject: [PATCH 12/17] Ensure disabled radio buttons are still legible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Elements CSS was making the `label` and `input` of disabled radio buttons `opacity: 0.5`. This was resulting in text that was: - too pale, especially where we were nesting 16px ‘hint’ text inside the label - waaaay too pale when inside a link inside the label This commit overrides elements to dim the disabled radio button by making it’s text colour grey, rather than making the whole thing semi-transparent. --- app/assets/stylesheets/app.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 9b467299d..3dbf6e416 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -247,10 +247,16 @@ details .arrow { margin-top: 5px; } -.block-label input[disabled] { - opacity: 0.5; -} - #content.override-elements-content { padding-bottom: 0; } + +.multiple-choice input:disabled+label { + opacity: 1; + color: $secondary-text-colour; + cursor: default; +} + +.multiple-choice input:disabled { + opacity: 0.5; +} From 8d5af476203274d3de36c8d42738e149af967d26 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Apr 2017 11:16:22 +0100 Subject: [PATCH 13/17] Change class names for validation errors in html Implements the class name changes detailed in: https://github.com/alphagov/govuk_elements/pull/405 --- app/assets/javascripts/main.js | 2 -- app/assets/stylesheets/main.scss | 2 +- app/templates/components/file-upload.html | 2 +- app/templates/components/list-entry.html | 2 +- app/templates/components/radios.html | 6 +++--- app/templates/components/textbox.html | 18 ++++++++++++++---- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 4f17b03fa..f5e930438 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -2,8 +2,6 @@ $(() => $("time.timeago").timeago()); $(() => GOVUK.modules.start()); -$(() => new GOVUK.SelectionButtons('.block-label input')); - $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus')); $(() => $('.banner-dangerous').eq(0).trigger('focus')); diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 7cf0c200d..9fa8df2be 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -24,7 +24,7 @@ $path: '/static/images/'; @import 'elements/elements-typography'; @import 'elements/forms'; @import 'elements/forms/form-validation'; -@import 'elements/forms/form-block-labels'; +@import 'elements/forms/form-multiple-choice'; @import 'elements/forms/form-validation'; @import 'elements/icons'; @import 'elements/layout'; diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html index f6ade8216..6cbb52e74 100644 --- a/app/templates/components/file-upload.html +++ b/app/templates/components/file-upload.html @@ -1,5 +1,5 @@ {% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %} - +