Edition d'un Virtuel : remplacer les gris par des couleurs pour une meilleures lecture

Bonjour à tous,

1 - Edition d’un Virtuels, Infos ou Commandes sont en grisé. Lorsque le virtuel regroupe un certain nombre d’équipements, la lecture est très vite difficile du fait que les « blocs » info ou commande sont tous collés les uns au dessus des autres sans séparateur ni interligne supplémentaire et qu’aucune couleur ne les distingue.

Lors de la création d’une INFO ou d’une COMMANDE les boutons sont bleu ou jaune, ce qu ipermet de se repérer rapidement lors du choix.
Serait il possible de modifier l’affichage des blocs en leur donnant par exemple leur couleur comme celle de leur bouton de création ? (bleu ou Jaune)
Faut il aller dans Custom.css pour personnalisé l’affichage des Virtuel ?

2 - Pour améliorer la lecture et regrouper les infos et commande d’un même équipement, il est possible de déplacer les blocs. Cependant, même après sauvegarde, je remarque que la disposition peut se modifier sans que je comprenne pourquoi. Y’a t il un remède pour ne pas perdre son organisation ?

Bonne idée, une meilleure lecture serait pas de refus

Bonjour,

C’est pas vrai :stuck_out_tongue_winking_eye:, il y a bien une couleur qui distingue chaque ligne (1 sur 2), c’est vrai que c’est pas très visible en thème light, mais il y a aussi le hover qui permet de faire ressortir la ligne lorsque la souris passe dessus.

Alors, c’est ton avis perso, mais pas forcement celui de tous, je ne serait pas pour, cela rendrait l’esthétique de la page beaucoup trop chargé, et il serait encore plus difficile de s’y retrouvé si des commande du même type se suivent.

Je pense que tu es dans la situation d’un problème connu. Utilise tu une dispo en tableau ? car lorsque tu fait une save dans la configuration de l’équipement (modale) c’est l’organisation de la mise en forme détaillée qui est appliqué, hors l’organisation n’est pas mise a jour (en js) dans la page des commandes de l’équipement, donc si après tu save l’équipement, c’est cette organisation qui sera appliqué.

Pour y remédier, il faut a chaque fois que tu save dans la config avancée d’un équipement suite a une modification de la disposition, réactualisé la page de l’équipement pour permettre la mise a jour de l’organisation des commandes, ou alors ne pas faire de save si c’est pas nécessaire sur l’équipement.

Merci @Phpvarious pour cette réponse.

1 - Ce que je demandais pour des couleurs différentes, n’est pas un souhait d’imposer à tous, mais de pouvoir à titre perso choisir cette possibilité.
Donc je réitère ma question, puis-je le faire et comment, ou n’est-ce pas possible ?

2 - Tu parles d’une disposition en tableau pour (je pense avoir compris cela) améliorer la lecture. Peux tu m’indiquer un peu plus comment le faire, et ou agir stp ?

Je vais donc détailler mes réponses

Pour changer cette couleur, il est possible avec du custom css :

(1) && (2) ouvrir le custom Css.
(3) ajouter le code du css personnalisé :

[data-theme="core2019_Light"] :not(.ui-dialog-content) table:not(.tableCmd) > tbody tr:nth-child(even) {
    background-color: #9a9a9b !important;
}

(4) Ne pas oublier d’activer le css custom.

Résultat :

Si tu veut coloriser les commande info différemment des commande Action, la réponse est non.

Je vais aussi détailler ce point.

Lorsque tu sauvegarde sur la page des équipements :

C’est l’organisation des commande du dessous qui est sauvegardé, donc Etat (6506),(on) 6507,(off) 6508 pour mon cas, hors si je vais dans la configuration de l’équipement :

image

et que dans celle-ci, il existe un disposition tableau, lors de la sauvegarde c’est cette ordre qui sera enregistré (1), alors que tu peut voir que en arrière plan, les commandes n’ont pas bougé (2).
Si tu ferme la config avancé et que tu sauvegarde sur l’équipement c’est donc l’organisation de l’équipement qui écrasera l’organisation de la disposition du tableau.

