From 51f6450e5da9a321bc77a8377327c89f8c1f54d0 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 2 Jun 2016 10:40:17 +0100
Subject: [PATCH] Make placeholder look more editable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Depends on:
- [ ] https://github.com/alphagov/notifications-utils/pull/40

In research we’ve noticed two problems with the appearance of
placeholders:

1. We are inconsistent about when we display the ((double brackets)).
   Sometimes we show them, sometimes we don’t. This doesn’t help user’s
   understanding about where the column names in their CSV file come
   from, or how they can edit the template to fix any errors.

2. Because they look so different from normal `<textarea>` text, it’s
   not immediately obvious that they can be edited just like normal
   text. They look more like something that can be dragged/inserted.

So this commit:

1. Makes the brackets always-visible.

2. Makes the text colour of the placeholder `$text-colour`, and only
   highlights the name of the ‘variable’, not the brackets themselves.
---
 app/assets/javascripts/highlightTags.js       | 12 +++--
 .../stylesheets/components/placeholder.scss   | 26 ++++++++---
 .../stylesheets/components/textbox.scss       | 44 ++-----------------
 app/templates/components/email-message.html   |  2 +-
 app/templates/components/sms-message.html     |  2 +-
 requirements.txt                              |  2 +-
 6 files changed, 33 insertions(+), 55 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index 62b9ba736..97ab56bfb 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -15,16 +15,14 @@
         .wrap(`
           <div class='textbox-highlight-wrapper' />
         `)
-        .after(this.$backgroundMaskForeground = $(`
+        .after(this.$background = $(`
           <div class="textbox-highlight-background" aria-hidden="true" />
-          <div class="textbox-highlight-mask" aria-hidden="true" />
-          <div class="textbox-highlight-foreground" aria-hidden="true" />
         `))
         .on("input", this.update);
 
       this.initialHeight = this.$textbox.height();
 
-      this.$backgroundMaskForeground.css({
+      this.$background.css({
         'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
@@ -37,15 +35,15 @@
     this.resize = () => this.$textbox.height(
       Math.max(
         this.initialHeight,
-        this.$backgroundMaskForeground.outerHeight()
+        this.$background.outerHeight()
       )
     );
 
     this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
 
-    this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
+    this.replacePlaceholders = () => this.$background.html(
       this.escapedMessage().replace(
-        tagPattern, match => `<span class='tag'>${match}</span>`
+        tagPattern, match => `<span class='placeholder'>${match}</span>`
       )
     );
 
diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss
index c0ed059cb..e4b6b9fb9 100644
--- a/app/assets/stylesheets/components/placeholder.scss
+++ b/app/assets/stylesheets/components/placeholder.scss
@@ -1,8 +1,24 @@
+%placeholder,
 .placeholder {
+
   display: inline;
-  background: $light-blue;
-  color: $white;
-  white-space: nowrap;
-  padding: 0 5px;
-  border-radius: 3px;
+  background: $yellow;
+  color: $text-colour;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  border-radius: 20px;
+  box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
+
+  .sms-message-wrapper & {
+    box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
+  }
+
+}
+
+.placeholder-no-brackets {
+  @extend %placeholder;
+  padding-left: 3px;
+  padding-right: 3px;
+  border-radius: 1px;
+  box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
 }
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 2aad83604..27ee0d1f8 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -26,61 +26,25 @@
     line-height: 1.6;
   }
 
-  &-background,
-  &-foreground,
-  &-mask {
+  &-background {
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
     color: transparent;
     white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
     border: 2px solid transparent;
     padding-bottom: $gutter-half;
-  }
-
-  &-background {
-
     z-index: 10;
 
-    .tag {
-      background: $light-blue;
-      border-radius: 3px;
+    .placeholder {
       color: transparent;
-      display: inline;
     }
 
   }
 
-  &-mask {
-
-    z-index: 30;
-
-    .tag {
-      color: $white;
-      text-shadow: 0 1px 0 $light-blue, 0 -1px 0 $light-blue;
-      position: relative;
-      display: inline;
-      overflow: hidden;
-    }
-
-  }
-
-  &-foreground {
-
-    z-index: 40;
-
-    .tag {
-      color: transparent;
-      border-radius: 3px;
-      overflow: hidden;
-      display: inline;
-      box-shadow: inset 0.75em 0 0 0 $tag-background, inset -0.75em 0 0 0 $tag-background;
-    }
-
-  }
-
-
 }
 
 .textbox-help-link {
diff --git a/app/templates/components/email-message.html b/app/templates/components/email-message.html
index c7e7db0ae..51a1cffae 100644
--- a/app/templates/components/email-message.html
+++ b/app/templates/components/email-message.html
@@ -25,7 +25,7 @@
               <th>To</th>
               <td>
                 {% if show_placeholder_for_recipient %}
-                  <span class="placeholder">
+                  <span class="placeholder-no-brackets">
                     email address
                   </span>
                 {% else %}
diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html
index 334e3d0cd..d062a479f 100644
--- a/app/templates/components/sms-message.html
+++ b/app/templates/components/sms-message.html
@@ -13,7 +13,7 @@
     <p class="sms-message-recipient">
       To:
       {% if show_placeholder_for_recipient %}
-        <span class="placeholder">
+        <span class="placeholder-no-brackets">
           phone number
         </span>
       {% else %}
diff --git a/requirements.txt b/requirements.txt
index c33f0f1b0..a633bd6b0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -18,4 +18,4 @@ pytz==2016.4
 
 git+https://github.com/alphagov/notifications-python-client.git@1.0.0#egg=notifications-python-client==1.0.0
 
-git+https://github.com/alphagov/notifications-utils.git@6.1.0#egg=notifications-utils==6.1.0
+git+https://github.com/alphagov/notifications-utils.git@6.2.0#egg=notifications-utils==6.2.0