Icônes FA et indication de nouveaux messages

[foxies]

Rappel du premier message :

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous ! J'ai une demande assez particulière à faire et malgré mes recherches, je ne suis pas parvenue à trouver d'autres sujets traitant de ce que je souhaite faire exactement.

J'aimerais donc utiliser les icônes de FontAwesome entant qu'icônes du forum et des sujets à la place des images habituelles et qu'en cas de nouveaux messages ils changent de couleur. L'une des difficultés à laquelle je fais face est que je souhaite que chaque forum présente un icône différent (ce dernier se situera au niveau de la div .cat-title, en face du titre du forum et de sa description). J'ai tenté plusieurs choses, notamment l'installation de ce script JS qui donne un id pour chaque forum - ce code est actuellement déjà utilisé pour rajouter un background différent à chaque forum et marche très bien :

Code:

$(function(){
      $('.cat-title a:contains("Forum 1")').closest('.cat-icon').attr('id','pi');
  $('.cat-title a:contains("Forum 2")').closest('.cat-icon').attr('id','pii');
    });

Malheureusement, aucun id n'a été attribué. Je précise, soit-dit en passant, que mon template concerné a subi des modifications.
Je souhaiterais ensuite le même principe, mais cette fois-ci au niveau des sujets. A ce niveau-là, un seul et même icône sera affiché sur tous les sujets, bien entendu.

Ensuite, pour ce qui est de la possibilité de changer l'apparence des icônes (rajouter simplement une couleur rouge) pour avertir lorsqu'il y a des nouveaux messages, je n'ai pas trop d'idées de comment m'y prendre...

Je vous remercie d'avance pour votre aide et vous souhaite un bon week-end

[foxies]

Bonjour Milouze14 et merci ! Mais je ne crois pas que cette façon de faire va me permettre d'obtenir ce que je souhaitais au départ. En effet, comme indiqué dans mon tout premier message, il s’agissait en premier lieu de donner un id à chaque icône FA de mes forums (je souhaitais en effet que chaque forum présente un icône FA diffèrent. Ces icônes « changeraient d’apparence » de manière identique (genre, en se secouant par exemple, via la keyframes dont j’ai parlé plus haut) pour indiquer les nouveaux messages). Du coup, avec les codes ci-dessus, je ne crois pas que cela prenne en compte les id qui ont été attribués à chaque icône FA des catégories ? Je ne sais pas si mes explications sont claires, désolée si ça ne l’est pas :/

Edit : J'ai eu une petite idée mais je ne suis pas sûre de mon coup Comme j'ai ceci en CSS de base :

Code:

.cat-icon {
    background: #e0e0e0;
    border-radius: 5px;
    display: flex;
    margin-left: 380px;
    margin-top: -50px;
    position: absolute;
    width: 40px;
}

#pi:before{
    color: #353738;
    content: '\f106';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 25px;
    font-weight: 900;
    margin: auto;
}

#pi2:before{
    color: #353738;
    content: '\f187';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 25px;
    font-weight: 900;
       margin: auto;
}

#pi3:before{
    color: #353738;
    content: '\f069';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 25px;
    font-weight: 900;
      margin: auto;
}

#pi4:before{
    color: #353738;
    content: '\f0e7';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 25px;
    font-weight: 900;
    margin: auto;
}

.cat-icon : en gros, l'emplacement des icônes de catégories et leur background.
#pi1, 2, 3, 4 : les icônes FA de chaque catégorie intégrés au .cat-icon en :before.

Je me dis qu'en fait, vu que j'aimerais que le .cat-icon soit impacté pour annoncer les nouveaux messages, c'est bien une nouvelle class qu'il faut ajouter, class qui contiendrait ceci afin d'animer .cat-icon :

Code:

-webkit-animation-name: spaceboots;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;

Est-ce que par hasard, un truc du genre pourrait fonctionner au niveau du JS ?

Code:

$(function(){
  $("div.cat-icon").each(function() {
    var texte = $(this).text();
    if (texte.indexOf("_unread") > -1) {
      $(this).find(".cat-icon").addClass('nouveau');
    };
  });
});

Code:

.cat-icon .nouveau {
 -webkit-animation-name: spaceboots;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}


En tout cas j'ai essayé ça mais ça n'a pas marché ^^

[Invité]

Hello pinke,
ah mince, pourtant il me semblait que l'attribution d'un ID pour chaque catégorie était effectué.
Bref, tu peux attribuer un id automatique avec ce script mais pour cela il faut impérativement que toutes les catégories soient visibles même pour les invités.
Il faut donc remplacer le script ayant des :contains("xxxxx") pas celui-ci:

Code:

$(function(){$( ".cat-icon ").attr( "id", function(div){return "pi" +div;})});

Chaque catégorie recevra cet id:

Code:


#pi


puis un chiffre en commençant par 0
Pour la première catégorie:

Code:

#pi0

Ta css sera alors/

Code:

/*CATEGORIE 1*/
#pi0:before
 {
CSS
}
/*CATEGORIE 2*/
#pi1:before
{
 CSS
}
/*CATEGORIE 3*/

#pi2:before
{
CSS
}
/*CATEGORIE 4*/
#pi3:before
{
CSS
}


Pour afficher une icône lors d'un nouveau message ou sujet,
ce script suffira :

En changeant le lien de l'image annonçant un nouveau sujet

Code:


$(function(){
  //L IMAGE NOUVEAU MESSAGE/SUJET
var c='https://2img.net/s/t/13/77/18/i_folder_new_big.png'; 
$('.cacher:contains("'+c+'")').closest('div').addClass('nouveau');
});


La css sera alors:

Code:

   
.cat-icon.nouveau
{
CSS
 }


a++

[foxies]

Bonjour Milouze14, vous avez bien vu, l'attribution d'un id pour chaque catégorie avait bien été effectué

J'ai utilisé votre JS, ce qui donne :

Code:

$(function(){
  //L IMAGE NOUVEAU MESSAGE/SUJET
var c='https://2img.net/i/fa/modernbb/forum_unread_category.png';
$('.cacher:contains("'+c+'")').closest('div').addClass('nouveau');
});

Malheureusement, ça n'a pas l'air de fonctionner. Aucune class ne se rajoute à .cat-icon malgré le fait que de nouveaux messages ont été posté.

[Invité]

Re,
petite boulette de ma part concernant une citation au lieu de l'édition .

voir plus bas :
https://forum.forumactif.com/t397189p30-icones-fa-et-indication-de-nouveaux-messages#3320418

a++

[Invité]

Re,
l'image doit être non pas celle de la catégorie mais bien du sujet :
Forum - Nouveau :

a++

[foxies]

Merci, c'est ce que je viens de faire mais ça ne fonctionne toujours pas

(avec ce lien, du coup :'https://2img.net/i/fa/modernbb/topic_unread.png')

[Invité]

Re,
vu que ton fofo est totalement fermé aux invités, ce n'est pas facile de voir .
Aurais tu un compte test ?
a++

[foxies]

En effet, je comprends... pas évident J'ai ouvert le forum 4 aux invités et je vous envoie un MP pour vous donner les identifiants de mon compte test.

[foxies]

Après quelques tests et l'aide de Milouze14 () , la class est finalement apparue. J'ai bien réussi à changer la couleur background en cas de nouveaux messages mais cependant pas à activer l'animation voulue. Je ne sais pas si cela va être réalisable... je vais de toute façon continuer à chercher de mon côté et à me pencher aussi sur l'affichage des icônes cette fois-ci dans la liste des sujets.

[MasDan]

Bonjour à vous deux,

En test, j'ai réussi à modifier la couleur et faire fonctionné l'animation.

Cela pourrait être quelques peu incompatible avec la solution fourni par Milouze; donc à vous de vous en inspirer.

1) Une nouvelle version a été publié, il pourrait être intéressant de passer à cette nouvelle version

Code:

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" >

2) Le code span est manquant

mais n'est vraisemblablement plus nécessaire.

3) au CSS pour l'animation, la classe .shake doit être renommé .shake:before

4) le code javascript supplémentaire était le suivant

Code:

$(function(){
  $("div.cat-icon").each(function() {
    var texte = $(this).text();
    if (texte.indexOf("_unread") > -1) {
      $(this).find(".icone").addClass("shake").css("color", "#297268");   
    } else {
      $(this).find(".icone").css("color", "#353738");
    };
  });
});

[foxies]

Bonjour et merci MasDan, avec toutes ces indications j'ai en-fin réussi à faire marcher la chose haha. Et en réutilisant le même système, je suis même parvenue à réaliser ce que je voulais au niveau de la liste des messages !

Très bonne journée