RibbonButton doesn't scale vertically?

[claudiobosticco]

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

I see it's fixed in all flat skins, thank you very much

[claudiobosticco]

[cut]...note that your sample would need to use the default iconSize of 16 in the src-string, to properly test in Dense and Spacious modes.

yep, I was actually testing with the sample from post #1, and in my application I use a SVG without a size in the src-string.

[Isomorphic]

hi Claudio, we've removed that test-border from Twilight and fixed RibbonButton sizing in other Flat skins - they'll now all scale from 22 to 32, but note that your sample would need to use the default iconSize of 16 in the src-string, to properly test in Dense and Spacious modes.

Please retest with tomorrow's builds, dated July 21 or later

[claudiobosticco]

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

Hello, I just noticed that now, in Twilight, the RibbonButton (with the above test case) has a white border, I don't think it's intended to be like that:



Also, with spacious density, it's 36px tall, while in shiva it's 32px.

Also, in Obsidian, Stratus and Tahoe, it doesn't scale no more, it's always 24px tall:

[claudiobosticco]

Thank you very much for the clarification!

[Isomorphic]

hi Claudio,

Yes, that's expected - RibbonButton has an iconSize set to 16, and that scales with density to 19. But you're showing an SVG in the icon element at 20px, which will scale to 23.

The "size" attribute in src-strings is really to make an SVG *smaller* than it's container, but your code is fine - you'll just need to set RibbonButton.iconSize to at least the same as you specify in the src-string - at which point, you won't really need the size attribute in the src-string, because it will inherit the iconSize.

Note that, like other widget sizes, RibbonButton.iconSize will only be scaled if you set it globally (eg, in load_skin.js) before scaling runs.

[claudiobosticco]

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

Hello, I found that when using a specified "size" attribute in SVG string with a RibbonButton configured like this:

var spriteFile = "[SKIN]images/stockIcons.svg";

var spritePrefix = "sprite:svg:" + spriteFile;

isc.RibbonButton.create({
    showMenuButtonImage: false,
    showMenuIcon: false,
    showMenuOnClick: true,
    showButtonTitle: false,
    autoDraw: true,
    vertical: false,
    icon: spritePrefix+"#add_circle;size:20,20;"
});

the icon scales as described by this new feature: https://forums.smartclient.com/forum...733#post272733

However, when the size exceeds a certain limit, which I think is >= 18 for "Spacious" density, the icon is no longer centered.

This is with spacious density and size 20, as in the sample above:



is it expected?

[claudiobosticco]

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

I see it's fixed, thank you very much

[Isomorphic]

hi Claudio - we've fixed the scaling here when RibbonButtons are used outisde of Ribbons. They will now show at a similar size to other buttons and scale appropriately.

Please retest with a build dated July 6 or later.

[claudiobosticco]

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

Thanks, now I see it's scaling, just a note: in Spacious density it's 32px tall, just like an IButton, while in Dense density is 29px vs 24px for an IButton. Is it intended like that?

These heights are with the sample from post #1.

[Isomorphic]

hi Claudio,

You were right, we weren't scaling RibbonButtons directly - however, we were scaling RibbonGroup.rowHeight, so RibbonButtons would have scaled when used in Ribbons.

We've added regular scaling for standalone RibbonButton, likely for tomorrow's builds.

[claudiobosticco]

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

Hello, it seems that the RibbonButton doesn't scale vertically:

isc.RibbonButton.create({
    title: "title",
// showButtonTitle: false,
    autoDraw: true,
    click: "isc.say(this.title + ' button clicked');",
    vertical: false, icon: "pieces/16/star_yellow.png"
});