[claudiobosticco]

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

I see it's fixed, thank you very much.

[Isomorphic]

hi Claudio - the issue from post #9 has been addressed for tomorrow's builds, dated July 27.

Now, boolean LG fields will show regular, colored checkbox-icons if canEdit and canToggle are both true - otherwise, they'll show disabled checkboxes. For the record, we think the disabled checkboxes are too light and are difficult to see, so we're going to make them a little darker.

[claudiobosticco]

Wow, I didn't realize this, very nice :)

[Isomorphic]

Yes, you should be able to change the icon-colors already in the Skin Editor - the icon-style is stateful, so there are a few colors you can configure. The "icon" class is for icons being shown on the skin's background color, there's a headerIcon class for colors for icons in headers like Windows.

[claudiobosticco]

Hello, I've briefly tested the new feature and it's pretty cool!

The new icon color seems a good match for the Shiva green.
Actually I'll be forced to change that green, so maybe I'll be interested in how to change the icon color too. Is it something on your roadmap for the skinEditor in 13.1? Is it something doable with some method in the Media class?

[Isomorphic]

Following up - you should find everything discussed here in today's builds, dated July 13 and later.

Additionally, you can now call isc.Media.useMedia(variant) without Shiva first loading - in other words, it will work in any skin, even really old ones like BlackOps, but there are some provisos as things stand right now, 3 specifically:

1) icons in the grid-menu will work as expected in any skin, because those icons are all .png in all skins, and the "known" stockIcon base-URLs are all .png - but in pre-Enterprise, many icons are .gif and those icons won't map

2) as you know from these recent threads, a lot of new settings/config-changes have been made for Shiva to properly size, style and scale icons in various widgets and use-cases, where those features didn't exist before - those settings aren't in the other skins, in part because we purposely didn't auto-size many icons before, because other image-types don't scale with clarity - so some icons won't be properly styled/sized/scaled without load_skin tweaks

3) in a Flat skin like Twilight, almost all icons will map as expected - but anywhere it's load_skin overrides a src from the known file-name, those icons won't map - this is done in cases where we use a .png sprite via a CSS class, for example - again, just a case of load_skin tweaks for other Flat series skins, more indepth ones for Enterprise and older

Let us know what you think of the icon-color - it turns out, the original icon-color was actually vaguely blue and it became obvious and jarring to see when the icons were heavier or filled - so we made it vaguely green instead!

[Isomorphic]

Note that today's builds are now available - however, there is a bug in this new useMedia() support - a regex has been broken by obfuscation, so the variant-strings aren't being detected. We'll address it for tomorrow's builds.

In the meantime, if you really want to try it out, you can use the definitely internal and temporary method isc.Media.changeSVGStockIconSource(variant). Note that 5 icon mappings for missing MenuItem images in ListGrid menus were added this morning but didn't make the build - so you'll see a couple of icons that only show up in 400 Rounded - those are in the other variants for tomorrow's builds, along with the fix for Media.useMedia()

[Isomorphic]

hi Blama - yes, it isn't supported until today's builds, dated July 12 and later

[Blama]

Hi Isomorphic,

I tried this here (SNAPSHOT_v13.1d_2024-07-10) and I'm getting this error in the Developer Console Log:

isc.Media.useMedia("ms_400_rounded")

11:31:40.754:TMR0:WARN:Log:TypeError: isc.Media.iconSets[isc.Media.iconSet] is undefined
Stack from error.stack:
    [c]Media.useMedia()
    unnamed()
    [c]Class.evaluate()
    [c]Class.evalWithVars()
    [c]Log.evaluate()
    [c]Class.evaluate()
    DebugTarget.evalJSWithDevConsoleVars()
    call()
    handlePacket()
    packetReceived()
    receive()
    [c]Class.fireCallback()
    Timer._fireTimeout()
    Timer.setTimeout/_7<()

Best regards
Blama

[Isomorphic]

hi Claudio - you're right about the checkbox-icons in LG boolean fields - we'll fix that and let you know.

