[PHPBB3]Afficher une barre de progression sur la liste des MPS

Hello les ami(e)s,

voici une astuce bien sympa,
elle consiste a afficher une barre de progression en relation avec le pourcentage occupé de chaque boîte:
Si il n'y a aucun message, cette barre ne sera pas visible.



 Boîte de réception

 Messages envoyés

 Boîte d'envoi

 Archives

Jusqu'à 30% d'occupation vous aurez une couleur verte:


Jusqu'à 60% d'occupation vous aurez une couleur orange:


Jusqu'à 100% d'occupation vous aurez une couleur rouge:


Vous pourrez définir les couleurs désirées dans le script ici:

Code:


//PREMIERE COULEUR
var b="green";  
//DEUXIEME COULEUR
var c="orange";  
//TROISIEME COULEUR
var d="red";


Cette barre s'affichera progressivement ( 2 secondes),
vous pouvez diminuer la valeur (2000) dans le script ici:

Code:


{duration: 2000,easing: "linear"});


Exemple pour 3 secondes, il faudra renseigner 3000.

Ne touchez à rien d'autre.

Dans un premier temps, on va intervenir dans le templates de la liste des mps.

Dans le template privmsgs_body:
Affichage/Templates/Poster et messages privés/privmsgs_body

Recherchez ceci:

Code:

<p class="left-box">{BOX_SIZE_STATUS}</p>

Remplacez par:

Code:


<p class="left-box M14_number_pourcent">{BOX_SIZE_STATUS}</p>


Plus bas , repérez ceci:

Code:

<p class="right-box">
 {L_DISPLAY_MESSAGES}: <select name="msgdays">
 {S_SELECT_MSG_DAYS}
 </select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
 </p>
<div class="clear"></div>


Juste après déposez ceci:

Code:

<div id="M14_pourcentePriv"></div>

Pensez a enregistrer puis à valider en cliquant respectivement sur   puis




Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


div#M14_pourcentePriv{width:10px;height:5px;display:inline-block;}


Penser a cliquer sur le bouton


Et pour finir le script:


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

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:


if(location.href.match(/privmsg/))
{
$(function(){
var a=100;  
//PREMIERE COULEUR
var b="green";  
//DEUXIEME COULEUR
var c="orange";  
//TROISIEME COULEUR
var d="red";
$('.M14_number_pourcent').each(function(){
var num=$(this).text();
var numbis=num.match(/\d+/);
var result=a-numbis;
if(numbis==null)return;
else
{
$('#M14_pourcentePriv').animate({width: ''+numbis+'%'}, {duration: 2000,easing: "linear"});
$('#M14_pourcentePriv').attr('title',''+numbis+'%');
if(numbis<=30){$('#M14_pourcentePriv').css('background-color',b);}if(numbis>30){$('#M14_pourcentePriv').css('background-color',c);} if(numbis>60){$('#M14_pourcentePriv').css('background-color',d);} }});});}



Penser a cliquer sur le bouton



Voila, c'est tout pour le moment   .
Un soucis direction l'entraide
https://www.milouze14.com/f14-entraide-forumactif