Botão de notificações personalizados

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

Atendido / 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
Nível 8

Masculino
Inscrito dia : 17/11/2018
Mensagens : 101
Pontos ativos : 171

https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Botão de notificações personalizados

Mensagem por pedxz 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.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6183
Pontos ativos : 7341

Atendido / 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
Nível 8

Masculino
Inscrito dia : 17/11/2018
Mensagens : 101
Pontos ativos : 171

https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Botão de notificações personalizados

Mensagem por pedxz 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.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6183
Pontos ativos : 7341

Atendido / 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
Nível 8

Masculino
Inscrito dia : 17/11/2018
Mensagens : 101
Pontos ativos : 171

https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Botão de notificações personalizados

Mensagem por pedxz 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));


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6183
Pontos ativos : 7341

Atendido / 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
Nível 8

Masculino
Inscrito dia : 17/11/2018
Mensagens : 101
Pontos ativos : 171

https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Botão de notificações personalizados

Mensagem por pedxz 19.02.21 7:42

Sorrir

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6183
Pontos ativos : 7341

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão neste fórum:
Você não pode responder aos tópicos neste fórum