Skip to content

Commit

Permalink
Refactor modals with new twig component
Browse files Browse the repository at this point in the history
  • Loading branch information
tischsoic committed Feb 28, 2022
1 parent b3409e6 commit 0855b1e
Show file tree
Hide file tree
Showing 16 changed files with 397 additions and 491 deletions.
7 changes: 0 additions & 7 deletions src/bundle/Resources/public/scss/_modals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,6 @@
}
}

&--wide {
.modal-dialog {
max-width: calculateRem(800px);
width: calculateRem(800px);
}
}

&--has-subtitle {
.modal-header {
border-bottom: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,45 +1,25 @@
{% trans_default_domain 'notifications' %}

<div
class="modal fade ibexa-notifications-modal ibexa-modal ibexa-modal--table-content"
id="view-notifications"
tabindex="-1"
role="dialog">
<div
class="modal-dialog"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
data-notifications-total="">
{{ 'notifications'|trans|desc('Notifications') }}
</h5>
<button
type="button"
class="close"
title="{{ 'notification.close'|trans|desc('Close') }} "
data-bs-dismiss="modal"
aria-label="Close">
<svg
class="ibexa-icon ibexa-icon--small-medium"
aria-hidden="true">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
</div>
<div class="modal-body">
<div class="ibexa-notifications-modal__spinner">
<svg class="ibexa-icon ibexa-spin">
<use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
</svg>
</div>
<div class="ibexa-notifications-modal__results">
{{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\NotificationController::renderNotificationsPageAction', {
'page': 1,
})) }}
</div>
</div>
{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
title: 'notifications'|trans|desc('Notifications'),
subtitle: 'Some subtitle',
class: 'ibexa-notifications-modal',
no_header_border: true,
id: 'view-notifications',
attr_close_btn: {
'data-notifications-total': '',
},
} %}
{% block body_content %}
<div class="ibexa-notifications-modal__spinner">
<svg class="ibexa-icon ibexa-spin">
<use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
</svg>
</div>
</div>
</div>
<div class="ibexa-notifications-modal__results">
{{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\NotificationController::renderNotificationsPageAction', {
'page': 1,
})) }}
</div>
{% endblock %}
{% endembed %}
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,39 @@

{% form_theme form '@ibexadesign/content/translation_add_form_fields.html.twig' %}

