Files
notifications-admin/app/templates/components/table.html
Chris Hill-Scott b8cc0de44e Use file list pattern for notifications
Most of our tables are now lists which have:
- a thing you click on
- some secondary info about that thing underneath
- some extra numbers/status on the right hand side

Since these are so similar, they should share the same pattern, which
this commit does (using the `file-list` pattern).

Visually this means:
- the secondary text on the inbox becomes grey not black, for
  consistency
- the status bit of the notifications tables bottom align like the
  status of messages in the inbox

These both seem like OK changes to make for the sake of consistency.
2017-06-21 17:57:20 +01:00

160 lines
4.7 KiB
HTML

{% from "components/big-number.html" import big_number %}
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
<table class="table table-font-xsmall">
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
{{ caption }}
</caption>
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
<tr>
{% for field_heading in field_headings %}
<th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
{% if field_headings_visible %}
{{ field_heading }}
{% else %}
<span class="visuallyhidden">{{ field_heading }}</span>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{{ caller() }}
</tbody>
</table>
{%- endmacro %}
{% macro list_table(items, caption='', empty_message='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
{% set parent_caller = caller %}
{% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
{% for item in items %}
{% call row(item.id) %}
{{ parent_caller(item, loop.index + 1) }}
{% endcall %}
{% endfor %}
{% if not items %}
{% call row() %}
<td class="table-empty-message" colspan="10">
{{ empty_message }}
</td>
{% endcall %}
{% endif %}
{%- endcall %}
{%- endmacro %}
{% macro row(id=None) -%}
<tr class="table-row" {% if id %}id="{{id}}"{% endif %}>
{{ caller() }}
</tr>
{%- endmacro %}
{% macro row_group(id=None) %}
<tbody class="table-row-group" {% if id %}id="{{id}}"{% endif %}>
{{ caller() }}
</tbody>
{%- endmacro %}
{% macro field(align='left', status='', border=True) -%}
{% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-center-aligned' %}
{% set border = '' if border else 'table-field-noborder' %}
<td class="{{ [field_alignment, border]|join(' ') }}">
<div class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</div>
</td>
{%- endmacro %}
{% macro row_heading() -%}
<th class="table-field">
{{ caller() }}
</th>
{%- endmacro %}
{% macro index_field(text=None) -%}
<td class="table-field-index">
{{ text if text != None else caller() }}
</td>
{%- endmacro %}
{% macro text_field(text, status='') -%}
{% call field(status=status) %}
{% if text is iterable and text is not string %}
<ul class="list list-bullet">
{% for item in text %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% else %}
{{ text }}
{% endif %}
{% endcall %}
{%- endmacro %}
{% macro link_field(text, link) -%}
{% call field() %}
<a href="{{ link }}">{{ text }}</a>
{% endcall %}
{%- endmacro %}
{% macro edit_field(text, link) -%}
{% call field(align='right') %}
<a href="{{ link }}">{{ text }}</a>
{% endcall %}
{%- endmacro %}
{% macro boolean_field(value) -%}
{{ text_field('On' if value else 'Off') }}
{%- endmacro %}
{% macro right_aligned_field_heading(text) %}
<span class="table-field-heading-right-aligned">{{ text }}</span>
{%- endmacro %}
{% macro hidden_field_heading(text) %}
<span class="visuallyhidden">{{ text }}</span>
{%- endmacro %}
{% macro notification_status_field(notification) %}
{% call field(status=notification.status|format_notification_status_as_field_status, align='right') %}
{% if notification.status in ['created', 'sending', 'delivered'] %}<span class="align-with-message-body">{% endif %}
{% if notification.status|format_notification_status_as_url %}
<a href="{{ notification.status|format_notification_status_as_url }}">
{% endif %}
{{ notification.status|format_notification_status(
notification.template.template_type
) }}
{% if notification.status|format_notification_status_as_url %}
</a>
{% endif %}
<span class="status-hint">
{{ notification.status|format_notification_status_as_time(
notification.created_at|format_datetime_short,
(notification.updated_at or notification.created_at)|format_datetime_short
) }}
</span>
{% if notification.status in ['created', 'sending', 'delivered'] %}</span>{% endif %}
{% endcall %}
{% endmacro %}
{% macro spark_bar_field(
count,
max_count,
id=None
) %}
{% call field(align='right') %}
<span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
<span style="width: {{ count / max_count * 100 }}%">
{{ big_number(
count,
smallest=True
) }}
</span>
</span>
{% endcall %}
{% endmacro %}