mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +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-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">
|
||||
<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>
|
||||
<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>
|
||||
{% if fold_item is defined and fold_item != 'false' %}
|
||||
<div class="accordion-header" id="flush-heading-{{ notification.id }}">
|
||||
<button class="accordion-button collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapse-{{ notification.id }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="flush-collapse-{{ notification.id }}">
|
||||
{% 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>
|
||||
|
||||
@ -46,10 +46,12 @@
|
||||
<p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="flex-table">
|
||||
<div class="flex-table accordion accordion-flush" id="notification-fold">
|
||||
{% for data in datas %}
|
||||
{% set notification = data.notification %}
|
||||
{% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
|
||||
{% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
|
||||
'fold_item': 'true'
|
||||
} %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user