Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IBX-2399: Introduce reusable twig modal component #335

Merged
merged 6 commits into from
Mar 7, 2022
Merged

IBX-2399: Introduce reusable twig modal component #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
833bc03
IBX-2399: Introduce reusable twig modal component
tischsoic Feb 21, 2022
7cc9aea
modal component further implementation
tischsoic Feb 22, 2022
d35bd28
Refactor modals with new twig component
tischsoic Feb 23, 2022
b6d1a07
fix
tischsoic Feb 28, 2022
a457541
fix translations
tischsoic Mar 3, 2022
b1fceaf
fix modal for modals without id
tischsoic Mar 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/bundle/Resources/public/scss/_modals.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/ezplatform_url_wildcard.en.xliff
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
64 changes: 22 additions & 42 deletions src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig
View file
Open in desktop
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 %}
65 changes: 35 additions & 30 deletions src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig
View file
Open in desktop
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