Premium support for our pure JavaScript UI components


Post by jan.curmi »

Good Morning ,

How can I change the color from the task menu item please as shown in the below ?

Taksmenuitems.png
Taksmenuitems.png (25.37 KiB) Viewed 791 times

Thanks for you help.


Post by saki »

You can do it with CSS. For example:

.about-item.b-menuitem {
    color: white;
    background-color: red;
}

You can demonstrate it in https://bryntum.com/examples/gantt/taskmenu/ by adding to the code:

    features : {
        taskMenu : {
            items : {
                // Add extra menu items available on all tasks
                moveToNextDay : {
                    icon : 'b-fa b-fa-calendar',
                    text : 'Move to next day',
                    cls  : 'b-separator about-item', // <----
                    onItem({ taskRecord }) {
                        taskRecord.shift(1, 'day');
                    }
                },

plus the above css in index.html:

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Bryntum Gantt - Task context menu demo</title>
	<script src="../_shared/browser/helper.js"></script>
	<link rel="stylesheet" href="../../build/gantt.stockholm.css" id="bryntum-theme">
	<link rel="stylesheet" href="../_shared/shared.css">
	<style>
		.about-item.b-menuitem {
		background-color: red;
		color:white;
	}
	</style>
</head>

with the result of:

Screen Shot 2021-11-23 at 09.33.03.png
Screen Shot 2021-11-23 at 09.33.03.png (182.66 KiB) Viewed 787 times

Note: The approach is same in React.


Post by jan.curmi »

Does it work the same on the Task Boards ?

Thank you.


Post by saki »

I haven't tested it on Task Board but it should because the menu is a Core component. Same menu class is used for all components.


Post by jan.curmi »

I have tried to do as instructed above however the color does still remain the same.

Screenshot 2021-11-23 105301.png
Screenshot 2021-11-23 105301.png (10.11 KiB) Viewed 777 times

I think the b-menuitem on task boards has another name or something because it does not change at all even when I try to rename the cls to another class name.

Attachments
Screenshot 2021-11-23 105157.png
Screenshot 2021-11-23 105157.png (47.27 KiB) Viewed 777 times

Post by jan.curmi »

Also , I am using the dark theme. That deep orange is from the dark-theme something related to this code here :

 .b-menuitem.b-contains-focus, .b-menuitem:focus {
  outline: none;
  background-color: #e64a19;
  color: #fff;
} 

still when I change the background color and add the important it remains the same.


Post by saki »

The above css does not select the item until it has focus. I have modified task-menu example with custom style on About menu item and I'm attaching the zip.

Screen Shot 2021-11-23 at 13.48.24.png
Screen Shot 2021-11-23 at 13.48.24.png (230.36 KiB) Viewed 770 times
Attachments
task-menu.zip
(1.73 MiB) Downloaded 57 times

Post by jan.curmi »

Hey Saki,

Thank you for your help.

Managed to solve it actually, but I do have another question if you do not mind. This time when I hover onto a sub menu item the previous menu turns orange as shown below.

Screenshot 2021-12-01 155212.png
Screenshot 2021-12-01 155212.png (47.43 KiB) Viewed 696 times

The color I am trying to go for is that faded white color highlightin process name.

Kind Regards,
Jan


Post by alex.l »

Hi jan.curmi,

Hm, it should already work as expected.
You can easily find a class that you need to override by yourself inspecting DOM tree in DevTools. For menus you have to turn on "Emulate focused page" option. How to enable: https://stackoverflow.com/questions/64456886/emulate-a-focused-page-option-not-available-in-chrome-developer-tools/64456947

Also might be helpful to compare you styles with our theme CSS. If no luck, please share your CSS styles with us, we will have a look.

All the best,
Alex


Post by jan.curmi »

Hi Team,

Thank you for your support, Managed to make this work.

Kind Regards,
Jan


Post Reply