See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade" id="mailboxModal" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="sds-modal__title modal-title">Rédiger un message</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-stackLg">
<div class="form-group">
<label for="mailbox-objet" class="sds-label -labelForm">
Objet
</label>
<div class="sds-input">
<input id="mailbox-objet" class="sds-input form-control" type="text" placeholder="Objet" value="">
</div>
</div>
<div class="form-group">
<label for="mailbox-message" class="sds-label -labelForm">
Votre message
</label>
<div class="sds-textarea">
<textarea class="form-control" id="" rows="1" placeholder="Votre message"></textarea>
</div>
</div>
<div class="sds-stackExceptionMd sds-stackMd">
<div class="sds-upload -uploadComplete" data-js-upload>
<input type="file" id="uploadComplete" class="sr-only">
<div class="sds-upload__inner">
<div class="sds-upload__content">
<span class="sds-iconBlock -iconBlockInverse sds-upload__iconBlock" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
</span>
<div class="sds-upload__text text-truncate sds-headingColor">
<p class="sds-upload__heading">
<label for="uploadComplete" class="sds-upload__label stretched-link">{Text}</label>
</p>
<p class="sds-upload__meta sds-textHelper">
{Weight}
</p>
</div>
</div>
<div class="sds-upload__actions" data-js-upload-actions>
<div class="sds-btnGroup -aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-visible"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
</div>
<div class="sds-upload__errorMsg invalid-feedback">
{ Error message }
</div>
</div>
<div class="sds-upload -uploadLoading" data-js-upload>
<input type="file" disabled id="uploadLoading" class="sr-only">
<div class="sds-upload__inner">
<div class="sds-upload__content">
<span class="sds-iconBlock -iconBlockInverse sds-upload__iconBlock" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
</span>
<div class="sds-upload__text text-truncate sds-headingColor">
<p class="sds-upload__heading">
<label for="uploadLoading" class="sds-upload__label stretched-link">{Text}</label>
</p>
<p class="sds-upload__meta sds-textHelper">
{Weight}
</p>
</div>
</div>
<div class="sds-upload__actions d-none" data-js-upload-actions>
<div class="sds-btnGroup -aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-visible"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
</div>
<div class="sds-upload__errorMsg invalid-feedback">
{ Error message }
</div>
</div>
</div>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<div class="d-flex justify-content-between w-100">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-clip"></span>
<span class="sds-btn__text">Ajouter un document</span>
</button>
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnPrimary" data-dismiss="modal">
<span class="sds-btn__text">Envoyer</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="{{ namespace }}modal__title modal-title">Rédiger un message</div>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackLg">
<div class="form-group">
{% render "@label--form",{
text: "Objet",
labelFor: "mailbox-objet"
},true %}
{% render "@input",{
placeholder: "Objet",
id: "mailbox-objet"
},true %}
</div>
<div class="form-group">
{% render "@label--form",{
text: "Votre message",
labelFor: "mailbox-message"
},true %}
{% render "@textarea",{
placeholder: "Votre message",
id: "mailbox-message"
},true %}
</div>
<div class="{{ namespace }}stackExceptionMd {{ namespace }}stackMd">
{% render "@snet-upload-base--complete" %}
{% render "@snet-upload-base--loading" %}
</div>
</div>
{% endblock %}
{% block footer %}
{% if footer %}
<div class="d-flex justify-content-between w-100">
{% render "@btn-secondary--icon-left", {
text: "Ajouter un document",
icon: "icon-clip"
} ,true %}
<div class="{{ namespace }}btnGroup">
{% render "@btn-primary",{
text: "Envoyer",
attrs: {
"data-dismiss": "modal"
}
},true %}
</div>
</div>
{% endif %}
{% endblock %}