Project

General

Profile

Evolution #23054

Ajouter un liseret de la couleur de la catégorie au menu catégories (comme sur xdesktop)

Added by Renaud Dussol over 6 years ago. Updated about 6 years ago.

Status:
Fermé
Priority:
Normal
Assigned To:
Target version:
Start date:
02/14/2018
Due date:
% Done:

100%

Distribution:

Description

Modification purement esthétique : plusieurs utilisateurs nous ont fait remarquer que le menu xdesktop des catégories comportait un liseret de la couleur de la catégorie qui a disparu dans edispatcher NG.
Pour reproduire ce liseret, il faudrait en théorie toucher au composant edispatcher-categories, en ajoutant un border-left avec la catégorie passée en paramètre dans twig.

En attendant j'ai développé une solution en Jquery qui va chercher la couleur de l'icone de la catégorie et l'applique à l'élément parent (<li>)

Cette solution a l'avantage de fonctionner en autonomie dans le template

$(window).hover(function() {
    $(".fa.style-scope.edispatcher-categories").each(function() {

        if ( !$(this).hasClass("parentBorderColorAdded")) {
            console.log("Ajout du liseret couleur catégorie "+ $(this).parent().attr('data-key'));
            $(this).parent().css("border-left-width", "4px");
            $(this).parent().css("border-left-style", "solid");
            $(this).parent().css("border-left-color", $(this).css("color"));
            $(this).addClass("parentBorderColorAdded");
        }
     });
});

Cela semble fonctionner correctement

Mais cette solutuion est un peu lourde (application d'un script sur tous les éléments d'un tag donné, déclenchement "bidouille" au survol de la fenêtre...).
Je pense que la solution directement intégrée au composant serait plus simple et plus légère
Le problème est que peut-être certains ne voudraient pas forcément ce liseret, mais je pense qu'on pourrait alors le surcharger facilement en CSS dans le template (boder-left : 1px solid black ou autre...)

History

#1 Updated by Renaud Dussol over 6 years ago

  • Status changed from Nouveau to En attente d'informations
  • Assigned To changed from Renaud Dussol to Christophe LEON

Je te réassigne, tu me dis juste ce que tu en penses. Si tu es OK, tu me réassigne et je fais les modifs

#2 Updated by Christophe LEON about 6 years ago

j'ai ajouté le css suivant sur le template

:host.liseret .list-group li.categorie       {border-left: 4px solid transparent;}
:host:not(.liseret) .list-group li.categorie {border-left: none !important;}

et mis le style suivant sur chaque li a

 style$="border-left-color: {{categorie.color}}"

Pour disposer du liseret

<edispatcher-categories class='liseret' ...>

devrait faire l'affaire

Enjoy :)

#3 Updated by Christophe LEON about 6 years ago

  • Status changed from En attente d'informations to Résolu

#4 Updated by Christophe LEON about 6 years ago

  • % Done changed from 0 to 100

#5 Updated by Christophe LEON about 6 years ago

  • Target version set to Envole 5.8

#6 Updated by Arnaud FORNEROT about 6 years ago

  • Status changed from Résolu to Fermé

Also available in: Atom PDF