Caixa de notificação

Detalhes da questão

Endereço do fórum: testealrpg.forumeiros.com
Versão do fórum: PunBB

Descrição

Sei que isso dará um pouco de trabalho mais vamos lá...

Seria possível uma caixa de notificação igual a de mensagem privada?

Ex: https://i.imgur.com/oC7n8Fv.png

Se possível fazer eu agradeceria muito.

Fórum aonde eu vi : http://forum.mypst.com.br/

Olá,

Poderia passar o código da barra com o ícone (cp_Barra)?

^-^

Não entendi bem o que você queria mais acho q se refere a isso:

CSS do CP_BARRA:

Código:

/*Barra ferramental*/
        #cp_Barra {
      background-color: #0d1721;
      width: 100%;
      height: 38px;
    }
   
    #cp_opcoes {
      float: right;
      margin: 0 0px;
    }
   
    .cp_opcoes {
      color: #fff;
      font-family: "Arial";
      font-size: 13px;
      list-style-type: none;
      display: initial;
      height: 38px;
    }
   
    .cp_opcoes li {
      display: block;
      float: left;
      border-right: 1px #666 solid;
    }
   
    .cp_opcoes a {
      display: initial;
      text-decoration: none;
      display: block;
      height: 38px;
      line-height: 38px;
      padding: 0 10px;
      transition: 250ms ease background-color;
    }
   
    .cp_opcoes a:hover,
    .cp_opcoes a:focus {
      background-color: #333;
    }
   
    .cp_opcoes a.cp_icon {
      background-repeat: no-repeat;
      background-position: center center;
      display: block;
      height: 38px;
      width: 20px;
    }
   
    .cp_inbox {
      background-image: url(https://i56.servimg.com/u/f56/17/97/98/69/yymnyc10.png);
    }
   
    .cp_notice {
      background-image: url(https://i56.servimg.com/u/f56/17/97/98/69/gyfvip11.png);
    }
        .cp_avatar img{
    border-radius: 50% !important;
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid #D5D5D5 !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    float: right;
    height: 38px;
    margin: 2px;
    padding: 1px;
    width: 38px;
    }
    .cp_avatar img {
      height: 75%;
    }
   
    .cp_guest img {
      vertical-align: middle;
      margin-right: 3px;
    }
   
    #cp_opcoes a {
      color: #d9d9d9 !important;
    }
   
    #key_cp,
    #eye_cp,
    #user_cp,
    #envelope_cp,
    #shopping_cp,
    #folder_cp {
      width: 28px;
      line-height: 18px;
      text-align: center;
    }
   
    #key_cp:hover,
    #eye_cp:hover,
    #user_cp:hover,
    #envelope_cp:hover,
    #shopping_cp:hover,
    #folder_cp:hover {
      opacity: 0.85;
      filter: alpha(opacity =85);
    }
   
    #cp_Barra {
        position: fixed;
        z-index: 101;
        top: 0;
    }
   
    #header {
        padding-top: 32px;
    }

    .cp_title {
      color: #fff;
      font-size: 20px;
      text-decoration: none;
      line-height: 38px;
      height: 32px;
      padding: 0 10px;
      margin-left: 30px;
      display: block;
      float: left;
      transition: 250ms ease background-color;
    }
   
    .cp_title:hover {
      background-color: #fff;
    }
/*Fim da Barra ferramental*/

Javascript da minha caixa de navegação de MP:

Código:

