darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-20 22:40:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1222 from alphagov/toolkit-upgrade

Browse Source 
Upgrade GOV.UK Template, Frontend Tookit, and Elements
This commit is contained in:
Chris Hill-Scott
2017-04-11 14:03:08 +01:00
committed by GitHub
parent 3fceab3bc1 ec33f843ef
commit 53b10f14f6
14 changed files with 125 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,6 @@ $(() => $("time.timeago").timeago());
$(() => GOVUK.modules.start()); $(() => GOVUK.modules.start());
$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
$(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus')); $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));
$(() => $('.banner-dangerous').eq(0).trigger('focus')); $(() => $('.banner-dangerous').eq(0).trigger('focus'));

50
app/assets/javascripts/radioSelect.js
View File

@@ -5,54 +5,57 @@
let states = { let states = {
'initial': Hogan.compile(` 'initial': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select-column">
<label class="block-label js-block-label" for="{{name}}-0"> <div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> Now <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
</label> <label class="block-label js-block-label" for="{{name}}-0">Now</label>
</div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select-column">
{{#categories}} {{#categories}}
<input type='button' class='button tertiary-button js-category-button' value='{{.}}' /> <input type='button' class='js-category-button' value='{{.}}' />
{{/categories}} {{/categories}}
</div> </div>
`), `),
'choose': Hogan.compile(` 'choose': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select-column">
<label class="block-label js-block-label" for="{{name}}-0"> <div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
</label> <label for="{{name}}-0">Now</label>
</div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select-column">
{{#choices}} {{#choices}}
<label class="block-label js-block-label" for="{{id}}"> <div class="multiple-choice js-multiple-choice js-option">
<input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" class="js-option" /> <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
{{label}} <label for="{{id}}">{{label}}</label>
</label> </div>
{{/choices}} {{/choices}}
</div> </div>
`), `),
'chosen': Hogan.compile(` 'chosen': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select-column">
<label class="block-label js-block-label" for="{{name}}-0"> <div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now <input id="{{name}}-0" name="{{name}}" type="radio" value="">
</label> <label for="{{name}}-0">Now</label>
</div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select-column">
{{#choices}} {{#choices}}
<label class="block-label js-block-label" for="{{id}}"> <div class="multiple-choice js-multiple-choice">
<input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" /> <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
{{label}} <label for="{{id}}">{{label}}</label>
</label> </div>
{{/choices}} {{/choices}}
</div> </div>
<div class="radio-select-column"> <div class="radio-select-column">
<input type='button' class='button tertiary-button js-reset-button' value='Choose a different time' /> <input type='button' class='category-link js-reset-button' value='Choose a different time' />
</div> </div>
`) `)
}; };
let focusSelected = function() { let focusSelected = function() {
setTimeout( setTimeout(
() => $('[type=radio]:checked').parent('label').blur().trigger('focus').addClass('selected'), () => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'),
10 10
); );
}; };
@@ -62,13 +65,16 @@
this.start = function(component) { this.start = function(component) {
let $component = $(component); let $component = $(component);
let render = (state, data) => $component.html(states[state].render(data)); let render = (state, data) => {
$component.html(states[state].render(data));
new GOVUK.SelectionButtons('.block-label input');
};
let choices = $('label', $component).toArray().map(function(element) { let choices = $('label', $component).toArray().map(function(element) {
let $element = $(element); let $element = $(element);
return { return {
'id': $element.attr('for'), 'id': $element.attr('for'),
'label': $.trim($element.text()), 'label': $.trim($element.text()),
'value': $element.find('input').attr('value') 'value': $element.prev('input').attr('value')
}; };
}); });
let categories = $component.data('categories').split(','); let categories = $component.data('categories').split(',');
@@ -95,7 +101,7 @@
if (!event.pageX) return true; if (!event.pageX) return true;
event.preventDefault(); event.preventDefault();
let value = $(this).attr('value'); let value = $('input', this).attr('value');
render('chosen', { render('chosen', {
'choices': choices.filter( 'choices': choices.filter(
element => element.value == value element => element.value == value

29
app/assets/stylesheets/app.scss
View File

@@ -46,8 +46,7 @@
} }
.beta-badge { .beta-badge {
@include phase-tag(beta); @include phase-tag();
background: $govuk-blue;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
@@ -151,22 +150,10 @@ td {
margin-bottom: 5px; margin-bottom: 5px;
} }
a[rel='external'] {
@include external-link-default;
@include external-link-16;
@include media(tablet) {
@include external-link-19;
}
}
.hint { .hint {
color: $secondary-text-colour; color: $secondary-text-colour;
} }
.button {
padding: 0.3em 0.6em 0.2em 0.6em;
}
.list-bullet { .list-bullet {
.list-bullet { .list-bullet {
@@ -256,10 +243,16 @@ details .arrow {
margin-top: 5px; margin-top: 5px;
} }
.block-label input[disabled] {
opacity: 0.5;
}
#content.override-elements-content { #content.override-elements-content {
padding-bottom: 0; padding-bottom: 0;
} }
.multiple-choice input:disabled+label {
opacity: 1;
color: $secondary-text-colour;
cursor: default;
}
.multiple-choice input:disabled {
opacity: 0.5;
}

20
app/assets/stylesheets/components/radio-select.scss
View File

@@ -5,19 +5,25 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.block-label { .multiple-choice {
margin-right: 5px; margin-right: 5px;
padding-right: $gutter - 10px; padding-right: 10px;
padding-left: 54px - 10px; padding-left: 54px - 10px;
} }
} }
.tertiary-button { .js-reset-button,
.js-category-button {
background: none;
text-decoration: underline;
color: $link-colour;
//font-weight: bold;
border: none;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: auto; width: auto;
padding: 20px $gutter-half 15px $gutter-half; padding: 7px 20px 7px 10px;
margin-right: 5px; margin-right: 5px;
} }
@@ -26,12 +32,12 @@
height: 60px; height: 60px;
overflow: visible; overflow: visible;
.block-label { .multiple-choice {
display: none; display: none;
} }
.js-block-label { .js-multiple-choice {
display: inline-block; display: block;
} }
} }

2
app/assets/stylesheets/main.scss
View File

@@ -24,7 +24,7 @@ $path: '/static/images/';
@import 'elements/elements-typography'; @import 'elements/elements-typography';
@import 'elements/forms'; @import 'elements/forms';
@import 'elements/forms/form-validation'; @import 'elements/forms/form-validation';
@import 'elements/forms/form-block-labels'; @import 'elements/forms/form-multiple-choice';
@import 'elements/forms/form-validation'; @import 'elements/forms/form-validation';
@import 'elements/icons'; @import 'elements/icons';
@import 'elements/layout'; @import 'elements/layout';

39
app/templates/components/checkbox.html
View File

@@ -1,29 +1,22 @@
{% macro checkbox( {% macro checkbox(
field, field,
hint=False, hint=False,
help_link=None, width='2-3'
help_link_text=None,
width='2-3',
suffix=None,
block=False
) %} ) %}
<label class="{% if block %}block-label{% endif %}" for="{{ field.name }}"> <div class="multiple-choice">
{{ field()}} <input
{{ field.label.text }} id="{{ field.id }}" name="{{ field.name }}" type="checkbox" value="{{ field.data }}"
{% if hint %} {% if field.checked %}
<span class="form-hint"> checked
{{ hint }} {% endif %}
</span> >
{% endif %} <label for="{{ field.id }}">
{% if field.errors %} {{ field.label.text }}
<span class="error-message"> {% if hint %}
{{ field.errors[0] }} <div class="hint">
</span> {{ hint }}
{% endif %} </div>
{% if help_link and help_link_text %} {% endif %}
<p class="textbox-help-link">
<a href='{{ help_link }}'>{{ help_link_text }}</a>
</p>
{% endif %}
</label> </label>
</div>
{% endmacro %} {% endmacro %}

2
app/templates/components/file-upload.html
View File

@@ -1,5 +1,5 @@
{% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %} {% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %}
<form method="post" enctype="multipart/form-data" class="{% if field.errors %}error{% endif %}" data-module="file-upload"> <form method="post" enctype="multipart/form-data" class="{% if field.errors %}form-group-error{% endif %}" data-module="file-upload">
<label class="file-upload-label" for="{{ field.name }}"> <label class="file-upload-label" for="{{ field.name }}">
<span class="visually-hidden">{{ field.label.text }}</span> <span class="visually-hidden">{{ field.label.text }}</span>
{% if hint %} {% if hint %}

2
app/templates/components/list-entry.html
View File

@@ -8,7 +8,7 @@
{% if error %} {% if error %}
<div class="validation-wrapper"> <div class="validation-wrapper">
{% endif %} {% endif %}
<fieldset class="form-group{% if field.errors %} error{% endif %}" id="{{ field.name }}"> <fieldset class="form-group{% if field.errors %} form-group-error{% endif %}" id="{{ field.name }}">
<legend> <legend>
<span class="form-label"> <span class="form-label">
{{ field.label.text }} {{ field.label.text }}

58
app/templates/components/radios.html
View File

@@ -4,7 +4,7 @@
disable=[], disable=[],
option_hints={} option_hints={}
) %} ) %}
<div class="form-group {% if field.errors %} error{% endif %}"> <div class="form-group {% if field.errors %} form-group-error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label.text|safe }} {{ field.label.text|safe }}
@@ -15,7 +15,7 @@
{% endif %} {% endif %}
</legend> </legend>
{% for option in field %} {% for option in field %}
<label class="block-label" for="{{ option.id }}"> <div class="multiple-choice">
<input <input
id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}" id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
{% if option.data in disable %} {% if option.data in disable %}
@@ -25,13 +25,15 @@
checked checked
{% endif %} {% endif %}
> >
{{ option.label.text }} <label class="block-label" for="{{ option.id }}">
{% if option_hints[option.data] %} {{ option.label.text }}
<div class="block-label-hint"> {% if option_hints[option.data] %}
{{ option_hints[option.data] }} <div class="block-label-hint">
</div> {{ option_hints[option.data] }}
{% endif %} </div>
</label> {% endif %}
</label>
</div>
{% endfor %} {% endfor %}
</fieldset> </fieldset>
</div> </div>
@@ -43,7 +45,7 @@
hint=None, hint=None,
wrapping_class='form-group' wrapping_class='form-group'
) %} ) %}
<div class="{{ wrapping_class }} {% if field.errors %} error{% endif %}"> <div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label.text }} {{ field.label.text }}
@@ -56,10 +58,12 @@
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}"> <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
<div class="radio-select-column"> <div class="radio-select-column">
{% for option in field %} {% for option in field %}
<label class="block-label" for="{{ option.id }}"> <div class="multiple-choice">
{{ option }} {{ option }}
{{ option.label.text }} <label for="{{ option.id }}">
</label> {{ option.label.text }}
</label>
</div>
{% if loop.first %} {% if loop.first %}
</div> </div>
<div class="radio-select-column"> <div class="radio-select-column">
@@ -77,7 +81,7 @@
hint=None, hint=None,
branding_dict={} branding_dict={}
) %} ) %}
<div class="form-group {% if field.errors %} error{% endif %}"> <div class="form-group {% if field.errors %} form-group-error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label.text }} {{ field.label.text }}
@@ -88,7 +92,7 @@
{% endif %} {% endif %}
</legend> </legend>
{% for value, option, checked in field.iter_choices() %} {% for value, option, checked in field.iter_choices() %}
<label class="block-label" for="{{ field.name }}-{{ loop.index }}"> <div class="multiple-choice">
<input <input
type="radio" type="radio"
name="{{ field.name }}" name="{{ field.name }}"
@@ -96,17 +100,19 @@
value="{{ value }}" value="{{ value }}"
{% if checked %}checked="checked"{% endif %} {% if checked %}checked="checked"{% endif %}
/> />
{% if branding_dict.get(value, {}).get('colour') %} <label class="block-label" for="{{ field.name }}-{{ loop.index }}">
<span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px"></span> {% if branding_dict.get(value, {}).get('colour') %}
{% endif %} <span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px"></span>
{% if branding_dict.get(value, {}).get('logo') %} {% endif %}
<img {% if branding_dict.get(value, {}).get('logo') %}
src="{{ branding_dict[value].logo }}" <img
height="27" src="{{ branding_dict[value].logo }}"
/> height="27"
{% endif %} />
{{option}} {% endif %}
</label> {{option}}
</label>
</div>
{% endfor %} {% endfor %}
</fieldset> </fieldset>
</div> </div>

2
app/templates/components/table.html
View File

@@ -1,7 +1,7 @@
{% from "components/big-number.html" import big_number %} {% from "components/big-number.html" import big_number %}
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%} {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
<table class="table"> <table class="table table-font-xsmall">
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}"> <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
{{ caption }} {{ caption }}
</caption> </caption>

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

@@ -11,7 +11,7 @@
safe_error_message=False, safe_error_message=False,
rows=8 rows=8
) %} ) %}
<div class="form-group{% if field.errors %} error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}> <div class="form-group{% if field.errors %} form-group-error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}>
<label class="form-label" for="{{ field.name }}"> <label class="form-label" for="{{ field.name }}">
{% if label %} {% if label %}
{{ label }} {{ label }}
@@ -29,10 +29,20 @@
</span> </span>
{% endif %} {% endif %}
</label> </label>
{%
if highlight_tags
%}
{% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
{% else %}
{% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
{% endif %}
{%
set field_class = 'form-control ' + field_class + (
' form-control-error' if field.errors else ''
)
%}
{{ field(**{ {{ field(**{
'class': 'class': field_class,
'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else
'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''),
'data-module': 'highlight-tags' if highlight_tags else '', 'data-module': 'highlight-tags' if highlight_tags else '',
'rows': rows|string 'rows': rows|string
}) }} }) }}

8
app/templates/views/manage-users/permissions.html
View File

@@ -4,9 +4,9 @@
<legend class="form-label"> <legend class="form-label">
Permissions Permissions
</legend> </legend>
{{ checkbox(form.send_messages, block=True) }} {{ checkbox(form.send_messages) }}
{{ checkbox(form.manage_service, block=True) }} {{ checkbox(form.manage_service) }}
{{ checkbox(form.manage_api_keys, block=True) }} {{ checkbox(form.manage_api_keys) }}
</fieldset> </fieldset>
<div class="form-group"> <div class="form-group">
@@ -18,4 +18,4 @@
<li>history of sent messages</li> <li>history of sent messages</li>
<li>who the other team members are</li> <li>who the other team members are</li>
</ul> </ul>
</div> </div>

1
gulpfile.babel.js
View File

@@ -54,7 +54,6 @@ gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/
gulp.task('javascripts', () => gulp gulp.task('javascripts', () => gulp
.src([ .src([
paths.toolkit + 'javascripts/govuk/modules.js', paths.toolkit + 'javascripts/govuk/modules.js',
paths.toolkit + 'javascripts/govuk/selection-buttons.js',
paths.src + 'javascripts/detailsPolyfill.js', paths.src + 'javascripts/detailsPolyfill.js',
paths.src + 'javascripts/apiKey.js', paths.src + 'javascripts/apiKey.js',
paths.src + 'javascripts/autofocus.js', paths.src + 'javascripts/autofocus.js',

6
package.json
View File

@@ -21,9 +21,9 @@
"babel-core": "6.3.26", "babel-core": "6.3.26",
"babel-preset-es2015": "6.3.13", "babel-preset-es2015": "6.3.13",
"diff-dom": "2.1.0", "diff-dom": "2.1.0",
"govuk-elements-sass": "1.1.1", "govuk-elements-sass": "3.0.x",
"govuk_frontend_toolkit": "4.6.0", "govuk_frontend_toolkit": "5.2.x",
"govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.19.1/jinja_govuk_template-0.19.1.tgz", "govuk_template_jinja": "0.19.x",
"gulp": "3.9.0", "gulp": "3.9.0",
"gulp-add-src": "0.2.0", "gulp-add-src": "0.2.0",
"gulp-babel": "6.1.1", "gulp-babel": "6.1.1",