Suggestions for Notification Section: Icons



  • Please consider adding an icon somewhere (near the avatar maybe) that would indicate a reply, follow or an up-vote. This would make it much easier to to rapidly scan and process information.



  • @g_bartsch Don't you see the red numbers on the Bell Icon near your avatar? Do you always log in?


  • Moderator

    @g_bartsch There is an icon near the avatar (a bell) which displays a small number showing your replies, follows and up-votes. When you click on it, it lists them out and says how long ago they happened. If you click on an item in the list it cancels the notice and takes you to the item.

    I've never checked to see if it's possible, but might you have turned off notifications in your profile?

    Edit: there are two boxes under "Watch" in your profile settings. Are these checked or not?



  • Thanks. Yes I have the bell and it's working somewhat.

    I mean the page that lists all the various notifications. On that page I'd like to see an icon representing the three types of response. An icon would be easier to scan than trying to read each line of text to see what each is.



  • @Ayespy said in Suggestions for Notification Section: Icons:

    @g_bartsch There is an icon near the avatar (a bell) which displays a small number showing your replies, follows and up-votes. When you click on it, it lists them out and says how long ago they happened. If you click on an item in the list it cancels the notice and takes you to the item.

    When I click a line under the bell is it supposed to be removed from that pop-up? Because in my case those line items don't disappear unto I chose to 'mark all read'.


  • Moderator

    @g_bartsch - The lines don't disappear from the interface. They get unmarked (black dot turns white) and are deducted from the counter on the bell until the bell is clear once again. Roughly the most recent five lines tend to be shown below the bell at a time.


  • Moderator

    Here you go:

    .notifications-list .user-img,
    .dropdown-menu .user-img {
    	margin-right: 5px;
    }
    li[data-nid^="new_post"]:before,
    li[data-nid^="upvote"]:before,
    li[data-nid^="follow"]:before,
    li[data-nid^="move"]:before {
    	font-family: "Segoe UI Emoji","Segoe UI Symbol","EmojiSymbols","NotoColorEmoji";
    	float: left;
    	width: 26px;
    	font-size: 16px;
    }
    li[data-nid^="new_post"]:before {
    	content: "\1F4DD";
    }
    li[data-nid^="upvote"]:before {
    	content: "\1F44D";
    }
    li[data-nid^="follow"]:before {
    	content: "\1F441\200D\1F5E8";
    }
    li[data-nid^="move"]:before {
    	content: "\2702";
    }
    

    You need to paste this code in Stylish, User CSS or in another, similar extension that allows adding custom CSS for websites.

    This is how it looks on my PC (Vivaldi on Windows 10):

    I'm using emoji's: Memo πŸ“, Thumbs Up πŸ‘, Eye in Speech Bubble πŸ‘β€πŸ—¨, Black Scissors βœ‚οΈ. You can choose other emojis and enter their codes (you can find them on the Emojipedia) followed by a backslash, by replacing the old codes, like this: content: "\1F44D";

    For the "new follower" status I choosed the Eye in Speech Bubble πŸ‘β€πŸ—¨ emoji, but I haven't been followed here yet, so I can't tell what is the "data-nid" parameter's value for a "new follower" notification. Somebody follow me and I will give you the full code... 😁



  • @pafflick said in Suggestions for Notification Section: Icons:

    For the "new follower" status I choosed the Eye in Speech BubbleπŸ‘πŸ—¨ emoji, but I haven't been followed here yet, so I can't tell what is the "data-nid" parameter's value for a "new follower" notification. Somebody follow me and I will give you the full code... 😁

    Thank you! It's perfect! The following icon doesn't work though. I've tried to follow you but can't see how. If it's easy I must be stupid not to see how.

    Again, you made it just as I imagined and scanning that list page is much faster. Thank you again. :smile:


  • Moderator

    @g_bartsch You need to click the green "plus" icon on my profile picture, to follow me. I just followed you, so it works.



  • @pafflick said in Suggestions for Notification Section: Icons:

    @g_bartsch You need to click the green "plus" icon on my profile picture, to follow me. I just followed you, so it works.

    Thank you. Now I got it. That green + wasn't overly intuitable though :slight_frown:. Regardless, I am following you now.

    But if some follows me I see this:
    ![http://screenpresso.com/=GI0ac](image url)


  • Moderator

    @g_bartsch I have fixed the code. Check my post again and use the new code. It should work now. πŸ˜‰



  • @pafflick said in Suggestions for Notification Section: Icons:

    @g_bartsch I have fixed the code. Check my post again and use the new code. It should work now. πŸ˜‰

    It works. Thank you!


  • Moderator

    I've improved the code a little bit (so that Windows will always show the colored emoji instead of the "old" black&white icons that it displays sometimes) and I have also added an icon for one of the moderator actions (moving topic). It looks like this:

    0_1479239780823_move.jpg

    You can question the use of scissors βœ‚ here, but you're free to choose another icon of your choice. πŸ˜‰


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.