[AWESOMEBB] Outils de modération rapide

Hello,

Je viens vous présenter une astuce qui vous permettra de rapidement mettre la mains sur quelques outils de modération sans avoir à changer de page plusieurs fois. Ceci peut être pratique si vous faite de la modération à la suite de messages privés ou via la demande de l'un de vos membres quand vous êtes sur la chatbox par exemple.
A l'image ça donne ça :


Et dans la pratique il va falloir commencer par  aller dans la gestion des codes javascript

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:


jQuery(function($){
 var tid;
 var modtool = function(){
 var modbtn = '<span id="modbtn"><i class="material-icons">settings</i></span>';
 $('body').append(modbtn);
 tid = _navbar.logout.url.match(/tid=[a-z0-9]+/);
 generatedtool();
 }, generatedtool = function(){
 var tools = '<article id="modtool">\
 <h2>Rechercher un sujet</h2>\
 <div class="modtool">\
 </div>\
 </article>';
 $('#modbtn').click(function(event){
 event.preventDefault();
 $(this).toggleClass('active');
 if(!$('#modtool').length){
 $('body').append(tools);
 $('.modtool').append('<input type="text" name="topic_search"><button id="search_btn"><i class="material-icons">check</i></button>');
 $('#search_btn').click(function(event){
 event.preventDefault();
 var v = '/search?search_keywords='+encodeURI($('input[name="topic_search"]').val());
 if(v == "") errornotif("Veuillez entrer un titre de sujet !");
 else findmessage(v);
 });
 }else $('#modtool').toggleClass('hidden');
 if(location.pathname == "/privmsg" && location.search.match("mode=read") && $(this).is('.active')) user_history();
 });

 },user_history = function(){
 var s = $('.block-post-footer-details').text(), u = s.match(/[a-z]{3,15}/i);
 if(!$('#user_history').length) $('.modtool').append('<br/>Ou trouver les derniers sujets ouverts par <a id="user_history" href="/st/'+u+'" alt="Derniers sujets de'+u+'">'+u+'</a>');
 $('#user_history').click(function(event){ event.preventDefault(); var v = $(this).attr('href'); findmessage(v); });
 }, findmessage = function(v){
 for (var i = 0; i < 4; i++) {
 switch(i){
 case 0:
 if(!$('#title'+i).length) $('<p id="title'+i+'"></p>').appendTo('.modtool');
 $('#title0').load(v+' .topictitle:nth-child(1)', function(){
 if($('#title0').html() == "") errornotif("Aucun sujet ne correspond à votre recherche");
 });
 break;
 case 1:
 if(!$('#title'+i).length){ $('<p id="title'+i+'"></p>').appendTo('.modtool'); }
 $('#title'+i).load(v+' .topictitle:nth-child(2)');
 break;
 case 2:
 if(!$('#title'+i).length){ $('<p id="title'+i+'"></p>').appendTo('.modtool'); }
 $('#title'+i).load(v+' .topictitle:nth-child(3)');
 break;
 case 3:
 if(!$('#title'+i).length){ $('<p id="title'+i+'"></p>').appendTo('.modtool'); }
 $('#title'+i).load(v+' .topictitle:nth-child(4)', function(){
 $('.topictitle').each(function(){
 var topic_id = $(this).attr('href').match(/[0-9]/);
 $(this).after('<span class="tools"><a class="btn btn-flat" href="/modcp?mode=delete&t='+topic_id+'&'+tid+'" title="Supprimer le sujet"><i class="material-icons">delete_forever</i></a> \
 <a class="btn btn-flat" href="/modcp?mode=trash&t='+topic_id+'&'+tid+'" title="Envoyer à la corbeille"><i class="material-icons">delete</i></a>  \
 <a class="btn btn-flat" href="/modcp?mode=unlock&t='+topic_id+'&'+tid+'" title="Déverrouiller le sujet"><i class="material-icons">lock_open</i></a> \
 <a class="btn btn-flat" href="/modcp?mode=lock&t='+topic_id+'&'+tid+'" title="Verrouiller le sujet"><i class="material-icons">lock</i></a>&nbsp;</span>');
 $('.btn').click(function(event){
 event.preventDefault();
 var action = $(this).attr('href');
 $.get(action).done(function(){
 succesnotif("l'action que vous avez demandé a aboutie");
 });
 });
 });
 });
 }
 }
 }, errornotif = function(txt){
 if(!$('.errornotif').length) $('.modtool').after('<div class="errornotif"><i class="material-icons">info</i>'+txt+'</div>');
 setTimeout(function(){$('.errornotif').remove();}, 3000);
 }, succesnotif = function(txt){
 if(!$('.succesnotif').length) $('.modtool').after('<div class="succesnotif"><i class="material-icons">info</i>'+txt+'</div>');
 setTimeout(function(){$('.succesnotif').remove();}, 3000);
 };

 if(!_userdata.user_level == 1 || !_userdata.user_level == 2) return;
 else modtool();
});


