diff --git a/app/assets/stylesheets/govuk-frontend/overrides.scss b/app/assets/stylesheets/govuk-frontend/overrides.scss index f771388b7..93dc62098 100644 --- a/app/assets/stylesheets/govuk-frontend/overrides.scss +++ b/app/assets/stylesheets/govuk-frontend/overrides.scss @@ -65,4 +65,121 @@ .govuk-header__logotype-text { margin-left: 5px !important; +} + +// TODO: probably move these to a separate file + +.demo-tooltip { + position: relative; + color: #FFF; +} + +.demo-tooltip a { + pointer-events: none; +} + +.demo-tooltip:before, +.demo-tooltip:after { + position: absolute; + content: ''; + opacity: 0; + transition: all 0.4s ease; + pointer-events: none; + color: white; +} + +.demo-tooltip:hover:before, +.demo-tooltip:hover:after { + opacity: 1; + transform: translateY(-2px); +} + +.demo-tooltip:before { + border-width: 10px 8px 0 8px; + border-style: solid; + border-color: red transparent transparent transparent; + top: -15px; + transform: translateY(20px); +} + +.demo-tooltip:after { + content: attr(data-demo-tooltip); + background: red; + width: 160px; + height: 40px; + font-size: 13px; + font-weight: 300; + top: -75px; + left: -10px; + padding: 10px; + border-radius: 5px; + letter-spacing: 1px; + transform: translateY(20px); +} + + + +// alt tooltip +// .tooltip-demo { +// position: relative; +// } + +// .tooltip-demo:before, +// .tooltip-demo:after { +// display: block; +// opacity: 0; +// pointer-events: none; +// position: absolute; +// transform: translate3d(0, -10px, 0); +// transition: all .15s ease-in-out; +// } + +// .tooltip-demo:hover:before, +// .tooltip-demo:hover:after { +// opacity: 1; +// transform: translate3d(0, 0, 0); +// } + +// .tooltip-demo:after { +// border-right: 6px solid transparent; +// border-bottom: 6px solid rgba(0, 0, 0, .75); +// border-left: 6px solid transparent; +// content: ''; +// height: 0; +// top: 20px; +// left: 20px; +// width: 0; +// } + +// .tooltip-demo:before { +// background: rgba(0, 0, 0, .75); +// border-radius: 2px; +// color: #fff; +// content: attr(data-demo-tooltip); +// font-size: 14px; +// padding: 6px 10px; +// top: 26px; +// white-space: nowrap; +// } + +@keyframes shake { + 0% { + transform: rotate(2deg); + } + + 50% { + transform: rotate(-3deg); + } + + 70% { + transform: rotate(3deg); + } + + 100% { + transform: rotate(0deg); + } +} + +.demo-tooltip:hover { + animation: shake 500ms ease-in-out forwards; } \ No newline at end of file diff --git a/app/main/forms.py b/app/main/forms.py index 9f356b61b..42da0c839 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -2152,9 +2152,9 @@ def get_placeholder_form_instance( template_type == 'sms' ): if allow_international_phone_numbers: - field = international_phone_number(label=placeholder_name) + field = international_phone_number(label=placeholder_name) # TODO: modify as necessary for non-us numbers else: - field = uk_mobile_number(label=placeholder_name) + field = uk_mobile_number(label=placeholder_name) # TODO: replace with us_mobile_number else: field = GovukTextInputField(placeholder_name, validators=[ DataRequired(message='Cannot be empty') @@ -2374,7 +2374,7 @@ class TemplateAndFoldersSelectionForm(Form): self.add_template_by_template_type.choices = list(filter(None, [ ('email', 'Email') if 'email' in available_template_types else None, ('sms', 'Text message') if 'sms' in available_template_types else None, - ('letter', 'Letter') if 'letter' in available_template_types else None, + # ('letter', 'Letter') if 'letter' in available_template_types else None, ('broadcast', 'Broadcast') if 'broadcast' in available_template_types else None, ('copy-existing', 'Copy an existing template') if allow_adding_copy_of_template else None, ])) diff --git a/app/main/views/send.py b/app/main/views/send.py index 0e5f0178c..863414b9f 100644 --- a/app/main/views/send.py +++ b/app/main/views/send.py @@ -431,7 +431,7 @@ def send_one_off_step(service_id, template_id, step_index): if db_template['template_type'] == 'email': email_reply_to = get_email_reply_to_address_from_session() elif db_template['template_type'] == 'sms': - sms_sender = get_sms_sender_from_session() + sms_sender = get_sms_sender_from_session() # TODO: verify default sender is US Notify template_values = get_recipient_and_placeholders_from_session(db_template['template_type']) diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 64e83f2fc..785d5ef48 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -12,7 +12,8 @@ suffix=None, safe_error_message=False, rows=8, - extra_form_group_classes='' + extra_form_group_classes='', + placeholder='' ) %}
Dashboard {% endif %} -
  • Templates
    • +
  • Send messages
    • {% if not current_user.has_permissions('view_activity') %}
  • Sent messages
    • {% endif %} {% if not current_service.has_permission('broadcast') %} -
  • Uploads
    • +
  • Letters
    • {% endif %}
  • Team members
    • {% if current_user.has_permissions('manage_service', allow_org_user=True) and not current_service.has_permission('broadcast') %} diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html index c513677c4..0a869c970 100644 --- a/app/templates/views/api/index.html +++ b/app/templates/views/api/index.html @@ -13,13 +13,13 @@ diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 254139f3e..9e203360f 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -18,9 +18,12 @@ {% block maincolumn_content %} {{ page_header('{} text message template'.format(heading_action)) }} +

    + Don't worry, saving the template will not send ⛔ +

    {% if current_service.prefix_sms %} - {% set content_hint = 'Your message will start with your service name' %} + {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %} {% endif %} {% call form_wrapper() %} @@ -36,7 +39,8 @@ width='1-1', hint=content_hint, rows=5, - extra_form_group_classes='govuk-!-margin-bottom-2' + extra_form_group_classes='govuk-!-margin-bottom-2', + placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!' ) }} {% if current_user.platform_admin %} {{ form.process_type }} @@ -49,6 +53,9 @@
    {{ page_footer('Save') }} +

    + After saving, you'll have the option to send 🚀 +

    {% include "partials/templates/guidance-personalisation.html" %} diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html index 5ec9f8546..5c1dbcc51 100644 --- a/app/templates/views/send-test.html +++ b/app/templates/views/send-test.html @@ -16,6 +16,8 @@ {{ page_header(page_title) }} + {{ template|string }} + {% call form_wrapper( class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form', module="autofocus", @@ -47,6 +49,6 @@ {{ page_footer('Continue') }} {% endcall %} - {{ template|string }} + {% endblock %} diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html index 9ba917c6b..9cab986e2 100644 --- a/app/templates/views/templates/_template.html +++ b/app/templates/views/templates/_template.html @@ -1,5 +1,21 @@ {% from "components/banner.html" import banner_wrapper %} +
    + {% if current_user.has_permissions('manage_templates') and template.template_type == 'letter' %} + {% if not current_service.letter_branding_id %} + Add logo + {% endif %} + Change postage + Edit letter template + {% if current_service.count_letter_contact_details %} + Edit letter contact block + {% else %} + Edit letter contact block + {% endif %} + {% endif %} + {{ template|string }} +
    +
    {% if template._template.archived %}

    @@ -23,7 +39,7 @@ {% if current_user.has_permissions('send_messages', restrict_admin_usage=True) and not letter_too_long %}

    - Get ready to send a message using this template + Prepare to send a message using this template
    {% endif %} @@ -31,7 +47,7 @@ {% if current_user.has_permissions('create_broadcasts') %}
    - Get ready to send + Prepare to send
    {% endif %} @@ -46,7 +62,7 @@ {% if current_user.has_permissions('send_messages', restrict_admin_usage=True) %}
    - Get ready to send a message using this template + Prepare to send a message using this template
    {% endif %} @@ -62,18 +78,6 @@
    {% endif %}
    -
    - {% if current_user.has_permissions('manage_templates') and template.template_type == 'letter' %} - {% if not current_service.letter_branding_id %} - Add logo - {% endif %} - Change postage - Edit letter template - {% if current_service.count_letter_contact_details %} - Edit letter contact block - {% else %} - Edit letter contact block - {% endif %} - {% endif %} - {{ template|string }} -
    +
    +
    + diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html index baeb36369..14a17abe4 100644 --- a/app/templates/views/templates/choose.html +++ b/app/templates/views/templates/choose.html @@ -7,7 +7,7 @@ {% extends "withnav_template.html" %} -{% set page_title = 'Templates' %} +{% set page_title = 'Create your messages here' %} {% block service_page_title %} {{ page_title_folder_path(template_folder_path) }} @@ -20,6 +20,7 @@ {{ page_header(page_title, size='medium') }}

    + Every message starts with a template. You can change it later. {% if current_service.has_permission('broadcast') %} You haven’t added any templates yet. {% else %} @@ -36,6 +37,10 @@

    +

    +
    + 🚨 Every message starts with a template. To send, choose or create a template. +

    {{ folder_path( folders=template_folder_path, service_id=current_service.id, diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html index a35ec9e4c..e10433f1b 100644 --- a/app/templates/views/templates/template.html +++ b/app/templates/views/templates/template.html @@ -31,6 +31,9 @@ {% else %}
    +

    + Review your message +

    {{ folder_path( folders=current_service.get_template_path(template._template), service_id=current_service.id, @@ -44,13 +47,6 @@
    {% include 'views/templates/_template.html' %}
    - - {% if template.template_type != 'broadcast' %} -
    - {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }} -
    - {% endif %} -
    {% if template._template.updated_at %}

    @@ -67,6 +63,8 @@ {% endif %} {% if current_user.has_permissions('manage_templates') and user_has_template_permission %} {% if not template._template.archived %} +
    +
    Delete this template @@ -84,4 +82,10 @@ {% endif %}

    + {% if template.template_type != 'broadcast' %} + + {% endif %} + {% endblock %}