/***
 * Application: Private Message list.
 * Description: This application can displays the list of PM in related menus.
 * Version: 1.03102014-jq1.9.1 - Hermes Kriophoros
 * Made and Optimizations by JScript - 2014/03/10
 * View more in: http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    /***
    * User Definition Variables
    ***/
    /* Put here the amount number of PMs returned!!! */
    var iAmount = 10; 
    /***
    * System Defined Variables - Do not edit if you don't know!
    ***/
    var oConfig = {
        sInfo:
            '<!--' +
            '* Application: Private Message List.' +
            '* Description: This application can displays the list of PM in related menus.' +
            '* Version: 1.03102014-jq1.9.1 - Hermes Kriophoros' +
            '* Made and Optimizations by JScript - 2014/03/10' +
            '* View more in: http://codeforum.besaba.com/forum/index.php' +
            '* Copyright (c) 2014 JScript <jscriptbrasil at live dot com>' +
            '* This work is free. You can redistribute it and/or modify it' +
            '* under the terms of the WTFPL, Version 2' +
            '-->',     
        sContent:
            '<div class="ipsHeaderMenu boxShadow" id="user_inbox_link_menucontent" style="display: none; width: 300px; position: absolute; z-index: 9999;">' +
                '<h4 class="ipsType_sectiontitle">Mensagens Privadas' +
                    '<p class="ipsPad_half ipsType_smaller right">' +
                        '<a class="configure" href="/privmsg?folder=inbox">Mensagens</a> · <a href="/privmsg?mode=post" title="New message">Nova mensagem</a>' +
                    '</p>' +
                '</h4>' +
                '<ul class="ipsList_withminiphoto"><img src="https://i55.servimg.com/u/f55/18/17/62/92/ajax-l10.gif" alt="- Load" style="display: block; margin-left: auto; margin-right: auto;"></ul>' +
            '</div>',     
        sCSS:
            '<style>' +
            '.ipsHeaderMenu {' +
                'background: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 70%, #FFFFFF 100%) !important;' +
                'border-radius: 0 0 6px 6px;' +
                'overflow: hidden;' +
                'padding: 10px;' +
                'width: 340px;' +
            '}' +
            '.boxShadow {' +
                'box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);' +
            '}' +
            '.ipsHeaderMenu .ipsType_sectiontitle {' +
                'margin-bottom: 8px;' +
            '}' +
            '.ipsType_sectiontitle {' +
                'border-bottom: 1px solid #ECECEC;' +
                'color: #595959;' +
                'font-size: 16px;' +
                'font-weight: 400;' +
                'padding: 5px 0;' +
            '}' +
            '.ipsType_smaller, .ipsType_smaller a {' +
                'font-size: 11px !important;' +
            '}' +
            '.ipsPad_half {' +
                'padding: 4px !important;' +
            '}' +
            '.right {' +
                'float: right;' +
            '}' +
            '.ipsList_withminiphoto > li {' +
                'margin-bottom: 8px;' +
            '}' +
            '.ipsType_small {' +
                'font-size: 12px;' +
            '}' +
            '.ipsUserPhoto {' +
                'background: none repeat scroll 0 0 #FFFFFF;' +
                'border: 1px solid #D5D5D5 !important;' +
                'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' +
                'padding: 1px;' +
            '}' +
            '.ipsUserPhoto_mini {' +
                'height: 30px;' +
                'width: 30px;' +
                'border-radius: 50% !important;' +
            '}' +
            '.left {' +
                'float: left;' +
            '}' +
            '.ipsList_withminiphoto > li .list_content {' +
                'margin-left: 40px;' +
            '}' +
            '#user_inbox_link_menucontent ul.ipsList_withminiphoto {' +
                'list-style: none outside none;' +
                'padding-left: 0 !important;' +
            '}' +
            '.desc.lighter, .desc.lighter.blend_links a {' +
                'color: #A4A4A4;' +
            '}' +
            '.ipsType_smaller, .ipsType_smaller a {' +
                'font-size: 11px !important;' +
            '}' +
            '.menu_active {' +
                'color: #595959 !important;' +
                'background-color: #FFFFFF !important;' +
                'background-position: center bottom;' +
                'border-radius: 3px 3px 0 0;' +
                'padding: 4px;' +
            '}' +
            '</style>',
        sTarget: '',
        sSearch: '',
        sExpression0: '',
        sExpression1: '',
        sExpression2: '',
        sGetIMG: ''
    };

    /* Add CSS */
    /*document.head.insertAdjacentHTML('beforeEnd', oConfig.sCSS);*/
    jQuery(oConfig.sCSS).insertBefore('body');
    jQuery('body').append(oConfig.sInfo + oConfig.sContent);

    /* Forum versions! */
    var phpBB2 = jQuery('.bodyline');
    var phpBB3 = jQuery('#wrap');
    var punbb = jQuery('#pun-intro');
    var invision = jQuery('#ipbwrapper');
 
    if (phpBB2.length) {
        oConfig.sSearch = 'form[name="privmsg_list"] .forumline tr';
        oConfig.sTarget = 'tr';
        oConfig.sExpression0 = 'memDiv.find("tr:first, tr:last").remove();';
        oConfig.sExpression1 = 'jQuery(this).find("a.topictitle").html()';
        oConfig.sExpression2 = 'jQuery(this).find("td .name").html() + " - " + jQuery(this).find("td .postdetails").html()';
        oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)';
    } else if(phpBB3.length) {
        oConfig.sSearch = '.topiclist.pmlist.bg_none li';
        oConfig.sTarget = '.icon dt';
        oConfig.sExpression1 = 'jQuery(this).find("a.topictitle")[0].outerHTML';
        oConfig.sExpression2 = 'jQuery(this).find("em").html()';
        oConfig.sGetIMG = ' #profile-advanced-right img:eq(0)';
    } else if(punbb.length) {
        oConfig.sSearch = '.main-content tr .tcl.tdtopics';
        oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first';
    } else if(invision.length) {
        oConfig.sSearch = '.borderwrap table.ipbtable tbody tr:not(":empty")';
        oConfig.sTarget = 'tr';
        oConfig.sExpression1 = 'var _tmp1 = jQuery(this).find("td:eq(2)");_tmp1.children("a.topictitle")[0].outerHTML';
        oConfig.sExpression2 = '_tmp1.children("a.topictitle").remove();_tmp1.html()';
        oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first';
    };
 
    jQuery('a[href*="/privmsg?folder=inbox"]').click(function () {
        var oClicked = jQuery(this);
        var oTarget = jQuery('#user_inbox_link_menucontent');

        if (oTarget[0].style.display == 'none') {
            oClicked.addClass('menu_active');
         
            if ( !jQuery('#user_inbox_link_menucontent ul.ipsList_withminiphoto > li').length ) {
                var memDiv = jQuery('<div>');
                memDiv.load('/privmsg?folder=inbox ' + oConfig.sSearch + ':lt(' + iAmount + ')', function() {
                    if (punbb.length) {
                        memDiv
                            .html(
                                memDiv.html()
                                    .replace(/\<\/a\> por/g, '</a></br><span class="ipsType_smaller desc lighter">')
                                    .replace(/\<\/td\>/g, '</span></div></li>')
                                    .replace(/\<td class="tcl tdtopics"\>/g, '<li class="ipsType_small clearfix"><img class="ipsUserPhoto ipsUserPhoto_mini left" alt="User image" src="https://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"><div class="list_content">')
                            )
                            .find('span.status').remove();
                    } else {
                        if (oConfig.sExpression0) {
                            eval( oConfig.sExpression0 );
                        }
                        var sHtml = '';
                        oConfig.sTarget = memDiv.find(oConfig.sTarget);
                        jQuery.each(oConfig.sTarget, function( index, value ) {
                            sHtml +=
                                '<li class="ipsType_small clearfix">' +
                                    '<img class="ipsUserPhoto ipsUserPhoto_mini left" alt="User image" src="https://i78.servimg.com/u/f78/18/17/62/92/defaul10.png">' +
                                    '<div class="list_content">' +
                                        eval( oConfig.sExpression1 ) + '<br>' +
                                        '<span class="ipsType_smaller desc lighter">' + eval( oConfig.sExpression2 ) + '</span>' +
                                    '</div>' +
                                '</li>';
                        });
                        memDiv.html(sHtml);
                    }
                    jQuery('#user_inbox_link_menucontent ul.ipsList_withminiphoto').html(memDiv.html());

                    var oImgTarget = oTarget.find('.ipsType_small.clearfix');
                    oImgTarget.each(function( index ) {
                        var UserURL = jQuery(this).find('.ipsType_smaller a, .list_content a:last');

                        if (UserURL.length) {
                            UserURL = UserURL.attr('href');
                            var oImgTag = jQuery(this).find('.ipsUserPhoto');
                            var UserIMG = sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage */

                            /* If avatar alread saved, then no request member profile! */
                            if(UserIMG) {
                                jQuery(this).find('img').attr('src', UserIMG);
                            } else {
                                /* if not, then only request per session!!! */
                                jQuery.get(UserURL, function(data){
                                    var profile_img = jQuery(oConfig.sGetIMG, data).attr('src');
                                    if (profile_img !== undefined) {
                                        oImgTag.attr('src', profile_img);
                                        /* Saves the member avatar in local storage */
                                        sessionStorage.setItem(UserURL, profile_img);
                                    }
                                });
                            }
                        }
                    });
                });
            }
            oTarget
                .css({
                    'left': (oClicked.offset().left + oClicked.outerWidth()) - oTarget.outerWidth(),
                    'top': oClicked.offset().top + oClicked.outerHeight()
                })         
                .fadeIn(400);
            jQuery(document).mousedown(function() {
                if(!oTarget.is(":hover")) {
                    jQuery(document).unbind('mousedown');
                    oClicked.removeClass('menu_active');
                    oTarget.fadeOut(400);
                }
            });         
        } else {
            oClicked.removeClass('menu_active');
            oTarget.fadeOut(400);
        }
        return false;
    });
});