Penser a cliquer sur le bouton

Puis dans la feuille de style CSS:

Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


#modbtn{display:inline-block;position:fixed;right:60px;bottom:80px;background:#ff5733;line-height:64px;width:64px;text-align:center;cursor:pointer;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}#modbtn:hover .material-icons{-moz-transform:rotate(720deg);-ms-transform:rotate(720deg);-webkit-transform:rotate(720deg);transform:rotate(720deg)}#modbtn:hover::before{content:"MODERATION RAPIDE";width:max-content;line-height:initial;position:absolute;top:-38px;left:-42px;font-size:12px;background:#f5f5f5;padding:8px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:2px 2px 6px rgba(105,105,105,.6);-webkit-box-shadow:2px 2px 6px rgba(105,105,105,.6);box-shadow:2px 2px 6px rgba(105,105,105,.6)}#modbtn.active:hover::before{content:"FERMER";left:0;top:72px}#modbtn .material-icons{font-size:58px}article#modtool{z-index:9999;position:fixed;bottom:140px;right:120px;width:500px;background:#f5f5f5;height:240px;box-sizing:border-box;padding:35px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:2px 2px 6px rgba(10,10,50,.4);-webkit-box-shadow:2px 2px 6px rgba(10,10,50,.4);box-shadow:2px 2px 6px rgba(10,10,50,.4)}article#modtool.hidden{display:none}article#modtool .modtool{font-size:16px;line-height:30px}article#modtool .modtool a{color:#20b2aa;text-shadow:1px 1px 2px rgba(0,0,0,.2)}article#modtool .modtool a:hover{color:coral}article#modtool .modtool p{position:relative}article#modtool .modtool .tools{float:right}article#modtool .modtool .btn{height:20px;padding:0 2px}article#modtool .modtool .btn i{font-size:16px;margin-left:0;vertical-align:super}article#modtool h2{font-size:2.5em;margin-bottom:6px}article#modtool input{width:320px;line-height:34px;display:inline-block;border:1px solid rgba(0,0,0,.2);-moz-border-radius:2px!important;-webkit-border-radius:2px;border-radius:2px!important;-moz-box-shadow:0 0 2px rgba(0,0,0,.4) inset;-webkit-box-shadow:0 0 2px rgba(0,0,0,.4) inset;box-shadow:0 0 2px rgba(0,0,0,.4) inset}article#modtool .errornotif,article#modtool .succesnotif{height:55px;line-height:55px;margin-top:15px;box-sizing:border-box;padding:0 25px;font-size:16px;color:#263238;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3NGMzYyIvPjxzdG9wIG9mZnNldD0iNzklIiBzdG9wLWNvbG9yPSIjZjViN2IxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);background:-moz-linear-gradient(90deg,#e74c3c 0,#f5b7b1 79%,#fff 100%);background:-webkit-linear-gradient(90deg,#e74c3c 0,#f5b7b1 79%,#fff 100%);background:linear-gradient(0deg,#e74c3c 0,#f5b7b1 79%,#fff 100%);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:-2px -3px 3px rgba(0,0,0,.2);-webkit-box-shadow:-2px -3px 3px rgba(0,0,0,.2);box-shadow:-2px -3px 3px rgba(0,0,0,.2)}article#modtool .errornotif i,article#modtool .succesnotif i{line-height:55px;margin-right:6px;font-size:42px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}article#modtool .succesnotif{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiZDEwMCIvPjxzdG9wIG9mZnNldD0iNzklIiBzdG9wLWNvbG9yPSIjMzFmZjI2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);background:-moz-linear-gradient(90deg,#0bd100 0,#31ff26 79%,#fff 100%);background:-webkit-linear-gradient(90deg,#0bd100 0,#31ff26 79%,#fff 100%);background:linear-gradient(0deg,#0bd100 0,#31ff26 79%,#fff 100%)}#search_btn{margin-left:25px;background:#a0ea1a;color:#f5f5f5;padding:5px;height:34px;vertical-align:top;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 2px rgba(0,0,0,.4);box-shadow:0 0 2px rgba(0,0,0,.4)}#search_btn:hover{background:#daf7a6;color:#263238;-moz-box-shadow:0 0 2px rgba(0,0,0,.4) inset;-webkit-box-shadow:0 0 2px rgba(0,0,0,.4) inset;box-shadow:0 0 2px rgba(0,0,0,.4) inset}#search_btn:focus{outline-color:#9acd32}p#title0 a,p#title1 a,p#title2 a,p#title3 a{line-height:20px;font-size:18px}


Penser a cliquer sur le bouton

Le javascript ajoute la roue sur laquelle vous pouvez cliquer pour rechercher un sujet. Si vous êtes en train de lire un MP alors vous avez aussi un lien pour trouver les derniers sujets ouverts par le membre qui vous a envoyer le message.
Le javascript limite la recherche à 3 sujets seulement, qui une fois trouvés peuvent être corbeillés, verrouillés ou déverrouillés sans quitter la page. Quant au petit plus il vous mène tout simplement en bas de page du sujet pour accéder à plus d'outils.

