Skip to content

Commit

Permalink
IBX-2399: Introduce reusable twig modal component (#335)
Browse files Browse the repository at this point in the history
  • Loading branch information
tischsoic authored Mar 7, 2022
1 parent bcae99a commit 89e6871
Show file tree
Hide file tree
Showing 25 changed files with 564 additions and 567 deletions.
39 changes: 22 additions & 17 deletions src/bundle/Resources/public/scss/_modals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,6 @@
@include modal-footer();
}

&--table-content {
.modal-header {
border-width: 0;
}

.modal-body {
padding-top: 0;
}
}

&--no-header {
.close {
@include close-button();
Expand All @@ -51,13 +41,6 @@
}
}

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

&--has-subtitle {
.modal-header {
border-bottom: 0;
Expand All @@ -70,4 +53,26 @@
color: $ibexa-color-dark-400;
}
}

&--no-header-border {
&:not(.ibexa-modal--has-subtitle) {
.modal-header {
border-width: 0;
}

.modal-body {
padding-top: 0;
}
}

&.ibexa-modal--has-subtitle {
.ibexa-modal__subheader {
border-width: 0;
}

.modal-body {
padding-top: 0;
}
}
}
}
4 changes: 0 additions & 4 deletions src/bundle/Resources/public/scss/_notifications-modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@
}
}

.modal-body {
padding-top: 0;
}

