SVG icons in NavigationButtons and IButtons

[claudiobosticco]

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

Hello, please try this test case:

isc.HLayout.create({
    membersMargin: 20,
    members: [
        isc.IButton.create({
            autoFit: true,
            title: "Accept",
            icon: "Accept"
        }),

        isc.IButton.create({
            autoFit: true,
            title: "Edit",
            icon: "Header_Trash"
        }),

        isc.IButton.create({
            autoFit: true,
            title: "Cancel",
            icon: "Cancel"
        })
    ]
});

You'll see this:



here, in particular the Header_Trash and Cancel icon seem a tad too big (actually with the Close icon it is even more noticeable).

but if I use an iconWidth/height:

isc.HLayout.create({
    membersMargin: 20,
    members: [
        isc.IButton.create({
            autoFit: true,
            title: "Accept",
            iconWidth:12,
            iconHeight:12,
            icon: "Accept"
        }),

        isc.IButton.create({
            autoFit: true,
            title: "Edit",
            iconWidth:12,
            iconHeight:12,
            icon: "Header_Trash"
        }),

        isc.IButton.create({
            autoFit: true,
            title: "Cancel",
            iconWidth:12,
            iconHeight:12,
            icon: "Cancel"
        })
    ]
});

then the Accept icon sits too low and too close to the title:



I actually noticed it while trying to add icons to the buttons of the pickerNavigationBar, at first I thought there was some problem with the autoChild NavigationButtons, but the I saw that happens also with IButtons.

Speaking of the NavigationBar buttons, it seems that che chevron_left of the navBackButton doesn't resize with different skin densities.

[Isomorphic]

hi Claudio,

The problem with the "Accept" stockIcon is that its SVG mapping specifies a size inline - size:14,14; - we'll fix this for tomorrow's builds, but you can address it yourself for testing by modifying the mapping, just removing the size:

isc.Media.modifyStockIconSrc("Accept", "sprite:svg:[SKINIMG]stockIcons.svg#check")

At that point, in your first example, you will find all 3 icons are the same size - 21px, because the default is 16 and you've got a 5px font-increase, which is how we calculate icon-increase.

The icon-sizes in your second sample will now work as you expect, sizing to 12px, but they won't scale - you'd have to set them at the skin-level before scaling happens, and we may consider changing the default size for button-icons down a bit in this skin, given your feedback.

We do also support a src-string format that extends a stockIcon, allowing you to re-specify settings on the stockIcon-src, in this case its size, on a per-use basis - but we'll need to check on that internal mechanism before we detail it.

We'll update shortly.

[claudiobosticco]

Hello, sorry for the late feedback, I see now the icons are fine, just maybe a little too big:



but for now I'm using them without setting a size.

The chevron_left of the navBackButton still doesn't resize with different skin densities, isn't it?

[Isomorphic]

Thanks Claudio - we've fixed the scaling for the icon in the nav-backButton (12px to 15 in Spacious), reduced the default iconSize in Button and IButton from 16px to 14, and made that value scale on IButton as well as Button. Your original sample code will now show these behaviors.

Please retest with tomorrow's builds, dated August 31 or later.

[claudiobosticco]

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

I see the fixes, thank you very much