J'ai minifié le CSS pour ne pas vous faire peur avec 173 lignes de codes, toutefois si vous préfèrez je vous met quand même toutes ces lignes sous spoiler.

Le CSS non minifié:

Code:

/*BOUTON DE MODERATION RAPIDE*/
#modbtn {
  display: inline-block;
  position: fixed;
  right: 60px;
  bottom: 80px;
  background: #FF5733;
  line-height: 64px;
  width: 64px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#modbtn:hover .material-icons {
  -moz-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  transform: rotate(720deg);
}
#modbtn:hover::before {
  content: "MODERATION RAPIDE";
  width: max-content;
  line-height: initial;
  position: absolute;
  top: -38px;
  left: -42px;
  font-size: 12px;
  background: whitesmoke;
  padding: 8px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 2px 2px 6px rgba(105, 105, 105, 0.6);
  -webkit-box-shadow: 2px 2px 6px rgba(105, 105, 105, 0.6);
  box-shadow: 2px 2px 6px rgba(105, 105, 105, 0.6);
}
#modbtn.active:hover::before {
  content: "FERMER";
  left: 0;
  top: 72px;
}
#modbtn .material-icons {
  font-size: 58px;
}

/*FORMULAIRE FORUM A MODERER*/
article#modtool {
  z-index: 9999;
  position: fixed;
  bottom: 140px;
  right: 120px;
  width: 500px;
  background: whitesmoke;
  height: 240px;
  box-sizing: border-box;
  padding: 35px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 2px 2px 6px rgba(10, 10, 50, 0.4);
  -webkit-box-shadow: 2px 2px 6px rgba(10, 10, 50, 0.4);
  box-shadow: 2px 2px 6px rgba(10, 10, 50, 0.4);
}
article#modtool.hidden {
  display: none;
}
article#modtool .modtool {
  font-size: 16px;
  line-height: 30px;
}
article#modtool .modtool a {
  color: lightseagreen;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
article#modtool .modtool a:hover {
  color: coral;
}
article#modtool .modtool p {
  position: relative;
}
article#modtool .modtool .tools {
  float: right;
}
article#modtool .modtool .btn {
  height: 20px;
  padding: 0 2px;
}
article#modtool .modtool .btn i {
  font-size: 16px;
  margin-left: 0;
  vertical-align: super;
}
article#modtool h2 {
  font-size: 2.5em;
  margin-bottom: 6px;
}
article#modtool input {
  width: 320px;
  line-height: 34px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -moz-border-radius: 2px !important;
  -webkit-border-radius: 2px;
  border-radius: 2px !important;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
}
article#modtool .errornotif, article#modtool .succesnotif {
  height: 55px;
  line-height: 55px;
  margin-top: 15px;
  box-sizing: border-box;
  padding: 0 25px;
  font-size: 16px;
  color: #263238;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3NGMzYyIvPjxzdG9wIG9mZnNldD0iNzklIiBzdG9wLWNvbG9yPSIjZjViN2IxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -moz-linear-gradient(90deg, #e74c3c 0%, #f5b7b1 79%, #ffffff 100%);
  background: -webkit-linear-gradient(90deg, #e74c3c 0%, #f5b7b1 79%, #ffffff 100%);
  background: linear-gradient(0deg, #e74c3c 0%, #f5b7b1 79%, #ffffff 100%);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: -2px -3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: -2px -3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -2px -3px 3px rgba(0, 0, 0, 0.2);
}
article#modtool .errornotif i, article#modtool .succesnotif i {
  line-height: 55px;
  margin-right: 6px;
  font-size: 42px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
article#modtool .succesnotif {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiZDEwMCIvPjxzdG9wIG9mZnNldD0iNzklIiBzdG9wLWNvbG9yPSIjMzFmZjI2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -moz-linear-gradient(90deg, #0bd100 0%, #31ff26 79%, #ffffff 100%);
  background: -webkit-linear-gradient(90deg, #0bd100 0%, #31ff26 79%, #ffffff 100%);
  background: linear-gradient(0deg, #0bd100 0%, #31ff26 79%, #ffffff 100%);
}

#search_btn {
  margin-left: 25px;
  background: #a0ea1a;
  color: whitesmoke;
  padding: 5px;
  height: 34px;
  vertical-align: top;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
#search_btn:hover {
  background: #DAF7A6;
  color: #263238;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
}
#search_btn:focus {
  outline-color: yellowgreen;
}

p#title0 a, p#title1 a, p#title2 a, p#title3 a {
  line-height: 20px;
  font-size: 18px;
}

@SeLfde4Th7 .

Coucou Maxime,
merci beaucoup pour cette merveilleuse astuce .