darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-06 17:38:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updates to styleguide

Browse Source 
Brings in changes to the email message and table patterns.
This commit is contained in:
Chris Hill-Scott
2016-02-21 11:15:15 +00:00
parent f6fe61d10d
commit 65dc7578e5
2 changed files with 122 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/main/views/styleguide.py
View File

@@ -1,6 +1,7 @@
from flask import render_template, current_app, abort from flask import render_template, current_app, abort
from flask_wtf import Form from flask_wtf import Form
from wtforms import StringField, PasswordField, TextAreaField, FileField, validators from wtforms import StringField, PasswordField, TextAreaField, FileField, validators
from utils.template import Template
from app.main import main from app.main import main
@@ -17,13 +18,16 @@ def styleguide():
message = TextAreaField(u'Message') message = TextAreaField(u'Message')
file_upload = FileField('Upload a CSV file to add your recipients’ details') file_upload = FileField('Upload a CSV file to add your recipients’ details')
sms = "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax"
form = FormExamples() form = FormExamples()
form.message.data = sms
form.message.data = "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax" # noqa
form.validate() form.validate()
template = Template({'content': sms})
return render_template( return render_template(
'views/styleguide.html', 'views/styleguide.html',
form=form form=form,
template=template
) )

187
app/templates/views/styleguide.html
View File

