Problems when loading a custom skin

[slick07]

Hi there,

After getting feedback from our users it resulted that the Enterprise theme that we were using until now is considered oldish. Hence we decided to switch to the Tahoe theme but with some minor color changes (for example the color for the ListGrid header is too invasive). However we see this error when running any type of sample code:

TypeError: Cannot read property 'changeDefaults' of undefined
Stack from error.stack:
    loadSkin(<no args: exited>) @ load_skin.js:1669:25
    null.<anonymous>(<no args: exited>) @ load_skin.js:2118:5

More exactly this piece of code within load_skin.js

isc.EventWindow.changeDefaults("resizerDefaults", {
            src:"[SKIN]/Window/v_resizer.png"
        });

Also the skin is loaded but by inspecting the exported .css we do not see the custom changes that we made and looks just like the original Tahoe. The theme was created with the online editor and is deployed for now as a source within the war folder. Using SNAPSHOT_v13.0d_2021-08-05/LGPL Development Only (built 2021-08-05). I can provide other details if needed.

[Isomorphic]

The problem is that isc.EventWindow and isc.TimelineWindow were depracated for a long time, and are now removed from 13.0.

In more recent builds of 12.1, you will find these blocks wrapped in appropriate if() statements, so this crash wouldn't happen - but if you're using the skin in 13.0, you can just remove the consecutive blocks for these classes from your load_skin.js.

[slick07]

Yes , we are testing with 13. Will remove them.

What about this issue?

by inspecting the exported .css we do not see the custom changes that we made and looks just like the original Tahoe. The theme was created with the online editor

[Isomorphic]

We're looking into this and will update shortly

[slick07]

Also when using Tahoe skin with these settings for TreeGrids:

setShowRollOver(true);
setShowRollOverCanvas(true);
setShowRollUnderCanvas(false);
setUseCellRollOvers(true);
setShowRowNumbers(true);

some strange graphics start to appear after you move the mouse over the hierarchical column. Also some warnings appear in the console:

SelectionOrRollOverCanvas:isc_TreeGrid_0_rollOverCanvas:ignoring bad or negative width: -35 [enable 'sizing' log for stack trace]

The issue is reproducible by adding the above settings on the https://smartclient.com/smartgwt/showcase/#tree_sorting sample.

[Isomorphic]

It's not clear what was wrong with your output from the online SkinEditor, but it was running a pretty old framework build.

We've updated it to the latest 12.1 code and tested that it works as expected when a skin is exported and dropped into 13.0 - no complaints about isc.Event/TimelineWindow classes, and custom colors are correctly applied.

So, if you re-export your skin from the online Skin Editor, you should find things work as you expect right away.

One thing of note - there is a known issue with semi-transparent colors in current builds - we'll fix that in the coming days, and update here when we do - but for now, don't use semi-transparent colors.

We'll take a look at the graphics issues you mentioned, also in the coming days.

[slick07]

Hmm... I re-exported the skin and indeed the initial errors (related to isc.EventWindow) do not appear anymore but the colors are still not exported correctly. Here is how the .treeCellSelected looks in the online editor:

and how it looks in the exported skin:


I could attach the exported skin to look at it but I do not see how it might help...

[slick07]

After further investigation it seems the colors are there in the _userSettings.scss file but not in the skin_styles.css. Is the compass compile not performed? I thought that the exported skin is ready to use.

[Isomorphic]

We're not seeing this. A skin exported from the online skinEditor, today, seems to include any changes we make, including changes to those exact colors. They appear in skin_styles.css, and they show when we load the skin after exporting it.

Did you make a change to your skin today, and re-Save it, before exporting? That's necessary to recompile the skin.

[slick07]

It does not matter if I make any change or not. After spending a few hours on this issue it resulted that the export takes into account the changes only sometimes but I still can not find a rule...

Scenario:
1. If Standard Background is #ffffff then the export does not contain any change (it looks just like Tahoe)

2. If I change the Standard Background to #fdfdfd also the export does not contain any change

3. If I change the Standard Background to #d5d5d5 then the export takes all the changes into account (what????)

4. Change back the Standard Background to #fdfdfd and, surprise!!!!, the export takes all the changes into account

5. Change back the Standard Background to #ffffff and again the export does not contain any change

6. Put back the Standard Background to #fdfdfd and the export is ok.

7. Put the Standard Background to #ffffff and horaaay!!!!! the export is finally ok.


This is mind blowing to me and I do not know how it will behave the next time we shall make new adjustments but keeping the Standard Background to #ffffff...

[Isomorphic]

We see this misbehavior in the online skinEditor - the problem is that compass compile is sometimes no-op-ing because it thinks files haven't changed. It appears to be a server issue with file timestamps, and the result is that the exported skin has the correct template, but skin_styles.css hasn't been recompiled.

We're looking into it today and will update when it's fixed.

In the meantime, you should be able to compile the exported skin yourself locally, by changing to the skin's template directory and running "compass compile --force" -- that should incorporate your changes.

[slick07]

Another issue related to color pickers that only appear on SGWT 13: the images ColorPicker_icon_overlayLight.png and ColorPicker_icon_overlayDark.png from skins/Tahoe/images/DynamicForm/ are not exported when generating the new skin from Tahoe and a 404 is thrown when changing the color for a color picker.

Maybe this happens because you have updated the SkinEditor to the latest 12.1 code but that code does not know about certain parts particular to SGWT 13 like the icons for color pickers? Although I guess you are copying the entire folder and not file by file... Plus the image ColorPicker_icon_empty.png is there...

[Isomorphic]

Thanks for the report - that particular feature of overlaying an icon atop the color when a value is selected was added into 13.0, so yes those icons aren't in 12.1, so won't end up in a skin from the online skinEditor.

However, in this case, we'll add that feature to 12.1, along with the icons.

[Isomorphic]

We've added the missing icons to 12.1, so they'll now appear in exported skins, as of tomorrow's builds - we'll push an update to the online Skin Editor this week.

In the meantime, you can just copy the missing icons from 13.0 Tahoe.

Note - the framework feature that uses these icons has not been backported to 12.1, because it's entirely new - we just added the icons, so they're present if a 12.1 skin is used in a later version.

[slick07]

Great! Thank you!

In the meantime, you can just copy the missing icons from 13.0 Tahoe.

I used this workaround already before writing you :)

One more thing that might improve your Skin Editor is to add the possibility to customise the .specialCol related css settings. Maybe it is already present but I was not able to find it... This would be useful for those users that want to use for example the same css style for column headers and for row numbering like a row "header" for ListGrids. For example this looks really nice in Google Spreadsheets... Maybe it would be a good idea to even set it like this by default in all skins... just an idea.