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

FRONT-2479: Modal pattern. #54

Merged
merged 2 commits into from
Sep 23, 2021
Merged

FRONT-2479: Modal pattern. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8de573
FRONT-2479: Modal pattern.
escuriola Aug 25, 2021
2c135d9
FRONT-2479: Make modal independent from button trigger.
escuriola Sep 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
115 changes: 51 additions & 64 deletions templates/patterns/modal/modal.ui_patterns.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,68 @@
modal:
label: Modal
description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. https://v5.getbootstrap.com/docs/5.0/components/modal/
label: "Modal"
description: "Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. https://v5.getbootstrap.com/docs/5.0/components/modal/"
settings:
btn_style:
type: select
label: Button style
options:
primary: primary
secondary: secondary
success: success
danger: danger
warning: warning
info: info
light: light
dark: dark
link: link
preview: primary
btn_outline:
type: boolean
label: Button outline
btn_size:
type: select
label: Button size
options:
sm: medium
lg: large
preview: lg
modal_size:
size:
type: select
label: Modal size
options:
sm: small
lg: large
xl: extra large
fullscreen:
type: select
label: Fullscreen size
options:
always: always
sm: below 576px
md: below 768px
lg: below 992px
xl: below 1200px
static_backdrop:
type: boolean
label: Static backdrop
description: When backdrop is set to static, the modal will not close when clicking outside it.
vertically_centered:
type: boolean
label: Vertically centered
description: Vertically center the modal.
preview: true
scrollable:
type: boolean
label: Scrollable
description: When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
preview: true
sm: "sm"
lg: "lg"
xl: "xl"
fullscreen: "fullscreen"
preview: lg
modal_id:
type: textfield
label: "Modal id"
preview: ''
fields:
label:
type: text
label: label
description: The toggle button label
preview: Open modal
title:
btn_label:
type: text
label: Title
preview: My Modal Title
closelabel:
label: "Button label"
description: "The button text to trigger the modal. If is not present, then button will not be printed, only the modal container."
preview: "Open the modal"
header:
type: text
label: close label
description: The close button label
preview: Close
content:
label: "Header"
description: "Modal header"
preview:
- type: html_tag
tag: h5
attributes:
class: "modal-title"
id: "exampleModalLabel"
value: "Modal title"
- type: html_tag
tag: button
attributes:
class: "btn-close"
data-bs-dismiss: "modal"
aria-label: "Close"
body:
type: render
label: Content
description: "Modal Content"
label: "Body"
description: "Modal body content"
preview:
- type: html_tag
tag: p
value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
footer:
type: render
label: "Footer"
description: "Modal footer"
preview:
- type: html_tag
tag: button
attributes:
class: "btn btn-secondary"
data-bs-dismiss: "modal"
value: "Close"
- type: html_tag
tag: button
attributes:
class: "btn btn-primary"
value: "Save changes"
75 changes: 18 additions & 57 deletions templates/patterns/modal/pattern-modal.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,31 @@
{% set id = 'modal-' ~ random(1000) %}
{#
/**
* @file
* Modal component.
*/
#}

{% set _modal_id = modal_id ? 'modal_' ~ modal_id : 'modal' %}

{% set attributes = attributes.addClass(['modal', 'fade']) %}
{% if static_backdrop %}
{% set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
{% set attributes = attributes.setAttribute('data-bs-keyboard', false) %}
{% endif %}

{% if btn_label is not empty %}
{% block trigger %}
{{ pattern('button', {
drishu marked this conversation as resolved.
Show resolved Hide resolved
label: label,
label: btn_label,
style: btn_style,
outline: btn_outline,
size: btn_size,
attributes: create_attribute({
'data-bs-toggle': 'modal',
'data-bs-target': '#' ~ id
'data-bs-target': '#' ~ _modal_id
})
}) }}
{% endblock %}
{% endif %}

<!-- Modal -->
{% block modal %}
<div {{ attributes }} id="{{id}}" tabindex="-1" aria-labelledby="{{id}}Label" aria-hidden="true">
<div class="modal-dialog
{{- vertically_centered ? ' modal-dialog-centered' -}}
{{- scrollable ? ' modal-dialog-scrollable' -}}
{{- modal_size ? ' modal-' ~ modal_size -}}
{{- fullscreen == 'always' ? ' modal-fullscreen' -}}
{{- fullscreen and fullscreen != 'always' ? ' modal-fullscreen-' ~ fullscreen ~ '-down' -}}
">
<!-- Modal content -->
{% block modal_content %}
<div class="modal-content">
<!-- Modal header -->
{% block modal_header %}
<div class="modal-header">
{% if title %}
<h5 class="modal-title" id="{{id}}Label">{{ title }}</h5>
{% endif %}
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
{% endblock %}
<!-- Modal body -->
{% block modal_body %}
<div class="modal-body">
{{ content }}
</div>
{% endblock %}
<!-- Modal footer -->
{% block modal_footer %}
<div class="modal-footer">
{% if closelabel %}
{{ pattern('button', {
label: closelabel,
style: btn_style,
outline: false,
attributes: create_attribute({
'data-bs-dismiss': 'modal'
})
}) }}
{% endif %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
</div>
{% endblock %}
{% include '@oe-bcl/bcl-modal/modal.html.twig' with {
'size': size,
'id': _modal_id,
'header': header,
'body': body,
'footer': footer
} %}