darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 02:42:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Put message previews on ‘Send SMS’ page

Browse Source 
A previous commit removed these to differentiate between this page and the
manage templates page. It turns out that we do want previews on this page
because:
- the users for the two pages might be different—they might only be allowed to
  do one or the other depending what permissions they have
- it’s useful to see what the placeholders in the message are before uploading
  a CSV, to make sure the CSV has the correct column headings

This commit re-adds the message preview with a simpler UI. Discussed with
@antimega and we both agreed that the speech bubble tails on the messages should
go.
This commit is contained in:
Chris Hill-Scott
2016-01-20 10:36:41 +00:00
parent 596da7016c
commit 482abb97d5
5 changed files with 101 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/main.js
View File

@@ -1,3 +1,3 @@
$(() => GOVUK.modules.start());
$(() => new GOVUK.SelectionButtons('.block-label input'));
$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));

96
app/assets/stylesheets/components/sms-message.scss
View File

@@ -1,53 +1,63 @@
.sms-message {
position: relative;
%sms-message-wrapper,
.sms-message-wrapper {
width: 100%;
box-sizing: border-box;
padding: $gutter/2;
background: $panel-colour;
border: 1px solid $panel-colour;
border-radius: 5px;
white-space: normal;
margin: 0 0 $gutter 0;
}
.sms-message-wrapper-with-radio {
@extend %sms-message-wrapper;
padding-left: 45px;
cursor: pointer;
}
.sms-message-recipient {
@include copy-19;
color: $secondary-text-colour;
margin: -$gutter-half 0 $gutter 0;
}
.sms-message-name {
@include bold-19;
margin: 30px 0 10px 0;
}
.sms-message-picker {
display: block;
margin: 7px 0 0 0;
position: absolute;
left: 15px;
top: 50%;
z-index: 50;
}
label.sms-message-option {
display: block;
position: relative;
&.selected {
.sms-message-wrapper-with-radio {
background: $white;
border: 1px solid $text-colour;
}
&:before {
content: '';
position: absolute;
z-index: 10;
bottom: -12px;
right: 5px;
width: 20px;
height: 25px;
border-radius: 100%;
background: $panel-colour;
}
&:after {
content: '';
position: absolute;
z-index: 20;
bottom: -15px;
right: -5px;
border-radius: 100%;
width: 20px;
height: 20px;
background: $white;
}
&.focused {
&-wrapper {
width: 100%;
display: inline-block;
box-sizing: border-box;
position: relative;
z-index: 30;
padding: $gutter/2;
background: $panel-colour;
border-radius: 5px;
white-space: normal;
}
outline: none;
&-recipient {
@include copy-19;
color: $secondary-text-colour;
margin: -$gutter-half 0 $gutter 0;
}
.sms-message-wrapper-with-radio {
box-shadow: 0 0 0 3px $yellow;
}
&-name {
@include bold-19;
margin: 50px 0 10px 0;
}
}

6
app/templates/admin_template.html
View File

@@ -55,8 +55,10 @@
<summary class="dropdown-toggle">
Service name
</summary>
<a href="#">Switch to A N Other service</a>
<a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
<div>
<a href="#">Switch to A N Other service</a>
<a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
</div>
</details>
</div>
<div class="column-half management-navigation-account">

19
app/templates/components/sms-message.html
View File

@@ -1,4 +1,9 @@
{% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
{% macro sms_message(
body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None
) %}
{% if input_name %}
<label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
{% endif %}
{% if name %}
<h3 class="sms-message-name">
{% if edit_link %}
@@ -8,14 +13,18 @@
{% endif %}
</h3>
{% endif %}
<div class="sms-message">
<div class="sms-message-wrapper">
{{ body|placeholders }}
</div>
{% if input_name %}
<input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" />
{% endif %}
<div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
{{ body|placeholders }}
</div>
{% if recipient %}
<p class="sms-message-recipient">
{{ recipient }}
</p>
{% endif %}
{% if input_name %}
</label>
{% endif %}
{% endmacro %}

53
app/templates/views/send-sms.html
View File

@@ -10,35 +10,40 @@
{% block maincolumn_content %}
<form method="POST" enctype="multipart/form-data">
<h1 class="heading-xlarge">Send text messages</h1>
<div class="grid-row">
<div class="column-three-quarters">
<fieldset class='form-group'>
<legend class="heading-medium">1. Choose text message template</legend>
{% for template in message_templates %}
<label class="block-label" for="template-{{loop.index}}">
{{ template.name }}
<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
</label>
{% endfor %}
</fieldset>
<h1 class="heading-xlarge">Send text messages</h1>
<p>
or <a href="{{ url_for('.add_service_template', service_id=service_id) }}">create a new template</a>
</p>
<fieldset class='form-group'>
<legend class="heading-medium">1. Choose text message template</legend>
{% for template in message_templates %}
{{ sms_message(
template.body, name=template.name, input_name='template', input_index=loop.index
) }}
{% endfor %}
</fieldset>
<h2 class="heading-medium">2. Add recipients</h2>
<p>
or <a href="{{ url_for(".add_template", service_id=service_id) }}">create a new template</a>
</p>
<p>
Upload a CSV file to add your recipients’ details.
</p>
<p>
You can also <a href="#">download an example CSV</a>.
</p>
<p>
{{textbox(form.file)}}
</p>
<h2 class="heading-medium">2. Add recipients</h2>
{{ page_footer("Continue") }}
<p>
Upload a CSV file to add your recipients’ details.
</p>
<p>
You can also <a href="#">download an example CSV</a>.
</p>
<p>
{{textbox(form.file)}}
</p>
{{ page_footer("Continue") }}
</div>
</div>
</form>