Eclipse Community Forums: Eclipse Scout » Add Number on Menu ( for notification pupose )

Help

Home

Home » Eclipse Projects » Eclipse Scout » Add Number on Menu ( for notification pupose )

Show: Today's Messages :: Show Polls :: Message Navigator

Add Number on Menu ( for notification pupose ) [message #1831720]

Thu, 27 August 2020 13:10

Oueslati Anis

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

Attachment: notification.png
(Size: 0.64KB, Downloaded 188 times)

Report message to a moderator

Re: Add Number on Menu ( for notification pupose ) [message #1831722 is a reply to message #1831720]

Thu, 27 August 2020 13:43

Andre Wegmueller

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

Report message to a moderator

Re: Add Number on Menu ( for notification pupose ) [message #1831729 is a reply to message #1831722]

Thu, 27 August 2020 15:10

Oueslati Anis

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

Attachment: notification_2.png
(Size: 0.88KB, Downloaded 162 times)

Report message to a moderator

Re: Add Number on Menu ( for notification pupose ) [message #1831754 is a reply to message #1831729]

Fri, 28 August 2020 06:59

Andre Wegmueller

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

Report message to a moderator

Previous Topic:	Stress test on eclipse scout application
Next Topic:	PNPM - The "from" argument must be of type string

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Tue Sep 24 10:55:48 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter