mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
notification list: use bootstrap accordion to fold/unfold notification content
This commit is contained in:
parent
22022e5143
commit
120ce40dbe
@ -66,3 +66,15 @@ div.notification-show {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Override bootstrap accordion
|
||||||
|
div#notification-fold {
|
||||||
|
.accordion-button {
|
||||||
|
padding: 0;
|
||||||
|
background-color: unset;
|
||||||
|
&:not(.collapsed) {
|
||||||
|
background-color: unset;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,91 +1,118 @@
|
|||||||
<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
|
<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
|
||||||
<div class="item-row title">
|
|
||||||
<h2 class="notification-title">
|
|
||||||
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
|
|
||||||
{{ 'notification.object_prefix'|trans ~ notification.title }}
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="item-row mt-2 notification-header">
|
|
||||||
|
|
||||||
<div class="item-col">
|
{% if fold_item is defined and fold_item != 'false' %}
|
||||||
<ul class="small_in_title">
|
<div class="accordion-header" id="flush-heading-{{ notification.id }}">
|
||||||
{% if step is not defined or step == 'inbox' %}
|
<button class="accordion-button collapsed"
|
||||||
<li class="notification-from">
|
type="button"
|
||||||
<span class="item-key">
|
data-bs-toggle="collapse"
|
||||||
<abbr title="{{ 'notification.received_from'|trans }}">
|
data-bs-target="#flush-collapse-{{ notification.id }}"
|
||||||
{{ 'notification.from'|trans }} :
|
aria-expanded="false"
|
||||||
</abbr>
|
aria-controls="flush-collapse-{{ notification.id }}">
|
||||||
</span>
|
|
||||||
{% if not notification.isSystem %}
|
|
||||||
<span class="badge-user">
|
|
||||||
{{ notification.sender|chill_entity_render_string }}
|
|
||||||
</span>
|
|
||||||
{% else %}
|
|
||||||
<span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
|
|
||||||
{% endif %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% if notification.addressees|length > 0 %}
|
|
||||||
<li class="notification-to">
|
|
||||||
<span class="item-key">
|
|
||||||
<abbr title="{{ 'notification.sent_to'|trans }}">
|
|
||||||
{{ 'notification.to'|trans }} :
|
|
||||||
</abbr>
|
|
||||||
</span>
|
|
||||||
{% for a in notification.addressees %}
|
|
||||||
<span class="badge-user">
|
|
||||||
{{ a|chill_entity_render_string }}
|
|
||||||
</span>
|
|
||||||
{% endfor %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item-col">
|
|
||||||
{{ notification.date|format_datetime('long', 'short') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item-row separator">
|
|
||||||
<div class="mx-3 flex-grow-1">
|
|
||||||
{% include data.template with data.template_data %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-row">
|
|
||||||
<div class="notification-content">
|
|
||||||
{% if full_content is defined and full_content == 'true' %}
|
|
||||||
{{ notification.message|chill_markdown_to_html }}
|
|
||||||
{% else %}
|
|
||||||
{{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% if action_button is not defined or action_button != 'false' %}
|
|
||||||
<div class="item-row separator">
|
|
||||||
<ul class="record_actions">
|
|
||||||
<li>
|
|
||||||
{# Vue component #}
|
|
||||||
<span class="notification_toggle_read_status"
|
|
||||||
data-notification-id="{{ notification.id }}"
|
|
||||||
data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
|
|
||||||
data-container="notification-status"
|
|
||||||
></span>
|
|
||||||
</li>
|
|
||||||
{% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
|
|
||||||
class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
|
|
||||||
class="btn btn-show change-icon" title="{{ 'notification.see_comments_thread'|trans }}"><i class="fa fa-comment"></i></a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="item-row title">
|
||||||
|
<h2 class="notification-title">
|
||||||
|
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
|
||||||
|
{{ 'notification.object_prefix'|trans ~ notification.title }}
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if fold_item is defined and fold_item != 'false' %}
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="item-row notification-header mt-2">
|
||||||
|
<div class="item-col">
|
||||||
|
<ul class="small_in_title">
|
||||||
|
{% if step is not defined or step == 'inbox' %}
|
||||||
|
<li class="notification-from">
|
||||||
|
<span class="item-key">
|
||||||
|
<abbr title="{{ 'notification.received_from'|trans }}">
|
||||||
|
{{ 'notification.from'|trans }} :
|
||||||
|
</abbr>
|
||||||
|
</span>
|
||||||
|
{% if not notification.isSystem %}
|
||||||
|
<span class="badge-user">
|
||||||
|
{{ notification.sender|chill_entity_render_string }}
|
||||||
|
</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if notification.addressees|length > 0 %}
|
||||||
|
<li class="notification-to">
|
||||||
|
<span class="item-key">
|
||||||
|
<abbr title="{{ 'notification.sent_to'|trans }}">
|
||||||
|
{{ 'notification.to'|trans }} :
|
||||||
|
</abbr>
|
||||||
|
</span>
|
||||||
|
{% for a in notification.addressees %}
|
||||||
|
<span class="badge-user">
|
||||||
|
{{ a|chill_entity_render_string }}
|
||||||
|
</span>
|
||||||
|
{% endfor %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="item-col">
|
||||||
|
{{ notification.date|format_datetime('long', 'short') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if fold_item is defined and fold_item != 'false' %}
|
||||||
|
</div>
|
||||||
|
<div id="flush-collapse-{{ notification.id }}"
|
||||||
|
class="accordion-collapse collapse"
|
||||||
|
aria-labelledby="flush-heading-{{ notification.id }}"
|
||||||
|
data-bs-parent="#notification-fold">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="item-row separator">
|
||||||
|
<div class="mx-3 flex-grow-1">
|
||||||
|
{% include data.template with data.template_data %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-row">
|
||||||
|
<div class="notification-content">
|
||||||
|
{% if full_content is defined and full_content == 'true' %}
|
||||||
|
{{ notification.message|chill_markdown_to_html }}
|
||||||
|
{% else %}
|
||||||
|
{{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if action_button is not defined or action_button != 'false' %}
|
||||||
|
<div class="item-row separator">
|
||||||
|
<ul class="record_actions">
|
||||||
|
<li>
|
||||||
|
{# Vue component #}
|
||||||
|
<span class="notification_toggle_read_status"
|
||||||
|
data-notification-id="{{ notification.id }}"
|
||||||
|
data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
|
||||||
|
data-container="notification-status"
|
||||||
|
></span>
|
||||||
|
</li>
|
||||||
|
{% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
|
||||||
|
class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
|
||||||
|
class="btn btn-show change-icon" title="{{ 'notification.see_comments_thread'|trans }}"><i class="fa fa-comment"></i></a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if fold_item is defined and fold_item != 'false' %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -46,10 +46,12 @@
|
|||||||
<p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
|
<p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="flex-table">
|
<div class="flex-table accordion accordion-flush" id="notification-fold">
|
||||||
{% for data in datas %}
|
{% for data in datas %}
|
||||||
{% set notification = data.notification %}
|
{% set notification = data.notification %}
|
||||||
{% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
|
{% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
|
||||||
|
'fold_item': 'true'
|
||||||
|
} %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user