Changement (inversion) des couleurs dans un menu

[Guillaume31a]

Bonjour, je n'arrive pas à dissocier deux acteurs qui obéissent à la même règle. Je souhaiterais inverser les couleurs lorsque l'utilisateur passe sur un bouton et également lorsqu'il clique sur celui-ci.
Voici une capture de l'image du menu :

Lorsqu'on clique sur "documents" par exemple, nous avons cette fenêtre qui s'affiche à droite de l'écran :

Petit soucis, le bouton cliqué, "document" reste en blanc alors que dans le menu ci dessus, on peut voir que les couleurs s'inversent lorsque je passe ou que je clique sur une des options (schéma elec, schéma hydro....)

Voici une image de l'ensemble :

et le code CSS correspondant au thème de couleur :

J'ai essayé un nouveau code en CSS :

mais lui inverse le problème, c'est à dire que les options (schéma elec, schéma hydro....) restent bleue lorsqu'elles sont cliquées mais le bouton "document" apparait bien lorsque l'utilisateur clique dessus (bleu) (voir screen en dessous, ma souris étant la flèche noire dessinée) :

et pour les options :

Sur cette image, je passe juste ma souris sur "analyse fonctionnelle" et les couleurs sont inversées. Tout vas bien ? Et non ! J'ai eu un espoir aussi mais j'ai rencontré un autre problème. Lorsque je clique sur "analyse fonctionnelle" le bouton redeviens bleu comme si l'utilisateur n'avais pas cliqué dessus et quand on repasse avec la souris sur ce même bouton, il reste bleu :

Sur ce screen j'ai cliqué avec ma souri. le bouton est donc censé se mettre en blanc. (ce n'est pas le cas).

Mais lorsque je clique hors de l'interface menu, le bouton "analyse fonctionnelle" se met "à jour" ou je ne sais pas trop mais il s'actualise et se met en mode inversé, donc cliqué comme ceci :

En somme, il faudrait que lorsque que je clique ou que je passe sur un bouton, sa couleur s'inverse sans avoir a cliquer ailleurs.

J'espère avoir été assez clair dans mes explications, j'espère qu'une solution sera trouvée, merci !

[Raphwit]

Bonjour, je remarque quelques petites erreurs dans le code CSS.

Si je cerne bien votre problème, vous devriez avoir une seule et même classe qui gère le comportement sur vos boutons.

Nous aurions donc la classe 'myClass' par exemple qui indiquerai à l'élément de changer de background et de couleur de texte.
Un exemple ci-dessous :

Voici le code de l'acteur html à copier / coller dans votre scène :
Il est à noter que vous êtes libre de changer le nom de la classe, ainsi que les différentes couleurs.

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"html1","properties":{"content":"<style>\n\n  .myClass:hover {\n    background-color: blue;\n    color: white;\n  }\n  \n</style>","cursor":"pointer"}}

Cette classe a donc pour effet de changer le background et la couleur de texte en blanc uniquement au survol de l'élément.

Nous ne devrions pas avoir à gérer le focus dans votre exemple selon moi.

Il faudra enfin ajouter la classe 'myClass' à votre acteur afin que celui-ci ai le comportement défini par cette classe.

[Guillaume31a]

Dans votre message :

A partir de ce point, il vous suffit de rajouter la classe 'myClass' à vos boutons pour que ceux-ci ai le comportement souhaité

ou faut il que je me rende ?

Merci

[Raphwit]

Il faut renseigner le champ 'Classes' sous la catégorie 'Aspect'

[Guillaume31a]

Retour après tests :
j'ai bien attribué la classe à 1 seul bouton "documents"

j'ai modifié les couleurs du code html de la sorte pour que ca soit bien voyant :

Lorsque j'exécute le synapps dans le navigateur, je ne constate aucun changement de couleur (même quand je ne fait que passer la souris dessus) :

J'ai donc essayé d'assigner la classe au stack qui prend en compte tout le bandeau de droite :

et cette fois-ci j'ai ce rendu :

suis-je passé à coté de quelque chose ?
Merci

[Raphwit]

Mes excuses, je n'ai pas été assez précis pour le code CSS, il faut remplacer le code à l'intérieur de l'acteur par celui-ci :

<style>

 .synapps-ui .actor button.myClass:hover {
   background-color: blue !important;
   color: white !important;
 }
</style>

Cela devrait fonctionner !

Voila un acteur HTML qui permet de changer le background et la couleur de texte au survol :

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"html1","properties":{"content":"<style>\n\n  .synapps-ui .actor button.{{myClass}}:hover {\n    background-color: {{bg_color}} !important;\n    color: {{text_color}} !important;\n  }\n</style>","cursor":"pointer"},"additionalDefs":{"myClass":{"type":"text"},"bg_color":{"type":"color"},"text_color":{"type":"color"}},"additionals":{"myClass":"myClass","bg_color":"rgba(42, 0, 255, 1)","text_color":"rgba(255, 255, 255, 1)"}}

'myClass' est le nom de la classe à renseignée dans le champ dont nous parlions plus haut,
'bg_color' représente la couleur du background,
'text_color' la couleur du texte.

[Guillaume31a]

je teste ça demain matin et je reviens vers vous, merci beaucoup, très bonne fin de journée !

[Guillaume31a]

Bonjour, j'ai testé ce que vous m'avez envoyé et cela fonctionne !
J'avais une dernière question sur le même projet, j'aimerais que lorsque je clique sur un de mes acteurs (accueil, journal,courbes,cvc ....) il se mette validé en bleu et non en blanc/gris, merci !

[Raphwit]

Vous pouvez rajouter ce code au sein de l'acteur HTML que nous avons créée :

.synapps-ui .actor button.current {
   background-color: blue !important;
   color: white !important;
 }

Avec toujours le même principe, la couleur reste entièrement personnalisable !

[Guillaume31a]

parfait merci beaucoup pour votre aide et votre patience !
très bonne journée.