OBS: Nas MP só uso o JS, não necessita de nenhum CSS ou outro

Hmm... Acho que temos um problema...

Pelo que vi no código de notificações do Forumeiros, ele é robusto e assustador. Isso quer dizer que não seria algo simples adicionar a funcionalidade na barra, pois isso significaria replicar tal código.

A minha sugestão seria utilizar a barra de ferramentas padrão do Forumeiros e editar o visual dela de acordo (o que é feito aqui no FdF). Isso significaria ter que manter o logo oficial do Forumeiros na barra ou alterá-lo através de créditos.

Caso não queira isso, sinto que não serei capaz de dar apoio com a função, a não ser que alguém tenha feito uma reimplementação do código de notificações do Forumeiros que seja um pouco mais "flexível", permitindo tal aplicação na barra já existente do seu fórum.

Perdão. :C

Sem problemas.. Já imaginava kkk..

Mas, seria possível então incluir a notificação naquela barra sem a barra do forumeiros ativa?

Em teoria o senhor pode ativar a barra e nós poderíamos ocultá-la e fazer uma "transfusão" dos elementos de notificação para a sua barra. Porém, pela existência dos elementos como o logo do Forumeiros que não pode ser alterado sem a utilização de créditos, não sei se poderíamos ocultar a barra para utilizar parte da mesma sem ferir alguma regra.