On switching to different icon styles and weights, you can do that now with today's builds, dated July 12 and later - this does remain undocumented functionality and the actual function calls or parameters might change before its finalized.

Run a Showcase grid sample with a complex header-menu, perhaps this one, and right click a field-header. In the browser console, you can now switch media immediately by calling isc.Media.useMedia(variant) - variants are in the format "ms_100_rounded" and "ms_100_rounded_filled", where the "ms" stands for Google's Material-Symbols, and the weight-part can be from 100-700.

For example:

// lightest weight, rounded-outline
isc.Media.useMedia("ms_100_rounded")

or

// heaviest weight, filled
isc.Media.useMedia("ms_700_rounded_filled")

or

// the default weight and style for Shiva
isc.Media.useMedia("ms_400_rounded")

Right now, these calls must be made after Shiva is loaded.

You can also permanently use a certain set of stockIcons by copying the variant from the "stockIconSets" dir in the "helpers" dir and renaming it to stockIcons.svg in your project. This approach shouldn't change.

[claudiobosticco]

hi Claudio,

We've switched Shiva from weight 300, as seen in your screenshot, to weight 400 in the same style (Rounded) - you'll see that change in tomorrow's builds, dated July 9 and later.

Thanks, I see it and I do feel that could be the perfect match with the Roboto-Light-Vivid

We're not sure the icons look good at higher weights, but we'll provide the stockIcon subsets of the Rounded and Filled Material-Symbols variants of all weights 100-700, and you can try them out by replacing stockIcons.svg in your project. We'll include them in the Skin Editor dir this week.

thanks, I'll try them with the Roboto Regular

Finally, we also fixed the colors for the checkboxes in the last grid-field in your images - the inline checkboxes should appear disabled in normal boolean-fields (not red or black).

thanks, just a doubt: is it correct that they appear disabled also with canEdit: true which enables toggling them?

[Isomorphic]

hi Claudio,

We've switched Shiva from weight 300, as seen in your screenshot, to weight 400 in the same style (Rounded) - you'll see that change in tomorrow's builds, dated July 9 and later.

We're not sure the icons look good at higher weights, but we'll provide the stockIcon subsets of the Rounded and Filled Material-Symbols variants of all weights 100-700, and you can try them out by replacing stockIcons.svg in your project. We'll include them in the Skin Editor dir this week.

Finally, we also fixed the colors for the checkboxes in the last grid-field in your images - the inline checkboxes should appear disabled in normal boolean-fields (not red or black).

[claudiobosticco]

But for now, we'll test out a few icon-weights in Shiva - if things look better with more weight, we'll make that change.

just to give more context, I must say that I noticed the thin stroke also because I was testing Shiva with Roboto-regular, as the Roboto-Light has the know problem with bold in Chrome https://forums.smartclient.com/forum...hrome-on-macos
and with that font the icons seem even more "thin":

[Isomorphic]

Ah, ok - you set a 32px stroke-width. That would kind of work, but would of course be dependent on the original size of the SVG - a 32px border would be EXTREMELY wide if these icons didn't happen to already be around 600px wide.

[claudiobosticco]

Yes, sure, this is the grid's header context menu in Shiva without modifications:



and this with the change on the check icon:



where I've added stroke="currentColor" stroke-width="32" to the path:

<symbol id="check" viewBox="178.04 -693.04 603.42 423.12" fill="currentColor">
<path stroke="currentColor" stroke-width="32" d="m379.154-323.153 363-363.385q6.759-6.307 16.148-6.5 9.39-.192 16.467 6.553 6.692 7.129 6.692 16.499 0 9.371-6.692 16.063L399.385-278.539q-8.616 8.615-20.231 8.615-11.615 0-20.231-8.615L184.616-452.846q-6.692-6.759-6.577-16.149.116-9.389 7.245-16.466 7.129-6.692 16.307-6.692 9.178 0 16.255 6.692l161.308 162.308Z"></path>
</symbol>