Botão de notificações personalizados

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Botão de notificações personalizados

Mensagem por Mirotic 16.02.21 18:22

Detalhes da questão


Endereço do fórum: https://multiversoprime.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Coé rapaziada! me tirem uma dúvida por gentileza.

Há alguma forma de criar uma novo botão de notificações (aquele que fica na barra de ferramentas) para adicionar no corpo do fórum?
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por tikky 16.02.21 20:18

Olá  @Mirotic,

O senhor pode usar o seguinte tutorial: "Personalizar a listagem de notificações". Na linha 27 (.insertAfter('#fa_notifications') ) é onde o ícone será criado #fa_notifications basta alterar o atributo.


Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por Mirotic 16.02.21 20:46

Opa, não funcionou amigão! O que eu fiz foi, criar o jscript do tutorial do link e na páginas eu criei uma div id="#fa_notifications"
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por tikky 16.02.21 20:51

Mirotic escreveu:na páginas eu criei uma div id="#fa_notifications"
Correto! Não funcionou porque não é possível haver mais que um ID por página, ou seja, este ID já existe na barra de ferramentas. No seu fórum onde o senhor deseja criar este botão de notificações? O senhor tem alguma conta teste no seu fórum?

Veja que é necessário ativar a barra de ferramentas para que este tutorial funcione.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por Mirotic 16.02.21 23:15

Sim, tenho uma conta de teste

Login: Testador
Senha: 123456terra


Eu não tenho a barra de ferramentas ativa em meu fórum.

Obs, foi feito a alteração do endereço do fórum: https://terra-616.forumeiros.com/
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por tikky 17.02.21 1:29

