darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-21 00:23:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
James Moffet
2022-07-29 15:28:10 -07:00
parent c697596d1a
commit c3541ddcb5
11 changed files with 181 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
app/assets/stylesheets/govuk-frontend/overrides.scss
View File

@@ -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;
}

6
app/main/forms.py
View File

@@ -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,
]))

2
app/main/views/send.py
View File

@@ -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'])

4
app/templates/components/textbox.html
View File

@@ -12,7 +12,8 @@
suffix=None,
safe_error_message=False,
rows=8,
extra_form_group_classes=''
extra_form_group_classes='',
placeholder=''
) %}
<div
class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
@@ -52,6 +53,7 @@
data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
data_highlight_placeholders='true' if highlight_placeholders else 'false',
rows=rows|string,
placeholder=placeholder,
**kwargs
) }}
{% if suffix %}

4
app/templates/main_nav.html
View File

@@ -11,12 +11,12 @@
{% elif current_user.has_permissions('view_activity') %}
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
{% endif %}
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Templates</a></li>
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a></li>
{% if not current_user.has_permissions('view_activity') %}
<li><a class="govuk-link govuk-link--no-visited-state{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
{% endif %}
{% if not current_service.has_permission('broadcast') %}
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('uploads') }}" href="{{ url_for('main.uploads', service_id=current_service.id) }}">Uploads</a></li>
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('uploads') }} demo-tooltip" data-demo-tooltip="⚠️ This feature is not available in demo mode" href="{{ url_for('main.uploads', service_id=current_service.id) }}">Letters</a></li>
{% endif %}
<li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
{% if current_user.has_permissions('manage_service', allow_org_user=True) and not current_service.has_permission('broadcast') %}

8
app/templates/views/api/index.html
View File

@@ -13,13 +13,13 @@
</h1>
<nav class="govuk-grid-row bottom-gutter-1-2">
<div class="govuk-grid-column-one-third">
<a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
<div class="govuk-grid-column-one-third demo-tooltip" data-demo-tooltip="⚠️ This feature is not available in demo mode">
<a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
</div>
<div class="govuk-grid-column-one-third">
<div class="govuk-grid-column-one-third demo-tooltip" data-demo-tooltip="⚠️ This feature is not available in demo mode">
<a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for('.guest_list', service_id=current_service.id) }}">Guest list</a>
</div>
<div class="govuk-grid-column-one-third">
<div class="govuk-grid-column-one-third demo-tooltip" data-demo-tooltip="⚠️ This feature is not available in demo mode">
<a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for(callbacks_link, service_id=current_service.id) }}">Callbacks</a>
</div>
</nav>

11
app/templates/views/edit-sms-template.html
View File

