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

Update templates page

Browse Source 
Includes:
- changes to the govukCheckboxesField class
  to allow params to be extended at render time
- updates to templates and folders CSS
This commit is contained in:
Tom Byers
2020-04-09 11:51:11 +01:00
parent 0291fbc1cb
commit 33d8171675
3 changed files with 108 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/components/message.scss
View File

@@ -24,6 +24,9 @@
}
}
$message-text-left-spacing: 22px;
$message-type-bottom-spacing: govuk-spacing(4);
.message {
&-name {
@@ -63,23 +66,14 @@
}
&-type {
color: $secondary-text-colour;
margin: 0 0 govuk-spacing(4) 0;
color: $govuk-secondary-text-colour;
margin: 0 0 $message-type-bottom-spacing 0;
padding-left: 0;
pointer-events: none;
}
}
#template-list {
margin-top: govuk-spacing(6);
&.top-gutter-5px {
margin-top: 5px;
}
}
.template-list {
&-item {
@@ -123,6 +117,22 @@
}
&-hint,
&-label {
padding-left: $message-text-left-spacing;
}
&-label {
padding-top: 0px;
padding-bottom: 0px;
}
// Fix for GOVUK Frontend selector with high precendence
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
&-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
margin-bottom: $message-type-bottom-spacing;
}
}
&-folder {

40
app/main/forms.py
View File

@@ -623,11 +623,34 @@ class govukCheckboxesField(govukCheckboxesMixin, SelectMultipleField):
def get_items_from_options(self, field):
return [self.get_item_from_option(option) for option in field]
def extend_params(self, params, extensions):
items = None
param_items = len(params['items']) if 'items' in params else 0
# split items off from params to make it a pure dict
if 'items' in extensions:
items = extensions['items']
del extensions['items']
# merge dicts
params.update(extensions)
# merge items
if items:
if 'items' not in params:
params['items'] = items
else:
for idx, _item in enumerate(items):
if idx >= param_items:
params['items'].append(items[idx])
else:
params['items'][idx].update(items[idx])
# self.__call__ renders the HTML for the field by:
# 1. delegating to self.meta.render_field which
# 2. calls field.widget
# this bypasses that by making self.widget a method with the same interface as widget.__call__
def widget(self, field, **kwargs):
def widget(self, field, param_extensions=None, **kwargs):
# error messages
error_message = None
@@ -1898,9 +1921,18 @@ class TemplateAndFoldersSelectionForm(Form):
return self.move_to_new_folder_name.data
return None
templates_and_folders = MultiCheckboxField('Choose templates or folders', validators=[
required_for_ops('move-to-new-folder', 'move-to-existing-folder')
])
templates_and_folders = govukCheckboxesField(
'Choose templates or folders',
validators=[required_for_ops('move-to-new-folder', 'move-to-existing-folder')],
choices=[], # added to keep order of arguments, added properly in __init__
param_extensions={
"fieldset": {
"legend": {
"classes": "govuk-visually-hidden"
}
}
}
)
# if no default set, it is set to None, which process_data transforms to '__NONE__'
# this means '__NONE__' (self.ALL_TEMPLATES option) is selected when no form data has been submitted
# set default to empty string so process_data method doesn't perform any transformation

79
app/templates/views/templates/_template_list.html
View File

@@ -21,37 +21,58 @@
{% endif %}
</p>
{% else %}
<nav id="template-list" class="{{ 'top-gutter-5px' if (not show_template_nav and not show_search_box) else '' }}">
<nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!margin-top-6' }}">
{% set checkboxes_data = [] %}
{% for item in template_list %}
<div class="template-list-item {% if current_user.has_permissions('manage_templates') %}template-list-item-with-checkbox{% endif %} {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
{% if current_user.has_permissions('manage_templates') %}
{{ unlabelled_checkbox(
id='templates-or-folder-{}'.format(item.id),
name='templates_and_folders',
data=templates_and_folders_form.is_selected(item.id),
value=item.id,
) }}
{% set item_label_content %}
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% endif %}
<h2 class="message-name">
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% endif %}
</h2>
<p class="message-type">
{{ item.hint }}
</p>
</div>
{% endset %}
{# create the item config now to include the label content -#}
{% set checkbox_config = {
"html": item_label_content,
"label": {
"classes": "template-list-item-label govuk-!-font-size-24 govuk-!-font-weight-bold"
},
"id": "templates-or-folder-" ~ item.id,
"hint": {
"text": item.hint,
"classes": "template-list-item-hint"
},
"classes": "template-list-item {}".format(
"template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors")
} %}
{% set _ = checkboxes_data.append(checkbox_config) %}
{% if not current_user.has_permissions('manage_templates') %}
<div class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
<h2 class="message-name">
{{ item_label_content }}
</h2>
<p class="message-type govuk-!-margin-bottom-4">
{{ item.hint }}
</p>
</div>
{% endif %}
{% endfor %}
{% if current_user.has_permissions('manage_templates') %}
{{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
{% endif %}
</nav>
{% endif %}