[claudiobosticco]

If we understand correctly, you are trying to use the 'menu' parameter of the click handler. Is this correct? That parameter does represent the actual menu holding the MenuItem, if any, but as you note, that's not the AdaptiveMenu. Instead, call this.getAdaptiveMenu() method in your handler to always return the adaptiveMenu instance whether it is shown in a button or a MenuItem.

thanks for the hint, maybe a note in the documentation would help as I thought I could call it just with item.getAdaptiveMenu()

These properties are not supported outside of MenuItems right now but we are considering supporting them in the future.

thanks for considering

[Isomorphic]

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?

If we understand correctly, you are trying to use the 'menu' parameter of the click handler. Is this correct? That parameter does represent the actual menu holding the MenuItem, if any, but as you note, that's not the AdaptiveMenu. Instead, call this.getAdaptiveMenu() method in your handler to always return the adaptiveMenu instance whether it is shown in a button or a MenuItem.

Regarding the enableIf, dynamicTitle and dynamicIcon, are they supposed to work only when the MenuItems aren't buttons?

These properties are not supported outside of MenuItems right now but we are considering supporting them in the future.

[claudiobosticco]

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

Hello, any news about this?

[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

[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]

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]

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]

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]

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

[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]

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

[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.

[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]

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

[Isomorphic]

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