Inbox list elegante | |
| Lista com as mensagens privadas. |
| Características e aplicação |
| Criador: @Daemon - Inspirado na lista do IPB4 |
| Versão: 1.322042018 |
| Versão: Todas as versões |
| Resultado da aplicação |
![[AddOn] Inbox list elegante MNF32Ux](https://i.imgur.com/MNF32Ux.png) |
| Local de instalação |
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse:
Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript >> Investimento >> Em todas as páginas.
- Código:
/*
* Application: Inbox List Elegant
* Date: 22/04/2018
* Version: 1.322042018
* Copyright (c) 2018 Daemon <bestskins.forumeiros.com>
* This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function() {
if (_userdata.session_logged_in < 1) return;
var lang = {
newMessage: "Nova Mensagem",
inbox: "Caixa de Entrada",
goToMessages: "Ir Para Mensagens"
};
var images = {
loading: "http://i.imgur.com/DYwSiJf.gif",
photo: "http://i.imgur.com/n4qY3fc.png"
};
var config = {
qtdMP: 5, // Set here the number of messages that will be displayed
inboxList: jQuery("<div>", {
id: "daemon-inbox"
}).html(
'<div class="inbox-header">' +
' <a href="/privmsg?mode=post" class="inbox-compose" target="_self">' + lang.newMessage + '</a>' +
' <h4 class="inbox-sectionhead">' + lang.inbox + '</h4>' +
'</div>' +
'<ol class="inbox-inner">' +
' <img src="' + images.loading + '" style="margin: 5px auto;display: block;" />' +
'</ol>' +
'<div class="inbox-footer">' +
' <a href="/privmsg?folder=inbox">' + lang.goToMessages + '</a>' +
'</div>'
),
myCSS: '<style type="text/css">' +
'#daemon-inbox {' +
' font-size: 13px;' +
' font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' +
' line-height: 18px;' +
' margin-top: 15px;' +
' display: none;' +
' width: 450px;' +
' background: #fff;' +
' box-shadow: 0px 15px 110px rgba(0,0,0,0.2);' +
' border-radius: 3px;' +
' z-index: 200;' +
' position: absolute;' +
'}' +
'#daemon-inbox a {' +
' color: #255b79;' +
' text-decoration: none;' +
'}' +
'#daemon-inbox a:hover {' +
' color: #cd3816;' +
'}' +
'#daemon-inbox:before {' +
' border-style: solid;' +
' border-width: 15px;' +
' border-color: transparent transparent #fff;' +
' bottom: 100%;' +
' pointer-events: none;' +
' left: 15px;' +
' content: "";' +
' display: block;' +
' height: 0;' +
' position: absolute;' +
' width: 0;' +
' z-index: 3;' +
'}' +
'.inbox-header {' +
' background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
' border-bottom: 1px solid #e0e0e0;' +
' box-shadow: 0px 1px 6px rgba(0,0,0,0.07);' +
' border-radius: 3px 3px 0px 0px;' +
' padding: 10px;' +
' line-height: 24px;' +
'}' +
'.inbox-header .inbox-compose {' +
' font-size: 12px;' +
' line-height: 28px;' +
' padding: 0 15px;' +
' float: right;' +
' background: #262e33;' +
' color: #ffffff !important;' +
' font-weight: 500;' +
' text-align: center;' +
' text-decoration: none;' +
' text-shadow: none;' +
' white-space: nowrap;' +
' display: inline-block;' +
' vertical-align: middle;' +
' border-radius: 3px;' +
' border: 1px solid rgba(0,0,0,0.1);' +
' -webkit-transition: 0.1s all linear;' +
' -moz-transition: 0.1s all linear;' +
' -ms-transition: 0.1s all linear;' +
' -o-transition: 0.1s all linear;' +
' transition: 0.1s all linear;' +
' -webkit-user-select: none;' +
' -moz-user-select: none;' +
' -ms-user-select: none;' +
' -o-user-select: none;' +
' user-select: none;' +
' -webkit-font-smoothing: antialiased;' +
'}' +
'.inbox-header .inbox-compose:hover {' +
' background-image: url(http://i.imgur.com/eaB5FHK.png);' +
' background-repeat: repeat;' +
'}' +
'.inbox-compose {' +
' font-size: 18px;' +
' color: #333333;' +
' line-height: 24px;' +
' font-weight: 400;' +
' display: inline-block;' +
' margin: 0;' +
'}' +
'.inbox-inner {' +
' width: 100%;' +
' display: table;' +
' table-layout: auto;' +
' position: relative;' +
' border-collapse: separate;' +
' border-spacing: 0;' +
' list-style: none;' +
' padding: 0;' +
' margin: 0;' +
'}' +
'.inbox-li {' +
' width: 100%;' +
' position: relative;' +
' padding: 5px 3px;' +
' border-width: 0 0 1px 0;' +
' border-style: solid;' +
' border-color: #f5f5f5;' +
' box-sizing: border-box;' +
'}' +
'.inbox-li:last-child {border-bottom: 0;}' +
'.inbox-li strong {font-weight: normal !important;}' +
'.inbox-item, .inbox-user {' +
' display: table-cell;' +
' padding: 8px 10px;' +
'}' +
'.inbox-item {color: #9c9c9c;}' +
'.inbox-item .topictitle {display: inherit;}' +
'.inbox-footer {' +
' background: #fff url(http://i.imgur.com/sl0Efuz.png) repeat-x 0 0;' +
' text-align: center;' +
' padding: 10px;' +
' line-height: 24px;' +
' border-top: 1px solid #e0e0e0;' +
' box-shadow: 0px -1px 6px rgba(0,0,0,0.07);' +
' border-radius: 0px 0px 3px 3px;' +
'}' +
'.inbox-photo {' +
' background: #fff;' +
' border: 1px solid #fff;' +
' box-shadow: 0px 0px 0px 1px #e2e2e2;' +
' padding: 0.5px;' +
' vertical-align: middle;' +
' line-height: 1px;' +
' position: relative;' +
' border-radius: 150px;' +
' width: 34px;' +
' height: 34px;' +
'}' +
'</style>'
};
// Inserting CSS before page body
jQuery(config.myCSS).insertBefore("body");
// Inserting element inboxList append to page body
jQuery(config.inboxList).appendTo("body");
jQuery(document).on("click", "a.mainmenu[href='/privmsg?folder=inbox']", function(inbox) {
if (config.inboxList.css("display") != "none") {
config.inboxList.fadeOut("slow");
} else {
config.inboxList.css({
"left": jQuery(this).offset().left,
"top": jQuery(this).offset().top + jQuery(this).outerHeight()
}).show();
if (!config.inboxList.find(".inbox-photo").length) {
config.inboxList.find(".inbox-inner").load("/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(" + config.qtdMP + ")", function() {
jQuery(this).html(
jQuery(this).html()
.replace(/\<\/td\>/g, "</div></li>")
.replace(/\<td class="tcl tdtopics"\>/g, "<li class='inbox-li clearfix'><div class='inbox-user'><img class='inbox-photo' alt='photo' src='" + images.photo + "' /></div><div class='inbox-item'>")
).find("span.status").remove();
config.inboxList.find(".inbox-li").each(function() {
jQuery(this).find("a").each(function() {
var href = jQuery(this).attr("href").split(/(&change|\?change)/g)[0];
jQuery(this).attr("href", href);
});
var user = jQuery(this).find("a[href^='/u']").attr("href");
var elPhoto = jQuery(this).find(".inbox-photo");
var userImage = sessionStorage.getItem(user);
if (userImage) {
elPhoto.attr("src", userImage);
} else {
jQuery.get(user + "?change_version=punbb", function(data) {
var getImage = jQuery("#profile-advanced-right .main-content img:first", data).attr("src");
elPhoto.attr("src", getImage);
sessionStorage.setItem(user, getImage);
});
}
});
});
}
}
return false;
});
});
|
Início
![[AddOn] Inbox list elegante Empty](https://2img.net/i/empty.gif)
[AddOn] Inbox list elegante
por Daemon 29.07.15 2:24
Parabéns!
Tópicos semelhantes