From 644d3bef3f07a7baa9077cc44a9329650620a506 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 14:49:58 +0000 Subject: [PATCH 1/6] Create attachment done page --- app/assets/sass/application.scss | 4 ++++ app/views/attachment-done.html | 22 ++++++++++++++++++++++ app/views/attachment.html | 2 +- 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 app/views/attachment-done.html diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 230c3d9..1ba7ec5 100755 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -131,6 +131,10 @@ $govuk-gutter-half: ($govuk-gutter / 2); position: relative; } +.govuk-c-button { + color: $govuk-white !important; +} + .contextual-guidance { @include govuk-responsive-padding($govuk-spacing-responsive-5, "top"); background: #fff; diff --git a/app/views/attachment-done.html b/app/views/attachment-done.html new file mode 100644 index 0000000..040d351 --- /dev/null +++ b/app/views/attachment-done.html @@ -0,0 +1,22 @@ +{% extends "layout.html" %} +{% block page_title %}Attachment added{% endblock %} + +{% block content %} + +Back +
+
+
+

+ You’ve added an attachment +

+ +

Now you can insert it in the copy:

+ Insert in the copy +

+ Go back to draft +

+
+
+
+{% endblock %} diff --git a/app/views/attachment.html b/app/views/attachment.html index 8fc9c3a..c63bfc5 100644 --- a/app/views/attachment.html +++ b/app/views/attachment.html @@ -18,7 +18,7 @@ Back
-
+

From 4e18d4bd398ffc43891b33de1de2d12b182d7743 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 15:45:10 +0000 Subject: [PATCH 2/6] Create attachment insert --- .../javascripts/modules/attachment-insert.js | 30 +++++++++++++++++++ app/assets/sass/application.scss | 12 ++++++++ app/views/attachment-done.html | 2 +- app/views/includes/attachment-list.html | 15 ++++++++++ app/views/includes/scripts.html | 1 + app/views/title-summary-body.html | 30 +++++++++++++++++++ 6 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/modules/attachment-insert.js create mode 100644 app/views/includes/attachment-list.html diff --git a/app/assets/javascripts/modules/attachment-insert.js b/app/assets/javascripts/modules/attachment-insert.js new file mode 100644 index 0000000..2288516 --- /dev/null +++ b/app/assets/javascripts/modules/attachment-insert.js @@ -0,0 +1,30 @@ +;(function (global) { + 'use strict' + + var GOVUK = global.GOVUK || {} + GOVUK.Modules = GOVUK.Modules || {} + + GOVUK.Modules.AttachmentInsert = function () { + this.start = function (element) { + element.on('click', '.js-attachment', insertAttachment); + + // https://stackoverflow.com/questions/11076975 + function insertAttachment(evt) { + evt.preventDefault(); + var markdown = $(this).data('markdown'); + var cursorPos = $('#body').prop('selectionStart'); + + if (cursorPos === 0 && $('#body').val().length > 0) { + cursorPos = $('#body').val().length; + } + + var v = $('#body').val(); + var textBefore = v.substring(0, cursorPos); + var textAfter = v.substring(cursorPos, v.length); + $('#body').val(textBefore + '\n' + markdown + textAfter); + } + } + } + + global.GOVUK = GOVUK +})(window) diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 1ba7ec5..e468a04 100755 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -135,6 +135,18 @@ $govuk-gutter-half: ($govuk-gutter / 2); color: $govuk-white !important; } +.inserts { + @include govuk-font-regular-19; + + background-color: $govuk-grey-4; + border: 2px solid $govuk-black; + border-bottom-color: $govuk-border-colour; + padding: 10px; + margin-bottom: -2px; + position: relative; + z-index: 1; +} + .contextual-guidance { @include govuk-responsive-padding($govuk-spacing-responsive-5, "top"); background: #fff; diff --git a/app/views/attachment-done.html b/app/views/attachment-done.html index 040d351..4ea0d87 100644 --- a/app/views/attachment-done.html +++ b/app/views/attachment-done.html @@ -12,7 +12,7 @@

Now you can insert it in the copy:

- Insert in the copy + Insert in the copy

Go back to draft

diff --git a/app/views/includes/attachment-list.html b/app/views/includes/attachment-list.html new file mode 100644 index 0000000..7f8942f --- /dev/null +++ b/app/views/includes/attachment-list.html @@ -0,0 +1,15 @@ +{% if attachment_count > 0 %} +
+ +
+{% endif %} diff --git a/app/views/includes/scripts.html b/app/views/includes/scripts.html index 960d64c..5602404 100755 --- a/app/views/includes/scripts.html +++ b/app/views/includes/scripts.html @@ -16,6 +16,7 @@ + {% if useAutoStoreData %} diff --git a/app/views/title-summary-body.html b/app/views/title-summary-body.html index 360cf31..9c095cc 100755 --- a/app/views/title-summary-body.html +++ b/app/views/title-summary-body.html @@ -15,6 +15,8 @@ {% set prefix = 'drug-safety-update' %} {% endif %} +{% set attachment_count = data['attachment-count'] | int %} + Back
@@ -117,6 +119,13 @@

Writing guidance

+ + {% if attachment_count > 0 %} +
+ Insert attachment +
+ {% endif %} +

@@ -149,5 +158,26 @@

Markdown guidance

{% endif %}
+ + +
+

+ Insert attachment +

+
+

Select an attachment

+ {% include "includes/attachment-list.html" %} + +

Or insert a new one

+
+
+ Add attachment + +

+ Cancel +

+
+
+
{% endblock %} From d4ca50f90395682cf6dbacc4b9ed9d7d8342fb9e Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 15:58:45 +0000 Subject: [PATCH 3/6] Include upload attachment form --- .../javascripts/modules/attachment-insert.js | 14 +++++++++ app/views/title-summary-body.html | 30 +++++++++++++++++-- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/modules/attachment-insert.js b/app/assets/javascripts/modules/attachment-insert.js index 2288516..3a3c4a6 100644 --- a/app/assets/javascripts/modules/attachment-insert.js +++ b/app/assets/javascripts/modules/attachment-insert.js @@ -7,6 +7,8 @@ GOVUK.Modules.AttachmentInsert = function () { this.start = function (element) { element.on('click', '.js-attachment', insertAttachment); + element.on('click', '.js-upload-attachment', showForm); + element.on('click', '.js-upload-close', hideForm); // https://stackoverflow.com/questions/11076975 function insertAttachment(evt) { @@ -23,6 +25,18 @@ var textAfter = v.substring(cursorPos, v.length); $('#body').val(textBefore + '\n' + markdown + textAfter); } + + function showForm(evt) { + evt.preventDefault(); + element.find('.js-upload-form').show(); + element.find('.js-select-form').hide(); + } + + function hideForm(evt) { + evt.preventDefault(); + element.find('.js-upload-form').hide(); + element.find('.js-select-form').show(); + } } } diff --git a/app/views/title-summary-body.html b/app/views/title-summary-body.html index 9c095cc..2dbb752 100755 --- a/app/views/title-summary-body.html +++ b/app/views/title-summary-body.html @@ -160,7 +160,7 @@

Markdown guidance

-
+

Insert attachment

@@ -171,13 +171,39 @@

Select an attachment

Or insert a new one

- Add attachment + Add attachment

Cancel

+ {% endblock %} From b22057519cd360a9a136cfa50a5f75f3d5590524 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 16:01:29 +0000 Subject: [PATCH 4/6] Handle focus better --- app/assets/javascripts/modules/attachment-insert.js | 2 +- app/assets/javascripts/vendor/modal-dialog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/modules/attachment-insert.js b/app/assets/javascripts/modules/attachment-insert.js index 3a3c4a6..318fc67 100644 --- a/app/assets/javascripts/modules/attachment-insert.js +++ b/app/assets/javascripts/modules/attachment-insert.js @@ -23,7 +23,7 @@ var v = $('#body').val(); var textBefore = v.substring(0, cursorPos); var textAfter = v.substring(cursorPos, v.length); - $('#body').val(textBefore + '\n' + markdown + textAfter); + $('#body').val(textBefore + '\n' + markdown + textAfter).focus(); } function showForm(evt) { diff --git a/app/assets/javascripts/vendor/modal-dialog.js b/app/assets/javascripts/vendor/modal-dialog.js index 62b78fc..8942618 100755 --- a/app/assets/javascripts/vendor/modal-dialog.js +++ b/app/assets/javascripts/vendor/modal-dialog.js @@ -62,7 +62,7 @@ setFocusOnLastFocusedEl: function () { if (GOVUK.modalDialog.$lastFocusedEl) { window.setTimeout(function () { - GOVUK.modalDialog.$lastFocusedEl.focus() + //GOVUK.modalDialog.$lastFocusedEl.focus() }, 0) } }, From aa1520f262627938bb5f179bd38223f60d0a5499 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 16:01:35 +0000 Subject: [PATCH 5/6] Add fake image insert --- app/views/title-summary-body.html | 1 + 1 file changed, 1 insertion(+) diff --git a/app/views/title-summary-body.html b/app/views/title-summary-body.html index 2dbb752..e7fa022 100755 --- a/app/views/title-summary-body.html +++ b/app/views/title-summary-body.html @@ -123,6 +123,7 @@

Writing guidance

{% if attachment_count > 0 %}
Insert attachment + Insert image
{% endif %} From 60e22776c1d6d6219a7054eb36d771f84cc7e7a8 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Tue, 20 Feb 2018 16:04:04 +0000 Subject: [PATCH 6/6] Better linking to label than field --- app/views/attachment-done.html | 2 +- app/views/title-summary-body.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/attachment-done.html b/app/views/attachment-done.html index 4ea0d87..c638e25 100644 --- a/app/views/attachment-done.html +++ b/app/views/attachment-done.html @@ -12,7 +12,7 @@

Now you can insert it in the copy:

- Insert in the copy + Insert in the copy

Go back to draft

diff --git a/app/views/title-summary-body.html b/app/views/title-summary-body.html index e7fa022..178724f 100755 --- a/app/views/title-summary-body.html +++ b/app/views/title-summary-body.html @@ -116,7 +116,7 @@

Writing guidance

-