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 -bodySecondary06" id="suiviTransactionsModalDetail-1" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="sds-modal__title modal-title">Détail de l'ordre</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="sds-transactionBlock sds-box ">
<div class="sds-transactionBlock__inner">
<div class="sds-transactionBlock__row -infoHeader">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-multipletransfer"></span>
</span>
<div class="sds-transactionBlock__headerInfo d-flex align-items-baseline">
<div>
<div class="sds-textSemiBold">Virement multiple</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Débit {individuel || global}
</div>
</div>
<div>
<div class="sds-textHelper sds-transactionBlock__meta">
Réf. S-Net Business : S-NET #####-###
</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Votre réf. : #################
</div>
</div>
</div>
<div class="ml-auto align-self-center">
<div class="sds-transactionState -paid -textHelper">
<div class="sds-icon sds-icon-checkcircleborder" aria-hidden="true"></div>
<div class="sds-transactionState__text">Comptabilisé</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row -first">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__mainInfo">
<div class="sds-transactionBlock__mainInfoAccount">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-stackXxs">
<div>{Account Name}</div>
<div class="sds-transactionBlock__meta sds-textHelper">
LU## ##### ##### #####
</div>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="d-flex justify-content-end flex-grow-1">
<div class="sds-transactionBlock__col sds-stackXxs text-right">
<div>
<div class="sds-transactionBlock__meta sds-textHelper">
Date d'exécution souhaitée
</div>
<div class="sds-textSemiBold">{DD.MM.YYYY}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row -total">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-transactionBlock__collapseToggle" data-toggle="collapse" data-target="#transactionBlockCollapse-suiviTransactionDetail-1" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="sds-transactionBlock__col -amount">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-transactionBlock__col -transactions">
<span class="sds-numberCircle">
2
</span>
<p class="sds-textSemiBold">Transactions</p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-suiviTransactionDetail-1">
<div class="sds-transactionBlock__collapseInner">
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Name}
</span>
<span class="sds-accountInfo__whitelisted sds-icon sds-icon-badgevalid"></span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
<div>{Communication}</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
{Communication}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-box -insetLg">
<div class="sds-actionsList -isListItem">
<div class="sds-actionsList__heading">
<div class="sds-actionsList__title">
Activités
</div>
</div>
</div>
<div class="sds-actionsList__body">
<div class="sds-outOfBounds">
<div class="sds-activityLog">
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
<span class="sds-iconCircle -primary100 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-cross"></span>
</span>
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
<span class="sds-iconCircle -success100 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
</span>
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
<span class="sds-iconCircle -secondary100 -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
<span class="sds-iconCircle -success100Outline -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
</span>
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<div class="d-flex justify-content-between w-100">
<div class="dropdown dropup">
<button type="button" class="sds-btn -btnSecondary" data-cancel="" data-toggle="dropdown" data-display="static" aria-expanded="false">
<span class="sds-icon sds-icon-cross"></span>
<span class="sds-btn__text">Refuser</span>
</button>
<div class="sds-actionMenu -transparentFrame dropdown-menu sds-modal__footerDropConfirmation">
<div class="sds-alert alert fade show alert-warning-100 alert-dismissible">
<div class="sds-alert__content">
<p class="sds-textHelper sds-textSemiBold">Êtes-vous sur de vouloir annuler l’ordre?</p>
<p class="sds-textHelper ">Lorem ipsum</p>
</div>
<button type="button" class="close">
<span class="sr-only">Close</span>
<span class="sds-icon sds-icon-close" aria-hidden="true"></span>
</button>
<div class="sds-alert__btnArea">
<div class="sds-alert__btnGroup sds-btnGroup -hasVerticalSpacing">
<button type="button" class="sds-btn -btnSecondary -btnSmall -block sds-alert__refuseBtn">
<span class="sds-btn__text">Non</span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnSmall -block sds-alert__acceptBtn" data-dismiss="modal">
<span class="sds-btn__text">Oui</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sds-btnGroup">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-edit"></span>
<span class="sds-btn__text">Modifier</span>
</a>
<button type="button" class="sds-btn -btnPrimary" data-dismiss="modal" data-validate="">
<span class="sds-icon sds-icon-check"></span>
<span class="sds-btn__text">Valider</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="{{ namespace }}modal__title modal-title">{{ title }}</div>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackLg">
{% render "@snet-transaction-block--suivi-transactions-detail" %}
<div class="{{ namespace }}box -insetLg">
<div class="{{ namespace }}actionsList -isListItem">
<div class="{{ namespace }}actionsList__heading">
<div class="{{ namespace }}actionsList__title">
Activités
</div>
</div>
</div>
<div class="{{ namespace }}actionsList__body">
<div class="{{ namespace }}outOfBounds">
{% render "@snet-activity-log--confirmation-timeline" %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<div class="d-flex justify-content-between w-100">
<div class="dropdown dropup">
{% render "@btn-secondary--icon-left", {
icon: "icon-cross",
text: "Refuser",
attrs: {
"data-cancel":"",
"data-toggle": "dropdown",
"data-display": "static",
"aria-expanded": "false"
}
} ,true %}
<div class="{{ namespace }}actionMenu -transparentFrame dropdown-menu {{ namespace }}modal__footerDropConfirmation">
{% render "@snet-alert--warning-100-confirmation",{
title: "Êtes-vous sur de vouloir annuler l’ordre?",
text: "Lorem ipsum",
closeWithoutDestroying: true,
alertRefuseBtnText: "Non",
alertAcceptBtnText: "Oui",
alertAcceptBtnOptions: {
"data-dismiss": "modal"
}
},true %}
</div>
</div>
<div class="{{ namespace }}btnGroup">
{% render "@btn-secondary--icon-left",{
eltType: "a",
icon: "icon-edit",
text: "Modifier"},true %}
{% render "@btn-primary--icon-left",{
icon: "icon-check",
text: "Valider",
attrs: {
"data-dismiss": "modal",
"data-validate": ""
}
},true %}
</div>
</div>
{% endblock %}