@@ -5,9 +5,11 @@
{% from "components/browse-list.html" import browse_list %} {% from "components/browse-list.html" import browse_list %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/sms-message.html" import sms_message %} {% from "components/sms-message.html" import sms_message %}
{% from "components/table.html" import mapping_table, list_table, row, field, right_aligned_field_heading %} {% from "components/email-message.html" import email_message %}
{% from "components/table.html" import mapping_table, list_table, row, field, text_field, boolean_field, right_aligned_field_heading %}
{% from "components/textbox.html" import textbox %} {% from "components/textbox.html" import textbox %}
{% from "components/file-upload.html" import file_upload %} {% from "components/file-upload.html" import file_upload %}
{% from "components/yes-no.html" import yes_no %}
{% from "components/api-key.html" import api_key %} {% from "components/api-key.html" import api_key %}
{% block page_title %} {% block page_title %}
@@ -25,21 +27,26 @@
</p> </p>
<h2 class="heading-large">Banner</h2> <h2 class="heading-large">Banner</h2>
<p>Used to show the status of a thing or action.</p> <div class="grid-row">
<div class="column-three-quarters">
<p>Used to show the status of a thing or action.</p>
{{ banner("You sent 1,234 text messages", with_tick=True) }} {{ banner("You sent 1,234 text messages", with_tick=True) }}
{{ banner('You’re not allowed to do this', 'dangerous')}} {{ banner('You’re not allowed to do this', 'dangerous')}}
{{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}} {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
{{ banner( {{ banner(
'<a href="#">Send your first message</a>'|safe, '<a href="#">Send your first message</a>'|safe,
subhead='Get started', subhead='Get started',
type='tip' type='tip'
)}} )}}
{{ banner('You could go to jail', 'important')}}
</div>
</div>
{{ banner('You could go to jail', 'important')}}
<h2 class="heading-large">Big number</h2> <h2 class="heading-large">Big number</h2>
@@ -118,7 +125,7 @@
<h2 class="heading-large">SMS message</h2> <h2 class="heading-large">SMS message</h2>
<p>Used to show, preview or choose an SMS message.</p> <p>Used to show, preview or choose an SMS template.</p>
<div class="grid-row"> <div class="grid-row">
<div class="column-half"> <div class="column-half">
@@ -127,82 +134,105 @@
name='Two week reminder', name='Two week reminder',
) }} ) }}
{{ sms_message( {{ sms_message(
'Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax' template.formatted_as_markup
) }} ) }}
{{ sms_message( {{ sms_message(
'Your vehicle tax for registration number is due on date. Renew online at www.gov.uk/vehicle-tax', 'Your vehicle tax for LC12 BFL is due on 1 March 2016. Renew online at www.gov.uk/vehicle-tax',
'+44 7700 900 306' '+44 7700 900 306'
) }} ) }}
{{ sms_message( {{ sms_message(
'Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax', template.formatted_as_markup,
name='Two week reminder', name='Two week reminder',
edit_link='#' edit_link='#'
) }} ) }}
</div> </div>
</div> </div>
<h2 class="heading-large">Email message</h2>
<p>Used to show, preview or choose an email template.</p>
<div class="grid-row">
<div class="column-two-thirds">
{{ email_message(
subject="Vehicle tax reminder",
body="Dear Alice Smith,\n\nYour vehicle tax for LC12 BFL is due on 1 March 2016.\n\nRenew online at www.gov.uk/vehicle-tax",
from_name="Vehicle tax",
from_address="vehicle.tax@notifications.service.gov.uk",
name="Two week reminder",
) }}
</div>
</div>
<h2 class="heading-large">Tables</h2> <h2 class="heading-large">Tables</h2>
{% call mapping_table( <div class="grid-row">
caption='Account settings', <div class="column-three-quarters">
field_headings=['Label', 'Value', 'Action'], <p>
field_headings_visible=False, Used for comparing rows of data.
caption_visible=True </p>
) %} {% call mapping_table(
{% call row() %} caption='Account settings',
{% call field() %} field_headings=['Label', 'True', 'False', 'Action'],
Username field_headings_visible=False,
caption_visible=True
) %}
{% call row() %}
{{ text_field('Username' )}}
{{ boolean_field(True) }}
{{ boolean_field(False) }}
{% call field(align='right') %}
<a href="#">Change</a>
{% endcall %}
{% endcall %}
{% endcall %} {% endcall %}
{% call field() %}
admin
{% endcall %}
{% call field(align='right') %}
<a href="#">Change</a>
{% endcall %}
{% endcall %}
{% endcall %}
{% call(item) list_table( {% call(item) list_table(
[ [
{ {
'file': 'dispatch_20151114.csv', 'status': 'Queued' 'file': 'dispatch_20151114.csv', 'status': 'Queued'
}, },
{ {
'file': 'dispatch_20151117.csv', 'status': 'Delivered' 'file': 'dispatch_20151117.csv', 'status': 'Delivered'
}, },
{ {
'file': 'remdinder_monday.csv', 'status': 'Failed' 'file': 'remdinder_monday.csv', 'status': 'Failed'
} }
], ],
caption='Messages', caption='Messages',
field_headings=['File', right_aligned_field_heading('Status')], field_headings=['File', right_aligned_field_heading('Status')],
field_headings_visible=True, field_headings_visible=True,
caption_visible=False caption_visible=False
) %} ) %}
{% call field() %} {% call field() %}
{{ item.file }} {{ item.file }}
{% endcall %} {% endcall %}
{% call field( {% call field(
align='right', align='right',
status='error' if item.status == 'Failed' else 'default' status='error' if item.status == 'Failed' else 'default'
) %} ) %}
{{ item.status }} {{ item.status }}
{% endcall %} {% endcall %}
{% endcall %} {% endcall %}
{% call(item) list_table( {% call(item) list_table(
[], [],
caption='Jobs', caption='Jobs',
field_headings=['Job', 'Time'], field_headings=['Job', 'Time'],
caption_visible=True, caption_visible=True,
empty_message='You haven’t scheduled any jobs yet' empty_message='You haven’t scheduled any jobs yet'
) %} ) %}
{% call field() %} {% call field() %}
{{ item.job }} {{ item.job }}
{% endcall %} {% endcall %}
{% call field() %} {% call field() %}
{{ item.time }} {{ item.time }}
{% endcall %} {% endcall %}
{% endcall %} {% endcall %}
<p class="table-show-more-link">
<a href="#">Add a job now</a>
</p>
</div>
</div>
<h2 class="heading-large">Textbox</h2> <h2 class="heading-large">Textbox</h2>
{{ textbox(form.username) }} {{ textbox(form.username) }}
@@ -213,6 +243,17 @@
<h2 class="heading-large">File upload</h2> <h2 class="heading-large">File upload</h2>
{{ file_upload(form.file_upload) }} {{ file_upload(form.file_upload) }}
<h2 class="heading-large">Yes/no</h2>
<div class="grid-row">
<div class='column-half'>
<fieldset class='yes-no-wrapper'>
{{ yes_no('manage_service', 'Manage service', True) }}
{{ yes_no('templates', 'Create templates', True) }}
</fieldset>
</div>
</div>
<h2 class="heading-large">API key</h2> <h2 class="heading-large">API key</h2>
{{ api_key('d30512af92e1386d63b90e5973b49a10') }} {{ api_key('d30512af92e1386d63b90e5973b49a10') }}