CodenameOne icon indicating copy to clipboard operation
CodenameOne copied to clipboard

Tabs material icons do not change color together with the text on the tabs

Open ThomasH99 opened this issue 3 years ago • 6 comments

Describe the bug Tabs material icons do not change color together with the text on the tabs. Bug report created as suggested by Shai on Reddit.

To Reproduce Compile and run this code on the simulator. When clicking a tab the tab text changes color but not the icon.

Form hi = new Form("Test tabs w material icons") ;
Tabs tabs = new Tabs();
//TAB with materialIcon
tabs.addTab("MatIcn", FontImage.MATERIAL_10MP, 10,new Button("Tab w material icon"));
//TAB with Image
Style style = new Button().getStyle();
Style selectedStyle = new Button().getSelectedStyle();
Image icon = FontImage.createMaterial(FontImage.MATERIAL_10MP, style);
Image iconSel = FontImage.createMaterial(FontImage.MATERIAL_10MP, selectedStyle);
tabs.addTab("ImgIcn", icon,new Button("Tab w Image icon"));
tabs.setTabSelectedIcon(1, iconSel);
hi.add(tabs);
hi.show();

Expected behavior Icons should change to the same color as text (as defined by the UIID "Tabs").

ThomasH99 avatar Apr 13 '22 19:04 ThomasH99

I think I see what I missed here...

The UIID used for the individual tab is Tab not Tabs. I think this should work just fine with that based on the code.

shai-almog avatar Apr 17 '22 10:04 shai-almog

Thanks for looking at this. I don't understand your comment - should something be changed in the test code or did you identify the error in CN1?

ThomasH99 avatar Apr 17 '22 16:04 ThomasH99

The color of the current tab is defined when you style the Pressed version of Tab not Tabs and not Selected. Did you run your test case after changing those?

shai-almog avatar Apr 18 '22 01:04 shai-almog

Hi ThomasH99,

I just started learning the API a few weeks ago and I'm no expert but I was able to set the color for each icon using CSS without problems.

I set the style with the following lines of code. Style s1 = UIManager.getInstance().getComponentStyle("tabstyle");
Style s2 = UIManager.getInstance().getComponentStyle("tabstyle2");

image

image

AnthonyRivers avatar Apr 18 '22 04:04 AnthonyRivers

@shai-almog, before submitting the issue, I had tried both with and without styling, in both cases I have the same issue: only the text changes color, while the icon color stays the same. Did you run the example? I ask because I compile with a local version of CN1 sources which has not been updated for some weeks, so if there was a change was made recently I may not have it.

@AnthonyRivers thanks for your input. I think your approach of creating the icon images myself can be a work-around. However, what I expected is that when using material icons directly (as in the lines:

//TAB with materialIcon 
tabs.addTab("MatIcn", FontImage.MATERIAL_10MP, 10, new Button("Tab w material icon"));

) that the icon color should change automatically like it does for the text.

ThomasH99 avatar Apr 18 '22 17:04 ThomasH99

Any update on this? Seems to be a bug. I've fixed the issue for now with the work-around shown by Anthony, but the code is ugly and if it is a bug in CN1 it seems worth fixing.

ThomasH99 avatar Apr 21 '22 20:04 ThomasH99