pour ne pas perdre son organisation il faut a chaque fois que tu fait une modif sur l’organisation du mode tableau actualisé ta page, tu remarquera que les commandes n’auront plus le même ordre sur ton équipement.

Merci pour cette longue explication. Je dois refaire un essai ce soir (manque de temps) car hier je n’ai pas eu l’effet escompté.
Je présume que pour utiliser ton code tel que tu l’as noté, il faut choisir le mode ```
« core2019_Light ».

Ou si comme moi , je souhaite rester en « core2019_Legacy », je remplacer dans ton code avec Light par Legacy ?

Effectivement je n’avais pas vu que tu étais en legacy, je vérifierai le code exact ce soir, mais attention le thème legacy est obsolète, il a été supprimé en 4.4…

Bonjour,
Du coup cela modifie aussi l’affichage dans le centre des messages.
Cordialement
Edit : en fait partout dans Santé aussi

Merci pour ton travail @Phpvarious , on va avancer progressivement pour obtenir le résultat qui me parait bien confortable. :grinning:

1 « J'aime »

Bonjour @Phpvarious ,

J’ai bien copié ton code, dans custom?css (qui est activé) . J’ai remplacé le nom du thème par celui que j’utilise (Legacy). Hélas je n’ai aucun changement de l’apparence dans les virtuels. Je te soumets mon code, si tu veux bien m’indiquer quelle erreur j’ai commise ?

Bonjour,

Je vient de tester en legacy :

[data-theme="core2019_Legacy"] :not(.ui-dialog-content) table:not(.tableCmd) > tbody tr:nth-child(even) {
    background-color: #9a9a9b !important;
}

Résultat :

1 « J'aime »

Je viens de nettoyer mon custom , au cas où des commandes parasitaient ton code : voici ce que cela donne :n, mais toujours pas de résultat dans les Virtuels. Faut il rebooter ?

Après Ctrl F5, ca fonctionne pour moi:
image

1 « J'aime »

Quelle chance pour toi !
Je suis en version 4.3.17
Il doit y avoir un composant ou plugin qui prend le contrôle de l’affichage, mais cela dépasse mes compétences.

D’après ta capture @Tomsti il manque le crochet d’ouverture, il faut faire très attention :slight_smile:

CTRL+F5 après avoir fait la modif, comme dit jpty pour forcer la mise à jour de l’affichage

2 « J'aime »

Ça marche !
Il manquait en effet le ] devant la ligne 7 data-theme.

Cette amélioration va me faire gagner en confort de lecture.
Merci à chacun d’avoir contribué. :grinning:

1 « J'aime »

Re bonjour,

Dans le code proposé par @Phpvarious , la teinte grise est indiquée par le code couleur (hexadécimal) 9a9a9b. Voici le code en question :
[data-theme=« core2019_Legacy »] :not(.ui-dialog-content) table:not(.tableCmd) > tbody tr:nth-child(even) {
background-color: #9a9a9b !important;
}

Si on s’amuse à remplacer ce code par 10C2AF on obtient un joli bleu turquoise.
Si maintenant on rajoute le même code mais modifié pour qu’il s’adresse au lignes IMPAIRES et qu’on applique la couleur C1B010 (jaune ocre)
On obtient le résultat suivant :

Cela donne le code suivant :
/* modifie la couleur dde fond des lignes PAIRES /
[data-theme=« core2019_Legacy »] :not(.ui-dialog-content) table:not(.tableCmd) > tbody tr:nth-child(even) {
background-color: #10C2AF !important;
}
/
modifie la couleur dde fond des lignes IMPAIRES */
[data-theme=« core2019_Legacy »] :not(.ui-dialog-content) table:not(.tableCmd) > tbody tr:nth-child(odd) {
background-color: #C1B010 !important;
}

Le résultat ne plaira pas à tout le monde, mais, libre à chacun de choisir les couleurs qui lui seront le plus agréables. Le site suivant permet de choisir toutes les couleurs possibles et d’obtenir leur valeur hexadécimale) : Search the Color Names Register - The Official Register of Color Names

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.