[claudiobosticco]

Hello, any news on this issue?

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-09-20/AllModules Development Only (built 2024-09-20)

Hello, I just noticed that, in Shiva skin, the menuButtonIcon in the latest 13.1 is a white png:

[claudiobosticco]

actually the problem is not limited to the menuButton of the AdaptiveMenu, this is the fullMenu sample:

[Isomorphic]

Hi Claudio, we are reproducing the issues showing in your latest sample. We will update here when we have fix in place.

[Isomorphic]

Please retest your example in #29 with today's 13.1 build (or later) and let us know how it goes.

[claudiobosticco]

I've just tested it, and I can say it seems almost perfect.

I really like this component, and I truly believe it deserves more samples.

Regarding the "almost perfect" part, I recorded a video to demonstrate the issue I found.

I ran this test case in the online showcase from the browser console (Firefox on macOS):

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 300,
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bobb"}
        },
        {
            title: "Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bobb"}
        },
        {
            title: "Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID:"testWindow",
    title: isc.version,
    height: 270,
    width: "100%",
    canDragResize: true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip]
}).show()

As you can see in the video https://www.youtube.com/watch?v=IzYk6tguaeU

1. I first resize the browser window.
2. Then I resize the Window component.
3. After a second resize of the Window, a "Disabled" menu item becomes enabled.

I'm not sure if it's necessary to interact with both the component Window and the browser window, but it seems at least easier to reproduce the issue this way.

[Isomorphic]

Thanks again for the clear demonstration of the issue. It appears that when an item shifts from inline to a menu item the rule state, from enableWhen, isn't transferred once the menu is created. We'll take a look and report back.

[Isomorphic]

This last issue has been fixed and will be available in 13.1 builds starting on Sept 28.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-09-29/AllModules Development Only (built 2024-09-29)

Hello, I can confirm it's fixed, thank you very much!

I've still got this question:

another question about getAdaptiveMenu (): I see it returns correctly the "adaptiveMenuID" when the item is a ToolStripButton, but when it's a MenuItem, in the handlers there's 'menu' which actually is "adaptiveMenuID_menu", so I still have to use menu.creator. Is it intended to work like this?

And please let me know if you'll make some changes here:

Hi Claudio
- We're still reviewing enableIf, dynamicTitle and dynamicItem and will keep you posted.

[Isomorphic]

hi Claudio - thanks for the reminder, we'll revisit the remaining issues and get back to you.

[claudiobosticco]

Another question: in normal MenuItems, you can use disabledIcon, and I think it could possibly work with AdaptiveMenuItem as well.
However, using SVG icons, and given that when the item is rendered as a ToolStripButton, the icon already changes appearance when disabled, wouldn't it be possible to make it "just work" for AdaptiveMenuItems too?

[Isomorphic]

Just to clarify, you're saying that when an AdaptiveMenuItem becomes disabled, it does use its specified disabled appearance as expected. However, that disabled appearance is based on the system for stateful SVG icons, whereas in normal MenuItems, you are allowed to specify a separate disabledIcon as a separate property, and you're hoping to see that supported for AdaptiveMenuItem as well.

All correct?

[claudiobosticco]

After further testing with SVG icons, I noticed that the disabledIcon works for AdaptiveMenuItems, but only when they are rendered as MenuItems.

When rendered as (disabled) ToolStripButtons, the (disabled) icon takes its color from the iconDisabled style.

I think it would be great if it could behave in the latter way also when the AdaptiveMenuItems are rendered as (disabled) MenuItems, so I wouldn’t need to use disabledIcon at all, as the icon would inherit its color from the iconDisabled style.

[Isomorphic]

hi Claudio - the disabled color for SVG menu-icons should have been working as you want it to, but some CSS was in the wrong order - the disabled color was correctly set and then clobbered immediately afterward.

As of today's builds, dated October 20, you should find disabled SVG menu-icons are styled correctly via .menuIconFieldDisabled, which inherits its color from .iconDisabled and can be changed in the Skin Editor.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-10-26/AllModules Development Only (built 2024-10-26)

I see it's fixed, thank you very much