Position widget au survol et personnalisation de l'affichage

[benj29]

Bonsoir,

Suite à la remarque de @mikeul ou @Mika59, et en alternative au popup qui « charge » la tablette, j’ai découvert la fonction widget au survol qui est sur le papier super intéressante.

Dernière version de Jeedom en stable en V4.1.20.

Mais…

3 questions. Dont 2 problématiques.

1. J’ai beau réglé la position du widget (j’ai testé Firefox, Chrome) pareil… ça reste en bas à droite. J’ai tout essayé control+F5 etc. Ici la position est réglée à gauche :
   https://i.imgur.com/0rT8jM0.png

Allez, soyons fou, défaut (je ne sais pas ce que ça fait), même position :

Haut gauche :

Bein non toujours en bas à droite :

J’ai le problème sur Chrome, Firefox, les tablettes…
J’ai testé avec d’autres widgets.

J’ai aussi un souci de taille. Je ne pige pas. Côté dashboard, cela fait la bonne taille. J’ai même fait exprès d’agrandir encore plus le widget.

Bein sur le design, c’est coupé. Je ne comprends pas.

A noter que si j’ajoute le widget à la main sur le design (pas survol), cela fait la bonne dimension.

Un autre avec un simple virtuel tableau. Sur le dashboard :

sur le design widget au survol :

3. dernière question, comment cacher le titre du widget ? Pour darksky ou de simple virtuel, je n’arrive pas à masquer le titre et le format « dashboard » du widget… On peut jouer avec le CSS pour cacher ce dernier ? Je ne trouve aucun option pour masquer tout cela et conserver un widget « nu » comme les widgets sur les designs où on peut cacher le nom/barre de titre.

[mikeul]

Hey,

@benj29

J’ai beau réglé la position du widget (j’ai testé Firefox, Chrome) pareil… ça reste en bas à droite. J’ai tout essayé control+F5 etc. Ici la position est réglée à gauche :

J’ai exactement les mêmes comportements (Je suis sur une 4.062). Mais cela ne me dérange pas dans mon cas d’usage. mais ça n’explique pas la logique que j’e n’ai pas encore compris.
Peu importe la position, elle s’affiche toujours au même endroit. La doc dit " Position : Permet de choisir l’emplacement d’apparition du widget (par défaut bas droite)."

@benj29

J’ai aussi un souci de taille. Je ne pige pas. Côté dashboard, cela fait la bonne taille. J’ai même fait exprès d’agrandir encore plus le widget.

Pour le bas des équipements qui est mangé, j’ai aussi la même chose, j’ai du agrandir légèrement mes équipement dans le dashboard sinon j’ai ça :

On voit le léger décalage en bas (dashboard à gauche, design à droite) :

@benj29

dernière question, comment cacher le titre du widget ?

C’est vrai qu’une option serait bien utile, la seule solution que j’ai imaginé pour le moment c’est en css avec un Display:none sur le titre (qui cible qu’un équipement et que dans le mode onClic), comme ça, pas d’impact sur le dashboard)

Avec :
.zoneEqLogicOnClic > [data-eqlogic_id="332"] > .widget-name { display: none; }
332 à remplacer par l’id de l’équipement

[benj29]

Bon déjà je ne suis pas seul lol. Merci .
L’équipe est au courant de cette non fonctionnalité, position toujours la même ?

[Fifirept]

Non, tu n’es pas seul.
+1

[benj29]

Hello,

Aux pros du CSS, il n’y a pas moyen de refitter la hauteur de 90% du widget qu’on affiche par exemple ?
C’est quand même chiant cette taille en hauteur trop grande juste pour le plaisir…

Dernière question, quelqu’un sait comment mettre une bord arrondis en CSS ? J’ai bien tenté radius avec ! important comme je le vois dans le CSS mais visiblement le CSS n’en tient pas compte quand je le rentre dans le tableau en style CSS (à moins qu’il ne faille des «  » ou ‹  › ?)

[benj29]

Non sans mal…

J’ai enfin réussi : réduction de la hauteur, ajout d’une bordure adaptée !

Surcharge de CSS pour ajouter un contour, modifier une largeur, hauteur.
Néanmoins, j’atteints mes limites, je n’arrive pas à modifier plus la hauteur… j’ai beau avoir un widget bien taillé, si je réduis la hauteur, le titre (haut du virtuel) remonte et disparait… donc limité !

Par contre, j’ai un effet de bord, visiblement ça créé un arc en ciel sur l’animation de darksky.

Par contre pour éviter que le widget se barre en fonction de la position de la zone, il faut aussi surcharger le CSS par position :

position - CSS: Cascading Style Sheets | MDN

La première ligne pour cacher le titre, merci de l’astuce :

