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

Make radio select work w/ new checkboxes/radios

Browse Source 
The visual appearance of radio and checkbox form inputs changed in
GOV.UK Elements here:

https://github.com/alphagov/govuk_elements/pull/296

This was subsequently reimplemented with different markup and no
Javascript here:
https://github.com/alphagov/govuk_elements/pull/406

This has meant making the following changes to our app:
- changing the markup in our radio/checkbox macros to match the example
  markup given by GOV.UK Elements
- removing the previous Javascript file because it’s no longer needed to
  make the radios appear visual selected
- making the buttons on the scheduled job picker look like links,
  because the grey button style looked weird with the new radio buttons
This commit is contained in:
Chris Hill-Scott
2016-12-19 10:36:17 +00:00
parent 31d03acc11
commit a592898eff
7 changed files with 91 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -5,19 +5,25 @@
display: inline-block;
vertical-align: top;
.block-label {
.multiple-choice {
margin-right: 5px;
padding-right: $gutter - 10px;
padding-right: 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;
vertical-align: top;
width: auto;
padding: 20px $gutter-half 15px $gutter-half;
padding: 7px 20px 7px 10px;
margin-right: 5px;
}
@@ -26,12 +32,12 @@
height: 60px;
overflow: visible;
.block-label {
.multiple-choice {
display: none;
}
.js-block-label {
display: inline-block;
.js-multiple-choice {
display: block;
}
}

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

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

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

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

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

@@ -4,9 +4,9 @@
<legend class="form-label">
Permissions
</legend>
{{ checkbox(form.send_messages, block=True) }}
{{ checkbox(form.manage_service, block=True) }}
{{ checkbox(form.manage_api_keys, block=True) }}
{{ checkbox(form.send_messages) }}
{{ checkbox(form.manage_service) }}
{{ checkbox(form.manage_api_keys) }}
</fieldset>
<div class="form-group">
@@ -18,4 +18,4 @@
<li>history of sent messages</li>
<li>who the other team members are</li>
</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
.src([
paths.toolkit + 'javascripts/govuk/modules.js',
paths.toolkit + 'javascripts/govuk/selection-buttons.js',
paths.src + 'javascripts/detailsPolyfill.js',
paths.src + 'javascripts/apiKey.js',
paths.src + 'javascripts/autofocus.js',