@@ -18,9 +18,12 @@
{% block maincolumn_content %}
{{ page_header('{} text message template'.format(heading_action)) }}
<p class="govuk-body">
Don't worry, saving the template will not send ⛔
</p>
{% 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 @@
</div>
</div>
{{ page_footer('Save') }}
<p class="form-hint">
After saving, you'll have the option to send 🚀
</p>
</div>
<div class="govuk-grid-column-full">
{% include "partials/templates/guidance-personalisation.html" %}

4
app/templates/views/send-test.html
View File

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

40
app/templates/views/templates/_template.html
View File

@@ -1,5 +1,21 @@
{% from "components/banner.html" import banner_wrapper %}
<div class="govuk-grid-column-full template-container">
{% if current_user.has_permissions('manage_templates') and template.template_type == 'letter' %}
{% if not current_service.letter_branding_id %}
<a href="{{ url_for(".letter_branding_request", service_id=current_service.id, from_template=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-branding">Add logo</a>
{% endif %}
<a href="{{ url_for(".edit_template_postage", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-postage">Change<span class="govuk-visually-hidden"> postage</span></a>
<a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-body">Edit<span class="govuk-visually-hidden"> letter template</span></a>
{% if current_service.count_letter_contact_details %}
<a href="{{ url_for(".set_template_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-contact">Edit<span class="govuk-visually-hidden"> letter contact block</span></a>
{% else %}
<a href="{{ url_for(".service_add_letter_contact", service_id=current_service.id, from_template=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-contact">Edit<span class="govuk-visually-hidden"> letter contact block</span></a>
{% endif %}
{% endif %}
{{ template|string }}
</div>
<br>
<div class="govuk-grid-column-full">
{% if template._template.archived %}
<p class="hint">
@@ -23,7 +39,7 @@
{% if current_user.has_permissions('send_messages', restrict_admin_usage=True) and not letter_too_long %}
<div class="govuk-grid-column-one-half">
<a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
Get ready to send<span class="govuk-visually-hidden"> a message using this template</span>
Prepare to send<span class="govuk-visually-hidden"> a message using this template</span>
</a>
</div>
{% endif %}
@@ -31,7 +47,7 @@
{% if current_user.has_permissions('create_broadcasts') %}
<div class="govuk-grid-column-one-half">
<a href="{{ url_for(".broadcast", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
Get ready to send
Prepare to send
</a>
</div>
{% endif %}
@@ -46,7 +62,7 @@
{% if current_user.has_permissions('send_messages', restrict_admin_usage=True) %}
<div class="govuk-grid-column-one-half">
<a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
Get ready to send<span class="govuk-visually-hidden"> a message using this template</span>
Prepare to send<span class="govuk-visually-hidden"> a message using this template</span>
</a>
</div>
{% endif %}
@@ -62,18 +78,6 @@
</div>
{% endif %}
</div>
<div class="govuk-grid-column-full template-container">
{% if current_user.has_permissions('manage_templates') and template.template_type == 'letter' %}
{% if not current_service.letter_branding_id %}
<a href="{{ url_for(".letter_branding_request", service_id=current_service.id, from_template=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-branding">Add logo</a>
{% endif %}
<a href="{{ url_for(".edit_template_postage", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-postage">Change<span class="govuk-visually-hidden"> postage</span></a>
<a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-body">Edit<span class="govuk-visually-hidden"> letter template</span></a>
{% if current_service.count_letter_contact_details %}
<a href="{{ url_for(".set_template_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-contact">Edit<span class="govuk-visually-hidden"> letter contact block</span></a>
{% else %}
<a href="{{ url_for(".service_add_letter_contact", service_id=current_service.id, from_template=template.id) }}" class="govuk-link govuk-link--no-visited-state edit-template-link-letter-contact">Edit<span class="govuk-visually-hidden"> letter contact block</span></a>
{% endif %}
{% endif %}
{{ template|string }}
</div>
<br>
<br>

7
app/templates/views/templates/choose.html
View File

@@ -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') }}
<p class="govuk-body">
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 @@
<div class="govuk-grid-row">
<div class="{% if current_user.has_permissions('manage_templates') %} govuk-grid-column-five-sixths {% else %} govuk-grid-column-full {% endif %}">
<p class="govuk-body">
<br>
🚨 Every message starts with a template. To send, choose or create a template.
</p>
{{ folder_path(
folders=template_folder_path,
service_id=current_service.id,

18
app/templates/views/templates/template.html
View File

@@ -31,6 +31,9 @@
{% else %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<h1 class="heading-large folder-heading">
Review your message
</h1>
{{ folder_path(
folders=current_service.get_template_path(template._template),
service_id=current_service.id,
@@ -44,13 +47,6 @@
<div class="govuk-grid-row">
{% include 'views/templates/_template.html' %}
</div>
{% if template.template_type != 'broadcast' %}
<div class="bottom-gutter-1-2">
{{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
</div>
{% endif %}
<div class="bottom-gutter-1-2">
{% if template._template.updated_at %}
<h2 class="heading-small bottom-gutter-2-3 heading-inline">
@@ -67,6 +63,8 @@
{% endif %}
{% if current_user.has_permissions('manage_templates') and user_has_template_permission %}
{% if not template._template.archived %}
<br/>
<br/>
<span class="page-footer-link page-footer-delete-link-without-button bottom-gutter-2-3">
<a class="govuk-link govuk-link--destructive" href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this template</a>
</span>
@@ -84,4 +82,10 @@
{% endif %}
</div>
{% if template.template_type != 'broadcast' %}
<div class="bottom-gutter-1-2" style="display:none">
{{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
</div>
{% endif %}
{% endblock %}