From eaa72074db38ad24702b77b9bdd6a912a3cdb9e2 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 30 Mar 2016 11:39:16 +0100 Subject: [PATCH] =?UTF-8?q?Enhance=20the=20=E2=80=98how=20to=20do=20placeh?= =?UTF-8?q?olders=E2=80=99=20hint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit makes the ‘how to do placeholders’ box part of the tour, with the same blue background. It also adds some Javascript enhancement so that: - it responds to the contents of the message template - has a ‘show me’ link which inserts ‘Dear ((name))’ into the template contents textbox We’ve found that this has helped people understnad what placeholders are, and how to do them. --- app/assets/javascripts/highlightTags.js | 42 ++++++++++++++++++- app/assets/stylesheets/components/banner.scss | 5 +++ .../stylesheets/components/textbox.scss | 2 +- .../stylesheets/views/edit-template.scss | 24 ++++++++--- app/main/forms.py | 2 +- app/templates/views/edit-email-template.html | 21 ++++------ app/templates/views/edit-sms-template.html | 21 ++++------ 7 files changed, 84 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js index ca4359111..f4022710c 100644 --- a/app/assets/javascripts/highlightTags.js +++ b/app/assets/javascripts/highlightTags.js @@ -7,6 +7,25 @@ const tagPattern = /\(\([^\)\(]+\)\)/g; + const getPlaceholderHint = function(placeholders) { + if (0 === placeholders.length) { + return ` +

Add fields using ((double brackets))

+ Show me how + `; + } + if (1 === placeholders.length) { + return ` +

Add fields using ((double brackets))

+

You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template

+ `; + } + return ` +

Add fields using ((double brackets))

+

You’ll populate your fields when you send some messages

+ `; + }; + Modules.HighlightTags = function() { this.start = function(textarea) { @@ -22,6 +41,9 @@ `)) .on("input", this.update); + this.$placeHolderHint = $('#placeholder-hint') + .on("click", ".placeholder-hint-action", this.demo); + this.initialHeight = this.$textbox.height(); this.$backgroundMaskForeground.width( @@ -40,14 +62,30 @@ ) ); + this.escapedMessage = () => $('
').text(this.$textbox.val()).html(); + + this.listPlaceholders = () => this.escapedMessage().match(tagPattern) || []; + + this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map( + placeholder => placeholder.substring(2, placeholder.length - 2) + ); + this.replacePlaceholders = () => this.$backgroundMaskForeground.html( - $('
').text(this.$textbox.val()).html().replace( + this.escapedMessage().replace( tagPattern, match => `${match}` ) ); + this.hint = () => this.$placeHolderHint.html( + getPlaceholderHint(this.listPlaceholdersWithoutBrackets()) + ); + this.update = () => ( - this.replacePlaceholders() && this.resize() + this.replacePlaceholders() && this.resize() && this.hint() + ); + + this.demo = () => ( + this.$textbox.val((i, current) => `Dear ((name)), ${current}`) && this.update() ); }; diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index d92d278c3..068c7f7c5 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -80,6 +80,11 @@ list-style-type: decimal; } + p { + @include core-19; + margin: 0 0 10px 0; + } + } .banner-tip-with-tick { diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index 703b3b8cf..e6e9e6021 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -1,6 +1,6 @@ .textbox-highlight { - $tag-background: rgba($light-blue, 0.7); + $tag-background: rgba($light-blue, 0.6); &-wrapper { position: relative; diff --git a/app/assets/stylesheets/views/edit-template.scss b/app/assets/stylesheets/views/edit-template.scss index dd1c8e789..bc20c53ae 100644 --- a/app/assets/stylesheets/views/edit-template.scss +++ b/app/assets/stylesheets/views/edit-template.scss @@ -1,9 +1,23 @@ -.edit-template { +.placeholder-hint { - &-placeholder-hint { - display: block; - padding-top: 20px; - //color: $secondary-text-colour; + display: block; + + &-title { + @include bold-19; } + &-action { + + @include bold-19; + display: inline-block; + text-decoration: underline; + cursor: pointer; + + &:active { + background: $yellow-25; + outline: none; + } + + } + } diff --git a/app/main/forms.py b/app/main/forms.py index 9153a9427..9dd12c74a 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -202,7 +202,7 @@ class SMSTemplateForm(Form): validators=[DataRequired(message="Template name cannot be empty")]) template_content = TextAreaField( - u'Message', + u'Message content', validators=[DataRequired(message="Template content cannot be empty")]) diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index 0505fc97c..9342308a6 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -20,23 +20,20 @@
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }} + {{ page_footer( + 'Save', + delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None, + delete_link_text='Delete this template' + ) }}
-
- {{ page_footer( - 'Save', - delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None, - delete_link_text='Delete this template' - ) }} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index a571c300a..dc845e246 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -19,23 +19,20 @@
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }} + {{ page_footer( + 'Save', + delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None, + delete_link_text='Delete this template' + ) }}
-
- {{ page_footer( - 'Save', - delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None, - delete_link_text='Delete this template' - ) }}