.table {
table-layout: fixed;
white-space: normal;
Expand Down
20 changes: 0 additions & 20 deletions src/bundle/Resources/translations/content_type.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,6 @@
<target state="new">Select a language:</target>
<note>key: content_type.edit.select_language</note>
</trans-unit>
<trans-unit id="9eb89a2f51954babc5ff51f9060cbcda91dcf408" resname="content_type.field_definitions.modal.message">
<source>Do you want to delete the selected Field definition(s)?</source>
<target state="new">Do you want to delete the selected Field definition(s)?</target>
<note>key: content_type.field_definitions.modal.message</note>
</trans-unit>
<trans-unit id="2aecf6f88fd1ee89037907b8743d5873879a0590" resname="content_type.field_definitions_data">
<source>Content Field definitions</source>
<target state="new">Content Field definitions</target>
Expand Down Expand Up @@ -811,11 +806,6 @@
<target state="new">Username pattern</target>
<note>key: field_definition.ezuser.username_pattern</note>
</trans-unit>
<trans-unit id="92d9243bb9fac540233dc376b41a3bcd41615ccc" resname="field_definition.field_group">
<source>Category</source>
<target state="new">Category</target>
<note>key: field_definition.field_group</note>
</trans-unit>
<trans-unit id="8b863a9c7cd91565182ad0a3a5e30ca8090f84c7" resname="field_definition.identifier">
<source>Identifier</source>
<target state="new">Identifier</target>
Expand Down Expand Up @@ -866,16 +856,6 @@
<target state="new">Update</target>
<note>key: location_update_form.update</note>
</trans-unit>
<trans-unit id="7fe072f41348fb097b6bb018eec4f1b1bc9cffc3" resname="modal.cancel">
<source>Cancel</source>
<target state="new">Cancel</target>
<note>key: modal.cancel</note>
</trans-unit>
<trans-unit id="9eae227b7c27ab230a6d0ce5947d93e7d2e1626f" resname="modal.delete">
<source>Delete</source>
<target state="new">Delete</target>
<note>key: modal.delete</note>
</trans-unit>
<trans-unit id="fd1286353570c5703799ba76999323b7c7447b06" resname="no">
<source>No</source>
<target state="new">No</target>
Expand Down
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/content_url.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,6 @@
<target state="new">Do you want to delete the selected custom URL alias(es)?</target>
<note>key: tab.urls.modal.message</note>
</trans-unit>
<trans-unit id="777d1a83ab6a6c4644dd31409906e48a0a7a4a51" resname="tab.urls.modal_close">
<source>Close</source>
<target state="new">Close</target>
<note>key: tab.urls.modal_close</note>
</trans-unit>
<trans-unit id="56d218db883ed4cc59dbbca53364dc2e725013e4" resname="tab.urls.no_custom_urls">
<source>This Content item has no custom URL aliases.</source>
<target state="new">This Content item has no custom URL aliases.</target>
Expand Down
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/draft_conflict.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,6 @@
<target state="new">You can edit any of your existing draft(s)</target>
<note>key: draft.conflict.choice_content_is_user</note>
</trans-unit>
<trans-unit id="fef7e84ac6fda81cb700fa5519940989c34dd9c7" resname="draft.conflict.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: draft.conflict.close</note>
</trans-unit>
<trans-unit id="57ae8e493adef8a884a3f0c5e9e4501b7f2ec395" resname="draft.conflict.header">
<source>Draft conflict</source>
<target state="new">Draft conflict</target>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,6 @@
<target state="new">Cancel</target>
<note>key: url_wildcard.modal.create.cancel</note>
</trans-unit>
<trans-unit id="3b106aba8acc4b0b7bf7174a49b66ba9411d224a" resname="url_wildcard.modal.create.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: url_wildcard.modal.create.close</note>
</trans-unit>
<trans-unit id="75d2bf0fb2fc725c0e6909a48601346997114d22" resname="url_wildcard.modal.create.redirect">
<source>Redirect to wildcard destination</source>
<target state="new">Redirect to wildcard destination</target>
Expand Down
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/locationview.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -436,11 +436,6 @@
<target state="new">On</target>
<note>key: toggle_widget.label.on</note>
</trans-unit>
<trans-unit id="cf6a7c9a98608dd58b428ce2187e3229b64b5701" resname="translation.modal_close">
<source>Close</source>
<target state="new">Close</target>
<note>key: translation.modal_close</note>
</trans-unit>
<trans-unit id="c285bc654712e44ed56cd6f18262a2d6485f4fb9" resname="user.edit.select_language">
<source>Select a language:</source>
<target state="new">Select a language:</target>
Expand Down
10 changes: 0 additions & 10 deletions src/bundle/Resources/translations/messages.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -503,11 +503,6 @@
<target state="new">Cancel</target>
<note>key: modal.cancel</note>
</trans-unit>
<trans-unit id="ec403158b3fd1e13dbc66f2de51e235fdb178188" resname="modal.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: modal.close</note>
</trans-unit>
<trans-unit id="9eae227b7c27ab230a6d0ce5947d93e7d2e1626f" resname="modal.delete">
<source>Delete</source>
<target state="new">Delete</target>
Expand Down Expand Up @@ -708,11 +703,6 @@
<target state="new">Cancel</target>
<note>key: trash.form.cancel</note>
</trans-unit>
<trans-unit id="7f37e5f732ee7101a696a881cf22045bcd11359c" resname="trash.modal.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: trash.modal.close</note>
</trans-unit>
<trans-unit id="2720e3018fc8b1158cb728b1d5dc377ef7293b57" resname="trash.modal.message">
<source>Do you want to delete the selected item(s) from Trash?</source>
<target state="new">Do you want to delete the selected item(s) from Trash?</target>
Expand Down
21 changes: 21 additions & 0 deletions src/bundle/Resources/translations/modal.en.xliff
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
<file source-language="en" target-language="en" datatype="plaintext" original="not.available">
<header>
<tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
<note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
</header>
<body>
<trans-unit id="8b23f97eb81bd9e3e5b47f858e2922e526a9c1cb" resname="close_btn.aria_label">
<source>Close</source>
<target state="new">Close</target>
<note>key: close_btn.aria_label</note>
</trans-unit>
<trans-unit id="16af4f3a9799e5f803be1d7d9ca493e74bd2db40" resname="close_btn.title">
<source>Close</source>
<target state="new">Close</target>
<note>key: close_btn.title</note>
</trans-unit>
</body>
</file>
</xliff>
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/notifications.en.xliff
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@
<target state="new">View Notifications</target>
<note>key: menu.notification</note>
</trans-unit>
<trans-unit id="eb06b630bdbe8797de235f738a47ccc5b824aa2c" resname="notification.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: notification.close</note>
</trans-unit>
<trans-unit id="fc349b70133a7a68cae9be363e112ee397044b6a" resname="notification.date">
<source>Date</source>
<target state="new">Date</target>
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
@@ -1,36 +1,41 @@
{% trans_default_domain 'locationview' %}

{% form_theme form '@ibexadesign/content/translation_add_form_fields.html.twig' %}
{% 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',
} %}
{% trans_default_domain 'locationview' %}
{% 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">
{% 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 %}
Loading

0 comments on commit 89e6871

Please sign in to comment.