Merge pull request #647 from alphagov/placeholder-appearance

Make placeholders look more consistent and editable

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>`
       )
     );
 

app/assets/stylesheets/components/placeholder.scss

@@ -1,8 +1,24 @@
+%placeholder,
 .placeholder {
+
   display: inline;
-  background: $light-blue;
+  background: $yellow;
-  color: $white;
+  color: $text-colour;
-  white-space: nowrap;
+  overflow-wrap: break-word;
-  padding: 0 5px;
+  word-wrap: break-word;
-  border-radius: 3px;
+  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;
 }

app/assets/stylesheets/components/textbox.scss

@@ -26,61 +26,25 @@
     line-height: 1.6;
   }
 
-  &-background,
+  &-background {
-  &-foreground,
-  &-mask {
     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 {
+    .placeholder {
-      background: $light-blue;
-      border-radius: 3px;
       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 {

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 %}

app/templates/components/placeholder.html

@@ -1,3 +0,0 @@
-{% macro placeholder(variable) %}
-  <span class='placeholder'>{{variable}}</span>
-{% endmacro %}

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 %}

app/templates/views/check.html

@@ -3,7 +3,6 @@
 {% from "components/email-message.html" import email_message %}
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
-{% from "components/placeholder.html" import placeholder %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/list.html" import formatted_list %}

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