Animation lors de la réception d'un message privé

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Animation lors de la réception d'un message privé

Message par Chokolatyne Mar 12 Mai 2020 - 14:08

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

En essayant d’améliorer toujours plus l’ergonomie de mon forum, j’aimerais arranger l’affichage des notifications lors de la réception d’un nouveau message privé pour qu’une animation se joue. Travaillant avec des svg j’ai totalement personnalisé ma barre de navigation que vous pourrez retrouver ci-dessous.
TEMPLATE OVERHALL_HEADER POUR LA NAVBAR
Code:
<div id="NAVBAR">
  <div class="NAVright">
      <a title="clique ici pour des informations"><div class="NAVlinksicon"><div class="navicon links"></div></div></a>
      <div class="NAVicon" title="rejoindre le discord">
        <div class="navicon discord"></div>
      </div>
      <div class="NAVicon" title="revenir sur l'accueil">
        <a href="/forum"><div class="navicon home"></div></a>
      </div>
      <div class="NAVicon" title="Foire aux questions">
        <a href="/h3-faq"><div class="navicon faq"></div></a>
      </div>
      <div class="NAVicon" title="Liste des membres">
        <a href="/memberlist"><div class="navicon users"></div></a>
      </div>
      <div class="NAVicon" title="Factions">
        <div class="navicon groups"></div>
      </div>
      <div class="NAVicon" title="Chroma Shop">
        <div class="navicon chromashop"></div>
      </div>
      <div class="NAVicon" title="Carte">
        <div class="navicon map"></div>>
      </div>
    <!-- BEGIN switch_user_logged_out -->
      <div class="NAVicon" title="S'enregistrer">
        <a href="/register"><div class="navicon register"></div></a>
      </div>
      <div class="NAVicon" title="Connexion">
        <a href="/login"><div class="navicon login"></div></a>
      </div>
    <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
          <div class="NAVicon" title="Modifier son profil">
        <div class="navicon editprofil"></div>
      </div>
   
      <div class="NAVicon" title="Connexion">
        <a href="/login?logout"><div class="navicon login"></div></a>
      </div>
  <!-- END switch_user_logged_in -->
  </div>

  <div class="NAVleft">
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>   
  </div>

CSS
Code:

#NAVBAR {width: 100%;height: 75px;position:fixed;margin:0 auto;background: var(--black002);z-index: 999;padding-top:10px;margin:0px auto;overflow:hidden;}

/*NAVBAR - ICONS POSITION LEFT - RIGHT*/
.NAVright {position: relative;float:right;display: flex;margin-right:20px;}
.NAVleft {position: relative;float:left;display: flex; }

.NAVlinksicon, .NAVicon {width: 50px;height: 75px;position: relative;overflow: hidden;text-align: center;margin-left:5px;cursor: pointer;line-height:70px;display: block!important;}

/*NAVBAR - ICONS*/
.arrowdown:before {content:'\ebd9';}
.discord:before {content:'\ebd6';}
.home:before{content:'\ea63';}
.faq:before{content:'\eb31';)}
.users:before{content:'\eb9c';}
.groups:before{content:'\ea98';}
.chromashop:before{content:'\eb0f';}
.map:before{content:'\eab1';}
.connexion:before{content:'\eaa0';}
.register:before{content:'\e941';}
.login:before{content:'\eaa0';}
.logout:before{content:'\eaa2';}
.links:before{content:'\ea96';}
.editprofil:before{content:'\eb47';}