Ative a barra de ferramentas e altere o seu código para:
Código:
/**
        *! Modificação nas notificações.
        *
        *  @author Luiz~
        *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
        *  @licence MIT
        */
        (function ($) {
          'use strict';
       
          var config = {
            max: 7,
            error: [
              'Houve um erro ao tentar carregar as notificações.',
              'Caso o problema continue, contate o suporte técnico.'
            ].join('\n')
          };
       
          $(window).on('load', function () {
       
            var $faNotifyTrigger = $('<a>', {
              href: 'javascript:void(0)',
              id: 'fa-custom-notification-trigger',
              html: '<span class="pmlist-qtt">0</span>',
              class: 'fa fa-bell'
            })
              .insertAfter('.mainmenu[href^="/privmsg?folder=inbox"]')
                .on('click', function (event) {
                  event.stopPropagation();
                  var $faOffset = $faNotifyTrigger.offset();
                 
                  $faNotifyContent
                    .toggleClass('hidden');
                 
                  $faNotifyContent
                    .css({
                      'top': $faOffset.top,
                      'left': $faOffset.left + 50                 
                      });                 
                })
            ;
           
            $('#fa-custom-notification-trigger')
              .wrap('<li></li>')
              .css('margin-top', '1.5rem');
       
            $(document).on('click', function () {
              if ($('.fa-notify-wrapper').is('.hidden')) {
                return;
              }
       
              $('.fa-notify-wrapper').toggleClass('hidden');
            });
       
            var $faNotifyContent = $([
              '<div class="fa-notify-wrapper hidden">',
              '  <header class="fa-notify-header">',
              '    <h4>Notificações</h4>',
              '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver todas e configurações</a>',
              '  </header>',
              '  <div class="fa-notify-inner">',
              '    <div class="fa-notify-list">',
              '      <span class="fa-notify-loading">Obtendo...</span>',
              '    </div>',
              '    <div class="fa-notify-date">',
              '    </div>',
              '  </div>lala',
              '</div>',
            ].join('\n'))
              .appendTo('body')
                .on('click', function (event) {
                  event.stopPropagation();
                })
            ;
       
            var cookiedPmlistCount = my_getcookie('fa_mplist_count');
            if (cookiedPmlistCount) {
              $faNotifyTrigger
                .find('span')
                  .text(cookiedPmlistCount)
              ;
            }
       
            $.get('/profile', {
              mode: 'editprofile',
              page_profil: 'notifications'
            })
              .done(function (context) {
       
                var $wrap = $('[name="notif_list"]', context);
                var $item = $wrap.find('table tr td:first-child');
       
                $item.each(function () {
       
                  var $this = $(this);
                  var $row = $(this).parent('tr');
       
                  var text = $this.html();
       
                  $('.fa-notify-loading').hide();
       
                  if ($row.index() < config.max) {
                    $faNotifyContent
                      .find('.fa-notify-list')
                        .append([
                          '<div class="notify-item">',
                          '  ' + text,
                          '</div>'
                        ].join('\n'))
                    ;
                  }
       
                  var notifyCount = $faNotifyContent
                    .find('.fa-notify-list .notify-item')
                      .length
                  ;
       
                  my_setcookie('fa_mplist_count', notifyCount);
                  var cookiedPmlistCount = my_getcookie('fa_mplist_count');
       
                  $faNotifyTrigger
                    .find('span')
                      .text(cookiedPmlistCount)
                  ;
       
                });
       
              })
              .fail(function () {
                console.warn(config.error);
              })
            ;
       
            var styles = [
              '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
              '',
              '.hidden,',
              'html body div #fa_notifications {',
              '  opacity: 0!important;',
              '  pointer-events: none!important;',
              '}',
              'a#fa_welcome {',
              '  margin-right: 25px;',
              '}',
              '',
              '#fa_toolbar, #fa_hide, #fa_show, #fa_toolbar_hidden {',
              '  display: none !important;',
              '}',
              '',
              'a#fa-custom-notification-trigger {',
            /* ' color: #666!important;',
              '  background-color: #fff;',
              '  font-size: 17px;',
              '  margin-top: 3px;',
              '  margin-left: 19px;',
              '  border-radius: 3px;',
              '  padding: 2px;',
              '  right: 64px;',
              '  top: 50%;',
              '  transform: translateY(-70%);',
              '  position: absolute;',*/
              '}',
              '',
              'a#fa-custom-notification-trigger span {',
              '  position: absolute;',
              '  background-color: #e54732;',
              '  color: #fff;',
              '  font-size: 10px;',
              '  font-family: Arial, sans-serif;',
              '  padding: 1px 3.5px;',
              '  line-height: 11px;',
              '  border-radius: 999px;',
              '}',
              '',
              'a#fa-custom-notification-trigger:hover {',
              '  text-decoration: none;',
              '  background-color: #39c;',
              '  color: #fff!important;',
              '}',
              '',
              '.fa-notify-wrapper {',
              '  position: fixed;',
              /*'  top: 57px;',*/
              '  z-index: 9999;',
            /*'  right: 50px;',*/
              '  background-color: #fff;',
              '  border: solid 1px #ddd;',
              '  border-radius: 3px;',
              '  padding: 20px 13px;',
              '  width: 465px;',
              '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
              '  font-size: 13px;',
              '  box-shadow: inset 0px -15px #ddd;',
              '}',
              '',
              '.fa-notify-wrapper,',
              '.fa-notify-wrapper * {',
              '  box-sizing: border-box;',
              '}',
              '',
              '.fa-notify-wrapper::before {',
            /* '  content: "";',
              '  position: absolute;',
              '  top: -11px;',
              '  left: 13px;',
              '  width: 20px;',
              '  height: 20px;',
              '  background-color: #ffffff;',
              '  z-index: 9999;',
              '  transform: rotate(45deg);',
              '  border-radius: 0 0 99px 0;',
              '  border: solid 1px #ddd;',
              '  border-bottom: none;',
              '  border-right: none;',*/
              '}',
              '',
              '.fa-notify-wrapper header h4 {',
              '  color: #666;',
              '  font-weight: 600;',
              '  font-size: 21px;',
              '  margin-top: 0px;',
              '  margin-bottom: 5px;',
              '  display: table;',
              '}',
              '',
              '.fa-notify-wrapper header a {',
              '  position: absolute;',
              '  bottom: 5px;',
              '  right: 5px;',
              '}',
              '',
              '.fa-notify-wrapper header {',
              '  display: block;',
              '  position: relative;',
              '  border-bottom: solid 1px #ddd;',
              '  margin-bottom: 8px;',
              '}',
              '',
              '.fa-notify-list {',
              '  counter-reset: section;',
              '}',
              '',
              '.notify-item {',
              '  margin-bottom: 15px;',
              '}',
              '',
              '.notify-item::before {',
              '  counter-increment: section;',
              '  content: counter(section);',
              '  background-color: #ddd;',
              '  border-radius: 10px;',
              '  padding: 1.5px 7px;',
              '  color: #666666;',
              '  margin-right: 4px;',
              '}'
            ].join('\n');
       
            $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
       
          });
        }(jQuery));
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por Mirotic 19.02.21 1:53

Opa, refiz e ainda não consegui. Acho que vou tentar outro modo, kkkk, mover o botão da barra de tarefas e esconder a original.

Edit: aeee, agora achei o ícone kkkkkkk, não era bem o que eu queria mas já é uma grande ajuda, aqui eu já consigo fazer o que eu quero. Obrigado!

Resolvido!
Mirotic

Mirotic
***

Membro desde : 17/11/2018
Mensagens : 150
Pontos : 262

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão de notificações personalizados

Mensagem por tikky 19.02.21 7:42

Sorrir

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos