Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » Add Number on Menu ( for notification pupose )
Add Number on Menu ( for notification pupose ) [message #1831720] Thu, 27 August 2020 13:10 Go to next message
Oueslati Anis is currently offline Oueslati AnisFriend
Messages: 134
Registered: June 2014
Location: Paris
Senior Member
Hi all,
I created a menu on witch I would like to add a notification like the image attached

index.php/fa/38824/0/

Is there any way I can do this ?

Kind Regards
Re: Add Number on Menu ( for notification pupose ) [message #1831722 is a reply to message #1831720] Thu, 27 August 2020 13:43 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...
Senior Member
If the numbers shown in the red bubble are finite (like 1 to 9) you could simply work with CSS classes like "notification-[1-9]" and use setCssClass() on the menu instance. Then add the CSS styles required to render the bubble, use the :before/:after pseudo selectors and the content CSS property to add the numbers to the DOM. In your Java code you could write:

notificationMenu.setCssClass("notification-9-plus");

If you must render any number, you should implement your own sub-class of AbstractMenu / JsonMenu / Menu.js, add an additional Property "notificationCount" and implement the appropriate render() function in the Menu.js widget, also add the required CSS styles. In your Java code you could write:

notificationMenu.setNotificationCount(11);

Hope that gives you an idea how to fulfill this requirement. Cheers,
André



Eclipse Scout Homepage | Documentation | GitHub
Re: Add Number on Menu ( for notification pupose ) [message #1831729 is a reply to message #1831722] Thu, 27 August 2020 15:10 Go to previous messageGo to next message
Oueslati Anis is currently offline Oueslati AnisFriend
Messages: 134
Registered: June 2014
Location: Paris
Senior Member
Hello,
Thanks, I am goind to try with the static number first

I created this css style

.badge {
background-color: #fa3e3e;
border-radius: 2px;
color: white;
padding: 1px 3px;
font-size: 10px;
position: absolute;
top: 0;
right: 0;
}

index.php/fa/38825/0/

but what it is doing is making the hole menu to be red as the method set style is used for the hole menu and can not add a bubble.
do you have a snippet how to make a bubble instead of making all the menu to red.
Kind Regards
Re: Add Number on Menu ( for notification pupose ) [message #1831754 is a reply to message #1831729] Fri, 28 August 2020 06:59 Go to previous message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...
Senior Member
No, sorry - I don't have an example ready for that. But since this is a plain CSS/HTML issue you should find a lot of examples in the web.
But as a starting point: as I said before - to create the bubble you should use :before/:after to add an additional DOM element via CSS.
https://codepen.io/ronnyhaase/pen/pgYxQB

Cheers,
André


Eclipse Scout Homepage | Documentation | GitHub
Previous Topic:Stress test on eclipse scout application
Next Topic:PNPM - The "from" argument must be of type string
Goto Forum:
  


Current Time: Sat Nov 09 03:57:58 GMT 2024

Powered by FUDForum. Page generated in 0.03097 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top