.navicon:before {font-family:'honeybee';font-size:35px;background:linear-gradient(var(--red01), var(--red02) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

La partie concernant l’icon de la messagerie privée est celui-là.
Code:
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>

CSS
Code:
.CHNAVstructmp {
  position: absolute;
  display: block;
  top: 35px;
  left: 50px;
  transform: translate(-50%, -50%);}

.CHNAVbgmp {
  position: absolute;
  height:40px;
  width: 40px;
  transform: translate(-50%, -50%);
  border-radius: 75px;
  background:var(--gdred);
  animation: newmp 1.5s infinite;}

.fa-envelope {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 20px;  height:30px;
  width: 40px;border-radius: 75px;text-align:center;padding-top:10px;
  color: #ffffff;background:var(--gdred);}

@keyframes newmp {
  0%{height: 0px;width: 0px;}
  50%{height: 50px;width: 50px;opacity: 0.8;}
  70%{height: 60px;width: 60px;opacity: 0.1;}
  100%{height: 75px;width: 75px;opacity: 0;}
}

Et visuellement, voilà à quoi ressemble la navbar.
Spoiler:

Mon problème est donc le suivant : est-il possible que l’animation se lance seulement lorsqu’un nouveau message est disponible dans la messagerie privée ? Et si oui a-t-il un moyen particulier d’y arriver ?

J'espère que mon problème est assez clair, sinon je n'hésiterais pas à demander d'autres ressources auxquelles je n'aurais pas pensées. Je vous remercie de l’intérêt que vous porterez à mon problème.
Chokolatyne

Chokolatyne
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 24/12/2019

https://fermefofo.forumactif.org/
Chokolatyne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 14:58

Hello Chokolatyne,

il aurait été judicieux de fournir le template dans la totalité afin d'avoir le même visu..
Comment a été place le code html cité?
Comment as tu importé la librairie des icônes ?
Actuellement je n'ai strictement rien qui s'affiche sur mon fofo de test avec ce que tu fournis Wink .


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Chokolatyne Mar 12 Mai 2020 - 15:10

Bonjour Milouze14,

Je savais que j'oubliais quelque chose ! Pour les librairies des icons oui elles sont là :
Code:
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/aafbda32e6.js" crossorigin="anonymous"></script>

Avec l'intégralité du template :


Le code en lui-même du header n'est pas fini (sujets récents particulièrement), mais j'espère que tout est bon !
Chokolatyne

Chokolatyne
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 24/12/2019

https://fermefofo.forumactif.org/
Chokolatyne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Chokolatyne Mar 12 Mai 2020 - 15:11

et le css : (désolé pour le double post, la limite est dépassée)
Chokolatyne

Chokolatyne
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 24/12/2019

https://fermefofo.forumactif.org/
Chokolatyne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 15:29

Re,
merci mais je n'ai pas l'animation comme sur ton fofo, l'enveloppe reste telle que..
Il me faut quelque chose de concret chère amie,
sinon je ne peux pas te donner le script adéquate.

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 15:43

Re (désolé pour le double post),

tu peux tester ceci:

Il faudrait modifier cette div dans le template:

Code:
<div class="CHNAVbgmp"></div>

Par:
Code:
<div class="CHNAVbg"></div>

Puis modifier son style ainsi:
Code:

.CHNAVbg {
    position: absolute;
    height: 40px;
    width: 40px;
    transform: translate(-50%, -50%);
    border-radius: 75px;
    background: var(--gdred);
  
}

et ajoutes:
Code:

.CHNAVbg.mp
{
  
    animation: newmp 1.5s infinite;
}

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.

Déposes ceci:
Code:

$(function(){
    $.get('/privmsg?folder=inbox' , function(data){
    var number=$(data).find('img[alt="Message Non-lu"]').length;
if(number>=1)
{
$('.CHNAVbg').addClass('mp');
}
});});



Penses à cliquer sur le bouton VALIDER

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 15:52

Je préfère un code qui viendrait utiliser ce qui est déjà sur la page plutôt que d'en charger une autre.
Si jamais:

Dans le template overall_header, modifie la partie du code que tu as donné dans le 1er message par:
Code:
<div class="navss" style="display: none !important;">{GENERATED_NAV_BAR}</div>

<div id="NAVBAR">
  <div class="NAVright">
      <a title="clique ici pour des informations"><div class="NAVlinksicon"><div class="navicon links"></div></div></a>
      <div class="NAVicon" title="rejoindre le discord">
        <div class="navicon discord"></div>
      </div>
      <div class="NAVicon" title="revenir sur l'accueil">
        <a href="/forum"><div class="navicon home"></div></a>
      </div>
      <div class="NAVicon" title="Foire aux questions">
        <a href="/h3-faq"><div class="navicon faq"></div></a>
      </div>
      <div class="NAVicon" title="Liste des membres">
        <a href="/memberlist"><div class="navicon users"></div></a>
      </div>
      <div class="NAVicon" title="Factions">
        <div class="navicon groups"></div>
      </div>
      <div class="NAVicon" title="Chroma Shop">
        <div class="navicon chromashop"></div>
      </div>
      <div class="NAVicon" title="Carte">
        <div class="navicon map"></div>>
      </div>
    <!-- BEGIN switch_user_logged_out -->
      <div class="NAVicon" title="S'enregistrer">
        <a href="/register"><div class="navicon register"></div></a>
      </div>
      <div class="NAVicon" title="Connexion">
        <a href="/login"><div class="navicon login"></div></a>
      </div>
    <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
          <div class="NAVicon" title="Modifier son profil">
        <div class="navicon editprofil"></div>
      </div>
  
      <div class="NAVicon" title="Connexion">
        <a href="/login?logout"><div class="navicon login"></div></a>
      </div>
  <!-- END switch_user_logged_in -->
  </div>
 
  <div class="NAVleft">
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>  
  </div>

<script>
var checkmp = $('.navss a[href="/privmsg?folder=inbox"] img');
  
if ($(checkmp).is('[title*="nouveau"]')) {
  $('.CHNAVstructmp').addClass('newmp');
}
</script>

Ce qui donnera au niveau du CSS:
Code:
.CHNAVstructmp {
  position: absolute;
  display: block;
  top: 35px;
  left: 50px;
  transform: translate(-50%, -50%);}
 
.CHNAVbgmp {
  position: absolute;
  height:40px;
  width: 40px;
  transform: translate(-50%, -50%);
  border-radius: 75px;
  background:var(--gdred); }
 
.fa-envelope {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 20px;  height:30px;
  width: 40px;border-radius: 75px;text-align:center;padding-top:10px;
  color: #ffffff;background:var(--gdred);}

.newmp {
animation: newmp 1.5s infinite; }
 
@keyframes newmp {
  0%{height: 0px;width: 0px;}
  50%{height: 50px;width: 50px;opacity: 0.8;}
  70%{height: 60px;width: 60px;opacity: 0.1;}
  100%{height: 75px;width: 75px;opacity: 0;}
}
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 17:48

Oups, désolé.


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 17:56

Milouze14 a écrit:Oups, désolé.


a++

Ah mais y'a pas lieu de s'excuser ! C'est juste deux méthodes différentes I love you
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 18:17

Re,

je viens de tester et le script ne fonctionne pas chez moi.
De plus, l'effet est sur cette div:

Code:
<div class="CHNAVbgmp"></div>


Donc, je reste sur ma méthode qui va réellement rechercher sur la partie concernée plutôt que d'ajouter une div:
Code:
<div class="navss" style="display: none !important;">{GENERATED_NAV_BAR}</div>
Ayant pour seule fonction d'avoir des informations masquées d'un éventuel mp  .
Mais bon, comme tu le dis si bien, ce sont deux méthodes différentes Wink .



Code:
<script>
  $(function(){
 $.get('/privmsg?folder=inbox' , function(data){
    var number=$(data).find('img[alt="Message Non-lu"]').length;
if(number>=1)
{
$('.CHNAVbg').addClass('newmp');
}
  });});
</script>

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 18:28

Le problème, c'est qu'on va charger la page /privmsg?folder=inbox à chaque fois qu'on charge une quelconque page du forum, que ce soit un sujet ou non: là, on vient juste rajouter une div invisible qui contient les données natives de FA qui sont chargées de base à chaque page; du coup, on vient utiliser les éléments déjà existants pour appliquer l'animation seulement s'il y a un nouveau MP. Ça évite une surcharge dont on peut se passer et on vient accélérer le chargement de la page Smile

J'ai essayé en local avec le forum de Chokolatyne et j'ai eu aucun problème reflexion
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 18:41

Effectivement, c'est bien là le soucis, la requête,
Ensuite il faudrait tester si tu as MP non lu.
Est-ce que que tu as toujours l'infobulle  (nouveau) sur la barre de navigation de l'image MP ?
J'en doute très fortement au bout d'un certain temps.


Actualises le navigateur ou alors regardes demain (si le temps presse Smile ) .
Mais je doute fortement que ton infobulle soit encore présente et pourtant tu auras encore ton MP non lus encore présent.

L'expérience depuis maintenant près de 8 années que je m'amuse Smile avec les templates,variables etc  sur mon fofo me permettre de remonter ce genre d' informations Wink .

a++


Dernière édition par Milouze14 le Mar 12 Mai 2020 - 18:42, édité 1 fois
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 18:42

J'ai toujours l'infobulle. :p
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 18:50

Super et si tu cliques sur le lien du mp de la barre de navigation sans lire le dit MP.

Que se passe t-il ?
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 18:58

Ça dépendra des membres dans ce cas. Si tu tiens à avoir une icône clignotante en permanence à moins d'avoir lu le MP mais ne pas l'oublier, ou si tu veux juste être tenu au courant. Smile
Les deux codes conviennent à des demandes différentes, mais pas besoin de dédain ok

(au passage: https://i.ibb.co/5cvvzBf/Screenshot-21.png
ceux suspectés d’avoir contaminé leur maître sont attrapés)
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 19:03

Re,
hum, non, je ne suis pas d'accord un Mp si il n'est pas lu doit garder son apparence.
Ce n'est pas le cas.

Si tu tiens à avoir une icône clignotante en permanence à moins d'avoir lu le MP

Ou alors supprimer directement le bouton et se fier aux notifications de la Toolbar non ?

Je n'ai plus d'avertissement sur la barre de navigation et pourtant j'ai tout de même trois MPS non lu:

Animation lors de la réception d'un message privé 1122

Voilà pourquoi la div et moins gourmande mais pas fiable Wink .
Ma requête est peut être plus lourde mais fiable Wink .
Ensuite rien ne nous oblige a mettre le script dans le dit template,
le mettre dans la gestion des scripts et cocher sur l’accueil,
on sera donc averti qu'à cet endroit.

Pour moi le sujet est clos.
A bientôt cher ami.

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 19:44

Ah mais il n'y a pas de question d'être d'accord ou non; ça dépend du membre. Il n'y a pas de généralité ^^

Ensuite rien ne nous oblige a mettre le script dans le dit template,
le mettre dans la gestion des scripts et cocher sur l’accueil,
on sera donc averti qu'à cet endroit.

Ce qui, du coup, enlève tout intérêt à une toolbar fixe qui s'affiche sur toutes les pages. :/
Chaque code aura son utilité; le tien sera bien plus pratique aux dépens d'une consommation plus importante. C'est au choix Smile

L'heure d'aller manger ! :b Bonne soirée à toi
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Invité Mar 12 Mai 2020 - 19:54

Re,
Ah mais il n'y a pas de question d'être d'accord ou non;

Mais si, je confirme.

Ce qui, du coup, enlève tout intérêt à une toolbar fixe qui s'affiche sur toutes les pages. :/

Mais quel rapport ?

Bonne soirée à toi aussi.
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 19:58

.. Oulah, je vais arrêter là. Ça devient embarrassant x)
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par Chokolatyne Mar 12 Mai 2020 - 23:30

Re bonjour ! Désolé j'ai été occupée tout le restant de la journée :'(

(Merci pour la correction, avec cette mise à jour générale on va repasser tous les textes au peigne fin j'avoue qu'il y a énormément de fautes encore).
J'ai décidé de partir sur la solution de Kehoru, ergonomiquement parlant il est certain qu'une animation visible tant que les messages ne sont pas lus est bien meilleure mais j'avoue que ce n'est pas forcément ce que je recherchais absolument. Je voulais surtout une animation pour signaler au membre qu'il y a des nouveautés. On passe majoritairement via Discord pour le forum, les MPs ne sont que très peu courants donc je pense que ce ne sera pas dérangeant que l'animation se stoppe quand le membre clique sur le bouton : il a accès à sa messagerie, à lui de lire ses messages.

Je vous remercie énormément tous les deux, je n'aurais sincèrement jamais trouver seule (il est temps pour moi de me mettre au javascript), le sujet est clos pour moi encore merci !
Chokolatyne

Chokolatyne
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 24/12/2019

https://fermefofo.forumactif.org/
Chokolatyne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation lors de la réception d'un message privé

Message par mSyx Mar 12 Mai 2020 - 23:45

Je me suis pris à lire le contexte et les autres textes par pure curiosité, je voulais juste signaler ça :b J'aime bien l'idée en tout cas, bon courage à toi/vous !
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum