Notice

The forum is in read only mode.

Support Forum

Welcome! Support Forums have been reactivated
Welcome the Technical Support section. Help us in assisting you by providing us with a concise and descriptive elaboration of your issues. Be specific and if possible, provide us with a step-by-step instruction in replicating your problem.

Notification module display quirks

10 years 11 months ago
  • Meagan's Avatar
    Topic Author
  • Meagan
  • Offline
  • Fresh Boarder
  • Posts: 75
  • Thank you received: 8
Licenses:
JomSocial Active

ISSUE SUMMARY:
We've made some modifications to the notification module to customize the display slightly. There's 2 issues we're noticing:
When the page first opens if one of the notification items has no new activity (zero count) a 0 will display briefly and then disappear. The second issue is that we've added a background color to the notify count to try to match the way notifications appear in the jomsocial toolbar. Again when there is no new activity to display the small circle of background color still displays even though there is not content.

STEPS TO REPLICATE:
1
2
3
4
5
RESULT
EXPECTED RESULT
BROWSER

10 years 11 months ago
Licenses:

Hi,

could you please tell me that customization you did? I mean, what override files and CSS file, and any non original font icon you put?
and I need valid FTP detail.

Regards

10 years 11 months ago
  • Meagan's Avatar
    Topic Author
  • Meagan
  • Offline
  • Fresh Boarder
  • Posts: 75
  • Thank you received: 8
Licenses:
JomSocial Active

Albertus,

Here is the code of the notification module in our override folder:

<?php
/**
* @copyright (C) 2015 iJoomla, Inc. - All rights reserved.
* @license GNU General Public License, version 2 (http://www.gnu.org/licenses/gpl-2.0.html)
* @author iJoomla.com <[email protected]>
* @url https://www.jomsocial.com/license-agreement
* The PHP code portions are distributed under the GPL license. If not otherwise stated, all images, manuals, cascading style sheets, and included JavaScript *are NOT GPL, and are released under the IJOOMLA Proprietary Use License v1.0
* More info at https://www.jomsocial.com/license-agreement
*/
defined('_JEXEC') or die('Restricted access');
?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="498" height="144" viewBox="0 0 498 144" class="joms-hide">
<defs>
<g
     id="joms-icon-bullhorn"
     transform="scale(0.78125,0.78125)">
    <path
       d="M 16,0 C 7.164,0 0,7.164 0,16 0,24.836 7.164,32 16,32 24.836,32 32,24.836 32,16 32,7.164 24.836,0 16,0 Z m -2,14 c 0,-1.104 0.896,-2 2,-2 1.104,0 2,0.896 2,2 l 0,10 c 0,1.104 -0.896,2 -2,2 -1.104,0 -2,-0.896 -2,-2 l 0,-10 z m 2,-3.968 c -1.104,0 -2,-0.896 -2,-2 0,-1.104 0.896,-2 2,-2 1.104,0 2,0.896 2,2 0,1.104 -0.896,2 -2,2 z"
       id="path3383"
       inkscape:connector-curvature="0" />
  </g>
<g
     id="joms-icon-users"
     transform="matrix(0.78125,0,0,0.78125,0,0.00764318)">
    <path
       d="M 14,5 C 14,2.324 11.676,0 9,0 6.324,0 4,2.324 4,5 c 0,2.676 2.324,5 5,5 2.676,0 5,-2.324 5,-5 z m 3.5,19 C 17.5,16 13.348,12 8.75,12 4.152,12 0,16 0,24 c 0,5.48 17.5,5.48 17.5,0 z m 6,-10.11 c 2.676,0 5,-2.324 5,-5 0,-2.676 -2.324,-5 -5,-5 -2.676,0 -5,2.324 -5,5 0,2.676 2.324,5 5,5 z m -0.25,2 c -1.382,0 -2.706,0.406 -3.906,1.13 0.726,1.952 1.156,4.266 1.156,6.98 0,2.694 -1.796,4.792 -4.878,5.992 C 19.444,33.228 32,32.538 32,27.89 c 0,-8 -4.152,-12 -8.75,-12 z"
       id="path3418"
       inkscape:connector-curvature="0" />
  </g>

<g
     id="joms-icon-envelope"
     transform="matrix(0.78125,0,0,0.78125,-0.0338633,-3.2550074)">
    <path
       d="M 30,8 2,8 C 0.896,8 0,8.896 0,10 l 0,20 c 0,1.104 0.896,2 2,2 l 28,0 c 1.104,0 2,-0.896 2,-2 L 32,10 C 32,8.896 31.104,8 30,8 Z M 11.36,22.054 16.004,25.21 20.62,22.032 28.586,30 3.414,30 11.36,22.054 Z M 2,28.586 2,15.69 9.676,20.908 2,28.586 Z M 22.294,20.88 30,15.576 30,28.586 22.294,20.88 Z M 30,10 30,13.236 29.958,13.176 15.996,22.79 2,13.274 2,10 30,10 Z"
       id="path3457"
       inkscape:connector-curvature="0" />
  </g></defs>
</svg>


<?php
if( $my->isOnline() && $my->id != 0 )
{
    $inboxModel         = CFactory::getModel('inbox');
    $notifModel = CFactory::getModel('notification');
    $filter             = array();
    $filter['user_id']  = $my->id;
    $friendModel        = CFactory::getModel ( 'friends' );
    $profileid          = JRequest::getVar('userid' , 0 , 'GET');

    //CFactory::load( 'libraries' , 'toolbar' );
    $toolbar = CToolbarLibrary::getInstance();
    $newMessageCount        = $toolbar->getTotalNotifications( 'inbox' );
    $newEventInviteCount    = $toolbar->getTotalNotifications( 'events' );
    $newFriendInviteCount   = $toolbar->getTotalNotifications( 'friends' );
    $newGroupInviteCount    = $toolbar->getTotalNotifications( 'groups' );

    $myParams           =   $my->getParams();
    $newNotificationCount   = $notifModel->getNotificationCount($my->id,'0',$myParams->get('lastnotificationlist',''));
    $newEventInviteCount    = $newEventInviteCount + $newNotificationCount;

    //CFactory::load( 'helpers' , 'string');

    $config = CFactory::getConfig();
    $uri    = CRoute::_('index.php?option=com_community' , false );
    $uri    = base64_encode($uri);

    //CFactory::load('helpers' , 'string' );

    $show_global_notification   = $params->get('show_notification', 1);
    $show_friend_request    = $params->get('show_privatemsg', 1);
    $enable_private_message     = $params->get('show_request', 1);

    // IDs.
    $mainframe = JFactory::getApplication();
    $jinput = $mainframe->input;
    $my = CFactory::getUser();
    $userid = $jinput->get('userid', '', 'INT');
    $user = CFactory::getUser($userid);

    $document->addScriptDeclaration('joms_my_id = ' . $my->id . ';');
    $document->addScriptDeclaration('joms_user_id = ' . $user->id . ';');

?>

<div class="joms-notifications">
	<a href="/connect-with-our-community/activity-in-our-community.html" style="vertical-align:top;" title="Activity"><img width="25" height="25" alt="activity icon" src="/images/activity_icon.png"></a>
    <?php if ($show_global_notification) { ?>
    <a title="<?php echo JText::_('COM_COMMUNITY_NOTIFICATIONS_GLOBAL'); ?>"
            href="javascript:" onclick="joms.popup.notification.global();">
        <svg viewBox="0 0 25 25" class="joms-icon">
            <use xlink:href="#joms-icon-bullhorn"></use>
        </svg>
        <span class="joms-js--notiflabel-general"><?php echo ($newEventInviteCount) ? $newEventInviteCount : 0 ;?></span>
    </a>
    <?php } ?>
    <?php if ($show_friend_request) { ?>
    <a title="<?php echo JText::_('COM_COMMUNITY_NOTIFICATIONS_INVITE_FRIENDS'); ?>"
            href="<?php echo CRoute::_('index.php?option=com_community&view=friends&task=pending'); ?>"
            onclick="joms.popup.notification.friend(); return false;">
        <svg viewBox="0 0 25 25" class="joms-icon">
            <use xlink:href="#joms-icon-users"></use>
        </svg>
        <span class="joms-js--notiflabel-frequest"><?php echo ($newFriendInviteCount) ? $newFriendInviteCount : 0 ;?></span>
    </a>
    <?php } ?>
    <?php if ($enable_private_message) { ?>
    <a title="<?php echo JText::_('COM_COMMUNITY_NOTIFICATIONS_INBOX'); ?>"
            href="<?php echo CRoute::_('index.php?option=com_community&view=inbox'); ?>"
            onclick="joms.popup.notification.pm(); return false;">
        <svg viewBox="0 0 25 25" class="joms-icon">
            <use xlink:href="#joms-icon-envelope"></use>
        </svg>
        <span class="joms-js--notiflabel-inbox"><?php echo ($newMessageCount) ? $newMessageCount : 0 ;?></span>
    </a>
	<a href="/index.php?option=com_users&task=user.logout" title="Logout" style="vertical-align:top;"><img width="25" height="25" alt="logout" src="/images/logout_icon.png"></a>
    <?php } ?>
</div>

<?php
    }
?>

And here is the modified css rules in our template css file:
.joms-notifications {
    background: #fff none repeat scroll 0 0;
	padding:0;
	text-align:right;
	display: inline-block;
	width:auto;
}

.joms-js--notiflabel-general, .joms-js--notiflabel-inbox {
	font-size:9px;
}

div.joms-notifications a span.joms-js--notiflabel-general, div.joms-notifications a span.joms-js--notiflabel-inbox, div.joms-notifications a span.joms-js--notiflabel-frequest {
	background: #c06 none repeat scroll 0 0;
    border-radius: 50%;
    color: white;
/*	left: 8.65248px;*/
    line-height: 9px;
/*    min-width: 12px;*/
    padding: 3px;
    position: absolute;
    text-align: center;
/*    top: -5.34752px;*/
    word-break: normal;
	margin-left:-6px;
}

.joms-notifications a {
	display: inline-block;
	padding: 0 5px;
}

I will update the ftp access in the thread.

10 years 11 months ago
Licenses:

Hi,

please check it. made the changes at:
/templates/bsmart2013/html/mod_community_notifications/default.php

Regards

10 years 11 months ago
  • Meagan's Avatar
    Topic Author
  • Meagan
  • Offline
  • Fresh Boarder
  • Posts: 75
  • Thank you received: 8
Licenses:
JomSocial Active

Hi Albertus,

This looks perfect. Thank you. Can you explain the difference between the new echo statement and the old one?

Thank You.

10 years 11 months ago
Licenses:

Hi,

if you compare it with the original file, I made customize at "counter" section.
prev code

<span class="joms-js--notiflabel-general"><?php echo ($newEventInviteCount) ? $newEventInviteCount : 0 ;?></span>
I changing it to
<?php echo ($newEventInviteCount) ? '<span class="joms-js--notiflabel-general">'.$newEventInviteCount.'</span>': '' ;?>

Regards

Moderators: Piotr Garasiński
Powered by Kunena Forum

Join 180,000 websites creating Amazing communities

JomSocial is the most complete, easy-to-use addon that turns Joomla CMS into a
full -fledged, social networking site

TRY NOW BUY NOW