.zoneEqLogicOnClic > [data-eqlogic_id="1923"] > .widget-name { display: none; }

La seconde ligne pour ajouter un contour avec un arrondi :

.zoneEqLogicOnClic > [data-eqlogic_id="1923"] { height: 200px !important; border-radius: 5px !important;
  border: 2px solid ghostwhite !important; background-color: rgba(0,0,0,0.95) !important; }

Dans le même principe, on peut modifier position par ce qu’il faut relative et ajouter la balise top, etc pour modifier la position de l’objet popup.

Pour la peine, j’ai changé la police aussi du widget darksky… pour avoir un truc plus sympa et plus lisible

/* prévision darksky */
.zoneEqLogicOnClic > [data-eqlogic_id="1622"] > .widget-name { display: none; }
.zoneEqLogicOnClic > [data-eqlogic_id="1622"] { font-family:Rubik-light !important; font-size:110% !important; height: 135px !important; width: 400px !important; border-radius: 5px !important;
  border: 2px solid ghostwhite !important; background-color: rgba(0,0,0,1) !important; }

[arnog23]

Bonjour,

Pour les problèmes de position, je le constate uniquement avec « Afficher sur un clic ». En utilisant « Afficher au survol », la position est correcte.

Pour les bords arrondis, il y a aussi une option globale dans Réglages => Système => Configuration => Interface => Personnalisation mais du coup cela s’applique partout.

Dans /core/desktop/js/plan.js on peut voir que les positions ne sont pas traitées de la même façon dans les deux cas :

$pageContainer.on('mouseenter','.zone-widget.zoneEqLogic.zoneEqLogicOnFly', function() {
  if (!planEditOption.state) {
    clickedOpen = true
    var el = $(this)
    jeedom.eqLogic.toHtml({
      id : el.attr('data-eqLogic_id'),
      version : 'dashboard',
      global:false,
      success:function(data) {
        var html = $(data.html).css('position','absolute')
        html.attr("style", html.attr("style") + "; " + el.attr('data-position'))
        el.empty().append(html)
        jeedomUtils.positionEqLogic(el.attr('data-eqLogic_id'),false)
        if (deviceInfo.type == 'desktop') {
          el.off('mouseleave').on('mouseleave',function() {
            el.empty()
            clickedOpen = false
          })
        }
      }
    })
  }
})

$pageContainer.on('click','.zone-widget.zoneEqLogic.zoneEqLogicOnClic', function() {
  if (!planEditOption.state && !clickedOpen) {
    clickedOpen = true
    var el = $(this)
    jeedom.eqLogic.toHtml({
      id : el.attr('data-eqLogic_id'),
      version : 'dashboard',
      global:false,
      success:function(data) {
        el.empty().append($(data.html).css('position','absolute'))
        jeedomUtils.positionEqLogic(el.attr('data-eqLogic_id'))
        if (deviceInfo.type == 'desktop' && el.hasClass('zoneEqLogicOnFly')) {
          el.off('mouseleave').on('mouseleave',function() {
            el.empty()
            clickedOpen = false
          })
        }
      }
    })
  }
})

En remplacant :

        el.empty().append($(data.html).css('position','absolute'))

par

        var html = $(data.html).css('position','absolute')
        html.attr("style", html.attr("style") + "; " + el.attr('data-position'))
        el.empty().append(html)

pour la partie « OnClick », la position est bien prise en compte.

En revanche, je ne mesure pas l’impact d’une telle modification.

Peut être que @Loic ou @kiboost pourraient nous dire.

[Loic]

Bonjour,
Moi non plus je mesure pas trop l’impact j’ai poussé en alpha on verra bien si yen a qui rale.

[arnog23]

Merci Loic.

Je n’avais pas fait attention mais il y aussi cette différence :

Pour le « OnFly »

positionEqLogic(el.attr('data-eqLogic_id'),false)

Pour le « OnClic »

positionEqLogic(el.attr('data-eqLogic_id'))

En mettant la même chose pour le « OnClic » que ce qu’il y a pour le « OnFly », la taille des widgets est bien conservée par rapport à celle du Dashboard.

positionEqLogic(el.attr('data-eqLogic_id'),false)

[Loic]

Super merci pour le retour c’est corrigé.

[Ayb7]

Bonjour,

J’ai une configuration Atlas avec jeedom v4.1.28 stable.

Sur mon design je viens d’ajouter des zones avec widget au survol.
La position du widget ne change pas en sélectionnant gauche ou droite ou haut ou autre.

La correction indiquée ci-dessus est-elle prise en compte uniquement sur une version alpha ?

Merci pour vos retours si vous avez le même comportement sur une version 4.1.28.
Dans ce cas, je patienterai que la correction passe en stable.