DateChooser styles in Shiva and skin editor

[claudiobosticco]

Hello, the DateChooser in Shiva has a different style (compared to the other flat skins) for the navigation buttons when hovering:



I'm not really sure if this is intended, as I noticed that the SVG icons aren't perfectly horizontally centered, and the contrast between the background color and the icon color seems sub-optimal.

Anyway, while trying to change that color using the SkinEditor, I noticed that the hover effect shown in the previews isn't always consistent. Here are two additional cases, where the top-right button is the one being hovered over:





I've observed these variations by simply refreshing the page and loading a custom "test" skin, which is an unmodified Shiva skin.

Moreover, when I try to customize this style in my custom skin for my application, I always see the first of these three styles and I'm unable to modify it. I'm not sure if the style is missing from the SkinEditor or if I'm overlooking something.

[Isomorphic]

hi Claudio - we've made some improvements here - you should find the over styles looking better, and they should also be properly stylable in the Skin Editor.

The icons are indeed not being centered in the navButtons, and we'll update here when that one's been addressed.

The difference in the 2nd and 3rd images looks to be that the former is in Spacious mode and the latter is in Dense, and the issue you're seeing is probably to do with scaling.

In the Skin Editor, we allow live changes to sizes like fonts and padding, so we have to do live scaling as well, and can't apply it up-front using the usual framework mechanism - instead, we have a cut-down local version of that process, and there's likely an issue in that mechanism, perhaps the DateChooser class not listening for CSS changes in order to redraw.

We will get to it, but even if you see this behavior in the Skin Editor, you shouldn't see it in your applications - please let us know if you do.

[claudiobosticco]

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

I see the fixes that you already made, thank you very much

[Isomorphic]

hi Claudio - we've tweaked DateChooser styling some more in Shiva - the icons in the main header are now aligned, sized and scaled properly and the header in the DateGrid itself looks more like other grids in Shiva and also scales with density.

Please let us know if you're still seeing the gap on the right in the Skin Editor or elsewhere with today's build.

[claudiobosticco]

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

Chrome on MacOS (works with FF and Safari)

Hello, I see the changes and overall it's much better, thank you.

But I still see a little gap on the right when opening the DateChooser for a timeline (like in the databoundTimeline sample), and just with Chrome:


Instead I don't see it when opening the DateChooser in the variousControls sample for a Datetime or a RelativeDateItem.