We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Add avatar class "online" if user is online | Forum

Pascal
Pascal Feb 7 '17
I try to set the class of the user avatar to online if a user is online, but nothing happens. Edited the avatar_item.html and changed the following code:

<div class="ow_avatar {if $user.isOnline}online{/if} {if !empty($data.class)} {$data.class}{/if}">

But it seems the variable "$user.isOnline" is wrong. I tried "$isUserOnline", "$data.isOnline" and so on as well.

I would like to style the frame of the avatar different if someone is online or not.
Does anyone have an idea?
The Forum post is edited by Pascal Feb 7 '17
Darryl B Leader
Darryl B Feb 7 '17
This is about as close as I could find with js. See attachment, and here is the js I tried. I put it in the body section in admin / settings / page settings.

<script>
$('.ow_user_list .ow_user_list_data').each(function() {

     if($(this).find('span.ow_live_on').length > 0){
         $(this).css("background", "red");
     }
    else{
        $(this).css("background", "blue");
      }
});
</script>

P.S. I'm not a js pro. There are different examples on the web. Stackoverflow has some good explanation. You just have to have an idea of what you are looking for.
The Forum post is edited by Darryl B Feb 7 '17
Attachments:
  js online.png (23Kb)
Pascal
Pascal Feb 8 '17
Thanks Darryl. :)

I've found a php solution for this:

Changed/added this code in /ow_system_plugins/base/views/components/users.html and assigned a new var "userOnline":

{capture assign="userOnline"}
            {if !empty($showPresenceList) && !empty($showPresenceList[$id]) && $showPresenceList[$id]}
                {if $onlineInfo}
                    {if (!empty($onlineInfo) && $onlineInfo[$id]) || empty($onlineInfo)}online{/if}
                {/if}
            {/if}
        {/capture}

        {assign var="username" value=$usernameList[$id]}

        {assign var="name" value=$displayNameList[$id]}

        {decorator name="user_list_item"
               avatar=$avatars[$id]
               username=$username
               displayName=$name
               contextMenu=$contextMenuList[$id]
               fields=$_fields
               userOnline=$userOnline
               activity=$activity
               set_class='ow_item_set3'}



and in the /ow_system_plugins/base/decorators/user_list_item.html added the variable to the class:

<div class="ow_user_list_item clearfix{if isset($data.set_class)} {$data.set_class}{/if}{$data.userOnline}"{if !empty($data.contId)} id="{$data.contId}"{/if}>


First I tried it with js too. The downside of both solutions is, it only works on the Member-List page and not on the avatars in the newsstream, groups, and so on.
Thats why I try aim directly to the avatar component. It's located here:
/ow_system_plugins/base/decorators/avatar_item.html
But a don't get any information if the user is online to this file.
The Forum post is edited by Pascal Feb 8 '17
Darryl B Leader
Darryl B Feb 8 '17
The only way I think you could do it is possibly with a plugin that binds the online status with css that applies to the ow_avatar, and some plugins have their own avatar classes; profile cover, for example, uses uh-avatar. I'm no programmer, but if you are good with php, html, and css, you may figure something out.
Pascal
Pascal Feb 9 '17
I tried to write a plugin for that but I gave up for now. :(
I don't know how to extend the avatar to add the online class.

Common it can't be so difficult to add a class to a component on the website if the user is online.
If you ask me the avatar should have this class right away because than we could see if a user is online everywhere his avatar shows up. Not only on the user list, but also on newsfeed entries and so on.

Pascal
Pascal Feb 17 '17
Does anyone have an idea how to achieve this?
Carsten
Carsten Feb 19 '17
I don't know if this helps in any way, but looking at Firebug on the members page, it says that there's a class called: ow_live_on

That's the little green dot on the right of the avatar.
Pascal
Pascal Feb 20 '17

Quote from Carsten I don't know if this helps in any way, but looking at Firebug on the members page, it says that there's a class called: ow_live_on

That's the little green dot on the right of the avatar.
Hey Carsten. Thanks for your reply. I know, but it doesn't help because it's not in the avatar element. This also applies to the member list only and not to all the other avatars on the page. I'm searching for a solution for adding the class to all avatars on the site.
But thanks a lot. :)
Carsten
Carsten Feb 21 '17
Yes, but my thought was, couldn't you combine the two classes ?

Sorry if this is rubbish, i'm new to Oxwall :)

When looking at avatar.php under ow_systemplugins/base/controllers i see an "avatarID".

