[claudiobosticco]

Hello, while testing this really cool feature:

FInally, on SVG being used when you specify pngs - it's a framework feature, although currently undoc'd as we mentioned - known framework image paths are listed internally as stockIcon objects, with a name and a current src - you can modify the current src for these stockIcons by name, to any arbitrary src string - later, when any code requests one of those known file-paths, the framework will render whatever src is currently assigned to the associated stockIcon, whether it's the original file from disk or some replacement, like a sprite:svg string. In this way, you can replace framework icons with just a map of names to new src strings, at runtime if you want to, rather than hacking through load_skin.js. You can also load known stockIcons by just their names in src strings, like src: "Edit" or src: "Chevron_Up".

with this test case ("Edit" icon):

isc.IButton.create({
           ID:"stretchButton",
            title: "Stretch Button",
            width: 150,
            icon: "Edit"
        })
isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "Edit"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "[SAMPLE]icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "[SAMPLE]icons/16/disk_blue.png"},
        {title: "Save As", icon: "[SAMPLE]icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "[SAMPLE]icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "[SAMPLE]icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "[SAMPLE]icons/16/printer3.png"}
    ]
});

var menuButton = isc.MenuButton.create({
    ID: "menuButton",
    autoDraw: false,
    title: "File",
    width: 100,
    menu: menu
});

isc.ToolStripButton.create({
    ID: "printButton",
    icon: "Edit",
    title: "Print"

});

isc.ToolStrip.create({
    width: "100%", membersMargin:20,
    members: [menuButton, stretchButton, printButton]
});

I noticed that only in the ToolStripButton svgs scale with the font/controls resize, in Buttons and Menus they've got always the same 16px size.

[Isomorphic]

Good spot, thanks - we'll fix the scaling.

If you're testing this and wanted to try modifying a src, you can call isc.Media.modifyStockIconSrc("Edit", "some other src") - but bear in mind that this mechanism is internal and subject, even likely, to change by the time it gets documented.

[claudiobosticco]

there's also this visual glitch when hovering a MenuButton

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

I see this is fixed, thank you very much

[claudiobosticco]

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

then there are some svg icons which seem off size.

The "minus" (stockIcons.svg#remove) in the treeGrid seems too big:

now those are fine, thanks!

[Isomorphic]

hi Claudio,

On post #16, we've fixed icon-scaling in Buttons and Menus - both of these were widget-level issues, their iconWidth/Height attributes weren't included for scaling for any image-type.

We've also made changes that cause sizes specified directly in an SVG string, like "size:12,12;", to also be scaled. You would specify sizes like that for better control independent of the container-size - but those icons would never scale, because scaling is applied to widget-attributes like iconWidth/Height, and setting "size:w,h" in a src string side-steps those scaled values.

Auto-scaling specified "size" attributes in SVG strings seems like the best default behavior, since other SVGs will be scaled and SVG can scale without loss of quality. But, you can disable it by setting "scale:false;" in your src string if you want to - for example, we've set scale:false on the ends of scrollbars, which don't get wider with density, so the icons probably shouldn't scale up either.

[claudiobosticco]

Wow, these sounds as great enhancements, in which build will I find them?

[claudiobosticco]

Hello, another note about this test case, in Shiva I see a difference between the MenuButton and the IButton which I don't see in other skins:



not sure what it's causing this in the CSS

[Isomorphic]

Sorry, what is the difference you are seeing there? The background opacity?

Did you try pressing Tab to change the selected button?

[claudiobosticco]

Hello, yes, I mean the background opacity.

This is after clicking "Try it":

Pressing Tab doesn't make a difference. Neither clicking the "Stretch Button".

This is while hovering the "Stretch Button":

[Isomorphic]

On your question from #21, you can try out the changes mentioned there in the next build, dated June 29 or later. We also added a FormItem.iconBaseStyle attribute, which is now set to "icon" in Shiva - so arbitrary SVG icons, without a cssClass specified, will now get the color from the skin's "icon" class in FormItems, rather than inheriting the formItem's text-color, which is a bit darker than we want for icons in this skin.

We'll take a look at the opacity difference among the buttons from #24 and get back to you.

[Isomorphic]

hi Claudio,

For the initial report about right-aligned SectionHeader open/close icons, we agree that icons on the right feel out of place when there are other icons or inlined components there - so, we've switched the icons to the left in Obsidian and Twilight, and made them lighter and more visible in Twilight.

The issue with disabled opacity from #24 is being looked into.

[claudiobosticco]

[cut]
for example, we've set scale:false on the ends of scrollbars, which don't get wider with density, so the icons probably shouldn't scale up either.

Hello, maybe related to this, there's a problem with the arrow for the sorterButton (this is from fetchOperationFS sample):


this is with Spacious density, as you may see the arrow is clipped on its right.

Also, is it normal that I don't see the separator between the "In Stock" and "Next Shipment" column?

[claudiobosticco]

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

hi Claudio,

For the initial report about right-aligned SectionHeader open/close icons, we agree that icons on the right feel out of place when there are other icons or inlined components there - so, we've switched the icons to the left in Obsidian and Twilight, and made them lighter and more visible in Twilight.

much better!

The issue with disabled opacity from #24 is being looked into.

I see it's fixed, thank you very much

[claudiobosticco]

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

hi Claudio,

On post #16, we've fixed icon-scaling in Buttons and Menus - both of these were widget-level issues, their iconWidth/Height attributes weren't included for scaling for any image-type.

We've also made changes that cause sizes specified directly in an SVG string, like "size:12,12;", to also be scaled. You would specify sizes like that for better control independent of the container-size - but those icons would never scale, because scaling is applied to widget-attributes like iconWidth/Height, and setting "size:w,h" in a src string side-steps those scaled values.

Auto-scaling specified "size" attributes in SVG strings seems like the best default behavior, since other SVGs will be scaled and SVG can scale without loss of quality. But, you can disable it by setting "scale:false;" in your src string if you want to - for example, we've set scale:false on the ends of scrollbars, which don't get wider with density, so the icons probably shouldn't scale up either.

I see the icon-scaling issue in Buttons and Menus is fixed (and I also like the iconBaseStyle color), and I also see that the sizes specified in the SVG string are scaling.

[Isomorphic]

A partial update - the issue with the sorterButton being clipped is addressed for today's builds - it's now the proper size, not clipped and the right color.

The other issue where there's no separator between the last two fields - no, that's not normal and we'll update again here when it's been fixed, along with the opacity issue from #24.