Precisaria da confirmação de alguém da equipe com maior autoridade sobre o assunto.

Hm... Bacana, teria como ver isso com alguém de maior cargo por gentileza?

Recebi a aprovação dos superiores. Então peço que acione a barra de ferramentas no seu fórum para iniciarmos as alterações. ^-^

Pronto, podemos começar kkkk...
Fico feliz e desde já agradeço por todo esforço.

Precisas que eu retire a barra atual sem ser a do forumeiros?

UP

Eu tentei realizar as devidas transfusões do código da barra, mas elas não surtiram efeito. Da maneira como o Javascript dela funciona, uma vez que o código da barra 'gruda' no elemento HTML, ele deixa de funcionar se eu mover para qualquer outro lugar.

Para que consigamos criar uma caixa de notificações, terei que entender todo o processo do script de notificações para então recriá-lo, algo que não será alcançado tão cedo.

Dado aos fatos, não serei capaz de dar continuidade no processo, ficando ao seu critério dar como encerrado o tópico ou aguardar alguém que possa ter alguma solução para o caso.

Desculpa não poder ser útil. :C

Tudo bem amigo, sem problemas, mas... Quando clico nas notificações simplesmente vai para essa página, teria como fazer sei lá, com que aparecesse a página normal das minhas notificações?

https://i.imgur.com/u5QmRyv.png

O senhor diz pegar o conteúdo da caixa Opções e colocar como um "dropdown" ao clicar no ícone de notificações?

Sim, só que na verdade seria para ver as notificações, certo?

Para falar a verdade eu apenas conseguiria puxar as configurações de notificações de e-mail para o usuário definir.

Pelas informações que recebi e pude encontrar pelo código, o sistema de notificações do Forumeiros (as que aparecem diretamente no fórum) estão atreladas à barra de ferramentas. Isso quer dizer que sem a mesma, somente as configurações de notificação por e-mail são configuráveis (justamente as que são exibidas na página).

Eu queria que no máximo por exemplo.

Eu uso @ Fulano de tal para marcar uma pessoa em um tópico, e nisso aparecer, teria como?

Mesmo essa está atrelada a barra de ferramentas:



Seria a opção A etiqueta do seu nickname numa mensagem. Veja que essa é exclusiva à barra de ferramentas ainda.

Hm... Pena, estarei aguardando a sua outra alternativa.

Up

UP

Vide mensagem deixada no outro tópico.

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'