<div class="modal fade ibexa-modal ibexa-translation" id="add-translation-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
title: 'tab.translations.add.title'|trans|desc('Create a new translation'),
class: 'ibexa-translation',
id: 'add-translation-modal',
} %}
{% block content_before %}
{% set action = action is defined ? action : path('ibexa.translation.add') %}
{{ form_start(form, {'action': action}) }}
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'tab.translations.add.title'|trans|desc('Create a new translation') }}</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{{ 'translation.modal_close'|trans|desc('Close') }}">
<svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
</div>
<div class="modal-body">
{{ form_row(form.base_language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--base-language'}}) }}
<div class="ibexa-translation__arrow">
<svg class="ibexa-icon ibexa-icon--medium">
<use xlink:href="{{ ibexa_icon_path('back') }}"></use>
</svg>
</div>
{{ form_row(form.language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--language'}}) }}
</div>
<div class="modal-footer">
{{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }}
<button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
{{ 'tab.translations.add.cancel'|trans|desc('Cancel') }}
</button>
</div>
</div>
{% endblock %}
{% block body_content %}
{{ form_row(form.base_language, {
'attr': {
'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--base-language'
},
}) }}
<div class="ibexa-translation__arrow">
<svg class="ibexa-icon ibexa-icon--medium">
<use xlink:href="{{ ibexa_icon_path('back') }}"></use>
</svg>
</div>
{{ form_row(form.language, {
'attr': {
'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--language'
},
}) }}
{% endblock %}
{% block footer_content %}
{{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }}
<button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
{{ 'tab.translations.add.cancel'|trans|desc('Cancel') }}
</button>
{% endblock %}
{% block content_after %}
{{ form_end(form) }}
</div>
</div>
{% endblock %}
{% endembed %}
Original file line number Diff line number Diff line change
@@ -1,56 +1,44 @@
{% trans_default_domain 'draft_conflict' %}

{% import _self as version_modal_draft_conflict %}
{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
title: 'draft.conflict.header'|trans|desc('Draft conflict'),
class: 'ibexa-modal--version-draft-conflict',
size: 'large',
id: 'version-draft-conflict-modal',
version_modal_draft_conflict: _self,
} %}
{% import version_modal_draft_conflict as version_modal_draft_conflict_embed %}

<div class="modal fade ibexa-modal ibexa-modal--version-draft-conflict" id="version-draft-conflict-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'draft.conflict.header'|trans|desc('Draft conflict') }}</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label={{ 'draft.conflict.close'|trans|desc('Close') }}
title={{ 'draft.conflict.close'|trans|desc('Close') }}
>
<svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
</div>
<div class="modal-body">
<div class="ibexa-modal-body__main">
{% set number = conflicted_drafts|length %}
{% if number == 1 %}
{{ 'draft.conflict.number.one'|trans|desc('There is already one draft for this Content item.') }}
{% else %}
{{ 'draft.conflict.number.multiple'|trans({ '%number%': number })|desc('There are already %number% drafts for this Content item.') }}
{% endif %}
<br/>
{% if content_is_user %}
{{ 'draft.conflict.choice_content_is_user'|trans({})|desc('You can edit any of your existing draft(s)') }}
{% else %}
{{ 'draft.conflict.choice'|trans({})|desc('You can either edit any of your existing draft(s) or add a new one.') }}
{% endif %}
</div>
{% set show_add_draft_button = (not content_is_user) %}
{% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
headline: '',
actions: version_modal_draft_conflict.table_header_tools(show_add_draft_button),
} only %}
{{ include('@ibexadesign/content/tab/versions/table.html.twig', {
'versions': conflicted_drafts,
'location': location,
'is_draft': true,
'have_to_paginate': false,
'is_draft_conflict': true,
'content_is_user': content_is_user
}) }}
</div>
{% block body_content %}
<div class="ibexa-modal-body__main">
{% set number = conflicted_drafts|length %}
{% if number == 1 %}
{{ 'draft.conflict.number.one'|trans|desc('There is already one draft for this Content item.') }}
{% else %}
{{ 'draft.conflict.number.multiple'|trans({ '%number%': number })|desc('There are already %number% drafts for this Content item.') }}
{% endif %}
<br/>
{% if content_is_user %}
{{ 'draft.conflict.choice_content_is_user'|trans({})|desc('You can edit any of your existing draft(s)') }}
{% else %}
{{ 'draft.conflict.choice'|trans({})|desc('You can either edit any of your existing draft(s) or add a new one.') }}
{% endif %}
</div>
</div>
</div>
{% set show_add_draft_button = (not content_is_user) %}
{% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
headline: '',
actions: version_modal_draft_conflict_embed.table_header_tools(show_add_draft_button),
} only %}
{{ include('@ibexadesign/content/tab/versions/table.html.twig', {
'versions': conflicted_drafts,
'location': location,
'is_draft': true,
'have_to_paginate': false,
'is_draft_conflict': true,
'content_is_user': content_is_user
}) }}
{% endblock %}
{% endembed %}

{% macro table_header_tools(show_add_button) %}
{% if show_add_button %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,45 +1,34 @@
{% trans_default_domain 'locationview' %}

<div
class="modal fade ibexa-modal ibexa-modal--table-content ibexa-modal--bulk-action-failed ibexa-bulk-action-failed-modal"
id="bulk-action-failed-modal"
tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'content.view.subitems.bulk_action.limited_permissions'|trans|desc('Limited user permissions') }}</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
</div>
<div class="modal-body">
{% set table_row_template %}
{{ include('@ibexadesign/ui/component/table/table_body_row.html.twig', {
body_row_cols: [
{ content: '{{ content_name }}' },
{ content: '{{ content_type_name }}' },
],
}) }}
{% endset %}
{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
title: 'content.view.subitems.bulk_action.limited_permissions'|trans|desc('Limited user permissions'),
class: 'ibexa-modal--bulk-action-failed ibexa-bulk-action-failed-modal',
no_header_border: true,
id: 'bulk-action-failed-modal',
} %}
{% block body_content %}
{% set table_row_template %}
{{ include('@ibexadesign/ui/component/table/table_body_row.html.twig', {
body_row_cols: [
{ content: '{{ content_name }}' },
{ content: '{{ content_type_name }}' },
],
}) }}
{% endset %}

{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
headline: ' ',
head_cols: [
{ content: 'bulk_action.failed.modal.content_name'|trans|desc('Name') },
{ content: 'bulk_action.failed.modal.content_type_name'|trans|desc('Content Type') },
],
class: 'ibexa-bulk-action-failed-modal__table',
table_body_class: 'ibexa-bulk-action-failed-modal__table-body',
attr: {
'data-row-template': table_row_template,
},
} %}
{% block tbody %}{% endblock %}
{% endembed %}
</div>
</div>
</div>
</div>
{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
headline: ' ',
head_cols: [
{ content: 'bulk_action.failed.modal.content_name'|trans|desc('Name') },
{ content: 'bulk_action.failed.modal.content_type_name'|trans|desc('Content Type') },
],
class: 'ibexa-bulk-action-failed-modal__table',
table_body_class: 'ibexa-bulk-action-failed-modal__table-body',
attr: {
'data-row-template': table_row_template,
},
} %}
{% block tbody %}{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
Loading

0 comments on commit 0855b1e

Please sign in to comment.