Also, when i look in FireBug, both regarding "console" and "NewsFeed", it's ow_avatar that's in use.

In my head it sounds simple (but i'm more on a "hack" level when it comes to PHP), just get the "isOnline", get the corresponding "avatarID" and attach a class that does what you want it to do with the avatar :)

In some ways it has already bin done, when you look at the members page/online. You must be able to use code and something from the class used there to build you own thing, or is there something regarding Oxwall i don't understand yet ?

Pascal
Pascal Feb 21 '17
Hey Carsten!
Thanks a lot! I've got it to work!
I've modified and added some code in the avatar_service.php at line 904:

/* Custom get Online List */
       
        if ( $online )
        {
            $onlineArr = BOL_UserService::getInstance()->findOnlineStatusForUserList($userIdList);
        }

        foreach ( $userIdList as $userId )
        {
            $data[$userId]["userId"] = $userId;
           
           
                     
            if ( $src )
            {
                $data[$userId]['src'] = !empty($srcArr[$userId]) ? $srcArr[$userId] : '_AVATAR_SRC_';
            }
            if ( $url )
            {
                $data[$userId]['url'] = !empty($urlArr[$userId]) ? $urlArr[$userId] : '#_USER_URL_';
            }
            if ( $dispName )
            {
                $data[$userId]['title'] = !empty($dnArr[$userId]) ? $dnArr[$userId] : null;
            }
            if ( $role )
            {
                $data[$userId]['label'] = !empty($roleArr[$userId]) ? $roleArr[$userId]['label'] : null;
                $data[$userId]['labelColor'] = !empty($roleArr[$userId]) ? $roleArr[$userId]['custom'] : null;
            }
           
            /* Custom Avatar Online Class */
           
            if ( $online )
            {
                $data[$userId]['online'] = !empty($onlineArr[$userId]) ? $onlineArr[$userId] : null;
            }
         
        }

Than you have to add {if !empty($data.online)}online{/if} to the class in avatar_item.html

This works everywhere exept the newsfeed. But I got it to work there too.
It was a little bit harder but: Yeah! It works! :)
Carsten
Carsten Feb 21 '17
Great :)

EDIT: I can't find that avatar_item.html ?

Ahh, in "decorators" :)
The Forum post is edited by Carsten Feb 21 '17
Pascal
Pascal Feb 21 '17
Let me know, if you need help and want to modify it too. :)
Carsten
Carsten Feb 21 '17
What is it supposed to do @Pascal ?

I don't see any changes. I have my little green dot as before and nothing more. There's no changes regarding Newsfeed, Console or anywhere else from what i can see.
Pascal
Pascal Feb 21 '17
It adds the class "online" to the element "ow_avatar" if the user is online.
Then you're able to style it with css and use the avatar as an online indicator.
Pascal
Pascal Feb 21 '17
It only works for the user lists out of the box. If you want to use it in newsfeed too, you have to edit some files from the newsfeed plugin too.
Pascal
Pascal Feb 21 '17
I also added a golden frame for featured users.

Here is an archive with all modified files and a css I use.
But make a backup before you replace anything!

https://www.dropbox.com/s/w1m2sn0m03p1enw/custom%20avatars.rar?dl=0

After an update of the plugins or oxwall, the modifications could be lost.
Maybe I try to develop a plugin for this in the future.

Pascal
Pascal Feb 21 '17
Here is a screenshot what it looks like:

You can change the appearance of them with the css.

The css classes are .ow_avatar.online for online users
and .ow_avatar.online.moderator for online featured users

Carsten
Carsten Feb 22 '17
Thank you Pascal. I'll have a look at it again :)

This can actually be used for many things. It could also point out the ones you're following, when viewing the user list. And again, when looking elsewhere, user are grouped in some way, it's only the complete users list it makes sense to use it.

Featured are grouped. Friends are grouped. Bookmarked also.


Pascal
Pascal Feb 22 '17
Yes. Or for different user roles. I have no idea why something this simple isn't a part of oxwall out of the box.
Carsten
Carsten Feb 22 '17
That might be be course you have the labels you can assign to the roles to be shown on the avatar, like you see with TEAM members here in the forum. This here is just another way of doing it.

But for it to be really useful, you would need to make the admin controls for adding the colors to groups of users :)

And for it to be really great, you would need to make user controls too, so they could decide the colors they want to use :)
Pages: 1 2 »