From dfcfe6a91e196a921bd0ce26f9dac29ea42d3dfd Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 13 Mar 2017 10:55:15 +0000 Subject: [PATCH] =?UTF-8?q?Add=20multiple=20=E2=80=98edit=E2=80=99=20links?= =?UTF-8?q?=20for=20letter=20templates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Letter templates have (or will have) multiple different editable regions. I think that the most intuitive way for this to work is to have - an edit link for each of these areas - positioned next to the thing to be edited Again, this isn’t fully hooked up, but since no-one is using letters live yet this is a good way of getting research feedback and pointing towards where we want the feature to go. Uses percentages for the positioning so that the alignment is maintained on mobile. --- .../stylesheets/components/sms-message.scss | 4 +- app/assets/stylesheets/main.scss | 1 + app/assets/stylesheets/views/template.scss | 41 +++++++++++++++++++ app/main/forms.py | 13 +++++- app/templates/views/send-test.html | 10 ++++- app/templates/views/templates/_template.html | 25 ++++------- app/templates/views/templates/choose.html | 2 +- tests/app/main/views/test_templates.py | 3 +- 8 files changed, 75 insertions(+), 24 deletions(-) create mode 100644 app/assets/stylesheets/views/template.scss diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index fda6d1116..9b260cf9d 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -2,9 +2,9 @@ .sms-message-wrapper { width: 100%; - max-width: 410px; + max-width: 450px; box-sizing: border-box; - padding: $gutter-half; + padding: $gutter-half $gutter-half $gutter-half $gutter-half; background: $panel-colour; border: 1px solid $panel-colour; border-radius: 5px; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index f469fb257..7cf0c200d 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -66,6 +66,7 @@ $path: '/static/images/'; @import 'views/users'; @import 'views/api'; @import 'views/product-page'; +@import 'views/template'; // TODO: break this up @import 'app'; diff --git a/app/assets/stylesheets/views/template.scss b/app/assets/stylesheets/views/template.scss new file mode 100644 index 000000000..93ca1aea8 --- /dev/null +++ b/app/assets/stylesheets/views/template.scss @@ -0,0 +1,41 @@ +.template-container { + position: relative; +} + +%edit-template-link, +.edit-template-link { + + @include core-19; + position: absolute; + background: $link-colour; + color: $white; + padding: 10px $gutter-half; + z-index: 10000; + + &:link, &:visited { + color: $white; + } + + &:hover { + color: $light-blue-25; + } + +} + +.edit-template-link-letter-contact { + @extend %edit-template-link; + right: -25px; + top: 13.3%; // align to top of contact block +} + +.edit-template-link-letter-address { + @extend %edit-template-link; + top: 16.5%; // 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 + left: -5px; +} diff --git a/app/main/forms.py b/app/main/forms.py index 74c427370..cb5c9943a 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -288,7 +288,18 @@ class EmailTemplateForm(BaseTemplateForm): class LetterTemplateForm(EmailTemplateForm): - pass + + subject = TextAreaField( + u'Title', + validators=[DataRequired(message="Can’t be empty")]) + + template_content = TextAreaField( + u'Body', + validators=[ + DataRequired(message="Can’t be empty"), + NoCommasInPlaceHolders() + ] + ) class ForgotPasswordForm(Form): diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html index 333c65cdb..53e0a515f 100644 --- a/app/templates/views/send-test.html +++ b/app/templates/views/send-test.html @@ -13,11 +13,17 @@ {% block maincolumn_content %} +

{% if request.args['help'] %} -

Example text message

+ Example text message {% else %} -

Send yourself a test

+ {% if template.template_type == 'letter' %} + Generate preview + {% else %} + Send yourself a test + {% endif %} {% endif %} + {{ template|string }} diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html index 7e125fcab..f7c05eac9 100644 --- a/app/templates/views/templates/_template.html +++ b/app/templates/views/templates/_template.html @@ -1,7 +1,7 @@
{% if template._template.archived %} -
- This template was deleted
{{ template._template.updated_at|format_date_normal }} +

+ This template was deleted {{ template._template.updated_at|format_datetime_relative }}.

{% else %}
@@ -30,22 +30,13 @@ {% endif %}
- {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %} -

- - Upload recipients - -   - - {{ 'Generate preview' if template.template_type == 'letter' else 'Send yourself a test' }} - -

- {% endif %} - {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %} - Edit - {% endif %} {% endif %}
-
+
+ {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) and template.template_type == 'letter' %} + Edit + Edit + Edit + {% endif %} {{ template|string }}
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html index a4f92ef11..ad7381388 100644 --- a/app/templates/views/templates/choose.html +++ b/app/templates/views/templates/choose.html @@ -64,7 +64,7 @@

{{ template.name }}

-

+

{{ message_count_label(1, template.template_type, suffix='')|capitalize }} template {% if template.get('updated_at', None) %}  Last edited {{ template.get('updated_at', None)|format_date_short }} diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py index 13aee7319..06313725d 100644 --- a/tests/app/main/views/test_templates.py +++ b/tests/app/main/views/test_templates.py @@ -564,10 +564,11 @@ def test_should_show_page_for_a_deleted_template( assert response.status_code == 200 content = response.get_data(as_text=True) + page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser') assert url_for("main.edit_service_template", service_id=fake_uuid, template_id=fake_uuid) not in content assert url_for("main.send_from_api", service_id=fake_uuid, template_id=fake_uuid) not in content assert url_for("main.send_test", service_id=fake_uuid, template_id=fake_uuid) not in content - assert "This template was deleted
1 January 2016" in content + assert page.select('p.hint')[0].text.strip() == 'This template was deleted today at 3:00pm.' mock_get_deleted_template.assert_called_with(service_id, template_id)