Add multiple ‘edit’ links for letter templates

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.

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;

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';

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;
+}

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):

app/templates/views/send-test.html

@@ -13,11 +13,17 @@
 
 {% block maincolumn_content %}
 
+  <h1 class="heading-large">
   {% if request.args['help'] %}
-    <h1 class="heading-large">Example text message</h1>
+    Example text message
   {% else %}
-    <h1 class="heading-large">Send yourself a test</h1>
+    {% if template.template_type == 'letter' %}
+      Generate preview
+    {% else %}
+      Send yourself a test
+    {% endif %}
   {% endif %}
+  </h1>
 
   {{ template|string }}
 

app/templates/views/templates/_template.html

@@ -1,7 +1,7 @@
 <div class="column-whole">
   {% if template._template.archived %}
-    <div class="message-updated-at">
-      This template was deleted<br/>{{ template._template.updated_at|format_date_normal }}
+    <p class="hint">
+      This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
     </p>
   {% else %}
     <div class="bottom-gutter-2-3">
@@ -30,22 +30,13 @@
         {% endif %}
       </div>
     </div>
-    {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
-      <p class="bottom-gutter-1-2">
-        <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="heading-medium">
-          Upload recipients
-        </a>
-        &emsp;
-        <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}" class="heading-medium">
-          {{ 'Generate preview' if template.template_type == 'letter' else 'Send yourself a test' }}
-        </a>
-      </p>
-    {% endif %}
-    {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
-       <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="edit-template-link">Edit</a>
-    {% endif %}
   {% endif %}
 </div>
-<div class="column-whole">
+<div class="column-whole template-container">
+  {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) and template.template_type == 'letter' %}
+    <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="edit-template-link-letter-body">Edit</a>
+    <a href="{{ url_for(".service_set_letter_contact_block", service_id=current_service.id) }}" class="edit-template-link-letter-contact">Edit</a>
+    <a href="#" class="edit-template-link-letter-address">Edit</a>
+  {% endif %}
   {{ template|string }}
 </div>

app/templates/views/templates/choose.html

@@ -64,7 +64,7 @@
           <h2 class="message-name">
             <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
           </h2>
-          <p class="hint">
+          <p class="hint bottom-gutter-1-2">
             {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
             {% if template.get('updated_at', None) %}
               &emsp;Last edited {{ template.get('updated_at', None)|format_date_short }}

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<br/>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)