Besoin d'ergonomie "multi pop-up" en création multiple

Request description

Bonjour,

Nous rencontrons un problème d’ergonomie lorsque plusieurs formulaires de création sont superposés :

Steps to reproduce

J’ai 3 objets qui sont liés de la façon suivante :

  1. J’ouvre le formulaire de création de EsatDAAC.

  1. Au niveau du champ “Solution thérapeutique”, je clique sur la flèche puis sur le bouton créer pour ouvrir le formulaire de création de EsatIndicationMedicament. Une pop-up s’ouvre et l’arrière plan devient plus sombre pour mettre en avant la pop-up.

  1. Au niveau du champ “Indication”, je clique sur le bouton créer pour ouvrir le formulaire de création de EsatIndication.

Une nouvelle pop-up s’ouvre mais la pop-up en dessous avec le formulaire de création de EsatIndicationMedicament n’est pas grisé, c’est le formulaire de EsatDAAC qui devient encore plus sombre qu’avant. Comme la pop-up de EsatIndication est plus petite que celle de EsatIndicationMedicament en dessous, on voit les deux pop-up et les utilisateurs peuvent penser que les deux pop-up sont en réalité une seule.

→ Peut-on griser la première pop-up à l’ouverture de la deuxième afin de les différencier ? Est-ce un bug Simplicité ?

→ Lorsque je clique sur la pop-up du dessous ou dans la zone grisée, ma pop-up “Indication” se ferme (voir vidéo). Peut-on interdire le clique en dehors de la pop-up pour éviter que l’utilisateur la ferme par erreur ?

Technical information

Instance /health v5.2

[Platform]
Status=OK
Version=5.2.12
BuiltOn=2022-08-19 15:28
Git=5.2/9cdcaca4b61d6087460bb80e4fda16740ffa9d49
Encoding=UTF-8
EndpointIP=
EndpointURL=
TimeZone=UTC
SystemDate=2022-08-22 14:28:15

[Application]
ApplicationVersion=0.0.6.2
ContextPath=
ContextURL=
ActiveSessions=2
TotalUsers=13
EnabledUsers=7
LastLoginDate=2022-08-22 14:08:30

[Server]
ServerInfo=Apache Tomcat/9.0.65
ServerType=WEB
ServerActiveSessions=2
ServerSessionTimeout=30

[OS]
Name=Linux
Architecture=amd64
Version=3.10.0-1160.76.1.el7.x86_64
DockerImageName=centos7
SystemEncoding=UTF-8

[JavaVM]
Version=17.0.4
Vendor=Eclipse Adoptium
VMName=OpenJDK 64-Bit Server VM
VMVersion=17.0.4+8
ScriptEngine=rhino
ScriptEngineVersion=Rhino 1.7.13 2020 09 02
HeapFree=180685
HeapSize=587776
HeapMaxSize=2007040
TotalFreeSize=1599949

[Cache]
ObjectCache=376
ObjectCacheMax=10000
ObjectCacheRatio=3
ProcessCache=13
ProcessCacheMax=10000
ProcessCacheRatio=0
APIGrantCache=0
APIGrantCacheMax=1000
APIGrantRatio=0

[Database]
Vendor=3
ProductName=PostgreSQL
ProductVersion=13.2 (Debian 13.2-1.pgdg100+1)
DriverName=PostgreSQL JDBC Driver
DriverVersion=42.4.2
DBDate=2022-08-22 14:28:15
DBDateOffset=0
DBPatchLevel=5;P02;061b2c28d6156a42239626b53ced124f
UsingBLOBs=true

[Healthcheck]
Date=2022-08-22 14:28:15
ElapsedTime=228
Instance /health v5.1

[Platform]
Status=OK
Version=5.1.28
BuiltOn=2022-02-03 17:37
Git=release/be32675f7543f980b673be516db454122068ce93
Encoding=UTF-8
EndpointIP=
EndpointURL=
TimeZone=UTC
SystemDate=2022-08-22 14:28:51

[Application]
ApplicationVersion=0.0.6.8
ContextPath=
ContextURL=
ActiveSessions=1
TotalUsers=14
EnabledUsers=10
LastLoginDate=2022-08-22 12:24:53

[Server]
ServerInfo=Apache Tomcat/9.0.58
ServerType=WEB
ServerActiveSessions=3

[OS]
Name=Linux
Architecture=amd64
Version=3.10.0-1160.76.1.el7.x86_64
DockerImageName=centos7
SystemEncoding=UTF-8

[Disk]
DiskFree=48592
DiskUsable=43456
DiskTotal=100663

[JavaVM]
Version=17.0.2
Vendor=Eclipse Adoptium
VMName=OpenJDK 64-Bit Server VM
VMVersion=17.0.2+8
ScriptEngine=rhino
ScriptEngineVersion=Rhino 1.7.13 2020 09 02
HeapFree=454974
HeapSize=655360
HeapMaxSize=2007040
TotalFreeSize=1806654

[Cache]
GrantCache=0
GrantCacheMax=0
GrantCacheRatio=0
ObjectCache=371
ObjectCacheMax=10000
ObjectCacheRatio=3
ProcessCache=0
ProcessCacheMax=10000
ProcessCacheRatio=0

[Database]
Vendor=3
ProductName=PostgreSQL
ProductVersion=13.2 (Debian 13.2-1.pgdg100+1)
DriverName=PostgreSQL JDBC Driver
DriverVersion=42.3.2
DBDate=2022-08-22 14:28:51
DBDateOffset=0
DBPatchLevel=5;P01;4c6bd437ccc70a2e93d30f52b0903b35
UsingBLOBs=true

[Healthcheck]
Date=2022-08-22 14:28:51
ElapsedTime=14

Bonjour Florent,

C’est Bootstap qui gère l’affichage des dialogues et du backdrop (fond grisé en 100%).
Normalement Bootstrap ne permet l’affichage que d’un seul popup à la fois, on avait modifié le comportement dans Simplicité pour empiler les boites de dialogue (et calculer un z-index incrémental), rien n’avait été fait sur les backdrops qui ne font qu’assombrir de plus en plus le fond en s’empilant.

  • On va voir pour placer le backdrop juste derrière chaque dialogue si c’est possible, cela permettra de griser tout ce qui est dessous (donc tous les autres dialogues et pas uniquement le body)
  • On peut effectivement rendre les dialogues de création en popup modaux, c’est à dire qu’un click en dehors ne le fermera pas par défaut, il faudra nécessairement cliquer sur Enregistrer ou Fermer.

Je passe ce besoin en feature request.

En attendant, un contournement possible est de forcer une hauteur minimale au div du 2eme dialogue par CSS (à mettre dans la ressource STYLES de l’objet).

#create_MyObject_the_ajax_MyObject .card-body {
   min-height: 30rem;
}

où MyObject est à remplacer par le nom de votre objet

Voilà ce que cela donne en forçant le mode modal et en modifiant le z-index du backdrop juste derrière le dialogue. Je pense que cela répond à votre besoin d’ergonomie.

On va reporter cette modification jusqu’en 5.1.
PS : l’option de déplacement d’un dialogue par drag&drop du header ne sera disponible qu’à partir de la 5.3.

1 Like

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.