Aujourd’hui je vais parler un peu des widget au survol.
Cette fonctionnalité vous permet d’afficher sur votre design un équipement sans devoir changé de page.
Pour ce faire, vous devez passer en mode Edition, faire clique droit et Ajouter une zone.
Là vous adaptez la taille de votre zone et sa position puis vous cliquez droit dessus et Paramètre d’affichage.
Dans spécifique vous sélectionnez Widget au survol et décochez Afficher au survol (enfin moi je l’ai décoché pour n’avoir l’affichage qu’au clique).
Ensuite vous sélectionnez l’équipement souhaité.
Solution vraiment pratique, mais l’affichage de l’équipement version Dashboard est horrible.
Il va donc falloir jouer du css (dans Personnalisation avancée) afin d’avoir un affichage homogène à notre design.
Ainsi, nous devons passer de ça :
à cela :
Récupération des ID :
Pour arriver à ce résultat, il va déjà falloir connaître l’ID de votre équipement et l’ID de vos commandes.
Pour cela, vous allez dans votre équipement (pour mon exemple, plugin Virtuel et équipement Brita).
En haut à droite, vous cliquez sur le bouton Configuration avancé et vous notez l’ID de votre équipement.
Pour les ID des commandes, il faut aller dans l’ongle Commandes de votre équipement.
Soit les ID sont inscrit à gauche des commandes, soit vous devez cliquer sur les engrenages de chaque commande.
Donc dans mon exemple, mon ID d’équipement est 58.
Nous pouvons donc commencer à customiser l’affichage.
Suppression du nom de l’équiment :
Pour commencer, nous allons virer le bandeau avec le nom de l’équipement.
Pour cela, il suffit de renseigner la commande css suivante :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="58"] > .widget-name {
display: none;
}
Voici le résultat :
Background et cadre :
Afin que cela s’harmonise dans l’affichage, nous allons lui appliquer le même style mais également le dimensionner (avec width et height) et le placer (avec top et left) avec les commande css suivantes :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="58"] {
width: 190px !important;
height: 100px !important;
margin: 0 !important;
padding-top: 10px !important;
top: -20px !important;
left: -16px !important;
background-color: #E7EEF7 !important;
border-radius: 32px !important;
box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
-5px -5px 10px 5px rgba(255,255,255, 0.8);
}
Voici le résultat :
Le placement (avec top et left) se fait par rapport à la position du widget au survol.
Un peu de cosmétique :
Perso je trouve les boutons trop éloigné l’un de l’autre.
Je vais donc virer les margin du 1er bouton avec la commande suivante :
[data-page="plan"] [data-cmd_id="605"] {
margin: 0 !important;
}
l’ID 605 correspondant à la 1ère commande de mon équipement.
Si, comme moi, vos commandes ne sont pas de type binaire, la commande ci-dessus n’aura peut être eu aucun effet.
Cela provient du Core qui impose le min-width à 90px (alors que celui du binaire est de 20px).
Je trouve que c’est trop grand pour juste une icone, alors je corrige cela avec cette commande css:
[data-page="plan"] [data-eqlogic_id="58"] td div.cmd {
min-width: 20px !important;
}
(min-width: unset !important; fonctionne également).
Ainsi nous atteignons notre résultat final :