...

StyleSheets for the Servoy Smart and Web Client could make use of Servoy specific type selectors. In the NGClient, where the stylesheets are interpreted by the browser, these Servoy specific type selectors are not available. Below a conversion table from the Servoy specific type selectors to their NGClient equivalent. 

Also NGClient will output special classes for default components that can be used from solution css to easily style all components of same time. The name of the class is svy-componentName (so svy-label, svy-button, svy-calendar, svy-textfield...). Also, in NGClient we added two new classes: svy-layoutcontainer (for responsive layout containers) and svy-wrapper for wrapper div of the component (used in absolute layout).

...

Tabpanel is based on Bootstrap nav-tabs. To target the tabs, the following classes are available:

2. Changes from previous version

...

The message is defined by key servoy.ngclient.reconnecting:

Since Servoy 8.3.1 we added another class, svy-reconnecting-overlay, which is used to define the css transition. The transition also has a delay (default) half a second in order to avoid this message showing when there is a network hiccup. The delay can be changed from solution css:

...

By default NGClient will set the wait mouse cursor on the body and all its elements when a request to the server is done. This is done through the service: $sabloLoadingIndicator which can also be used by 3th party services (plugins) that want to set there own wait cursor. The service has 2 functions:1> showLoadingtakes a while. Starting with Servoy 2019.03 it will also show a default loading animation (bottom of page).

The default loading animation can be customized directly from the solution's .css (or .less) file. It is made up of a parent div (with class "loading-i-holder") and 5 child divs (with class "lii-shape" on all of them and then each with it's own class from "lii-1" up to "lii-5"). You can change colors, position, animation and whatever is supported by CSS. For example if you want to make the shapes blue instead of orange you just add this to the solution style sheet:

.lii-shape {
    background-color: blue;
}

If you want for example the animation to not be shown at all you could for example add this to solution .css:

.loading-i-holder {
    display: none;
}

The loading indicator is implemented through $sabloLoadingIndicator angular service - which also allows 3rd party ng service packages (that want to set their own 'loading' UI) to override default behavior. The $sabloLoadingIndicator service can also be called (as/if needed) by 3rd party ng service or component packages that know that a special operation can take a while to execute.

The $sabloLoadingIndicator service provides two functions:

• showLoading(): Call this when the loading indicator should show.

...

• hideLoading(): Call this when the loading indicator should be hidden.

A call too to showLoading() should always be in sync followed at some point with a call to hideLoading() - else the internal state will be wrong.

If you want to control what should be done when show/hide is called , so showing - so you want to show your own kind of loading (maybe a div) - then you can add your own angular/ng service with the name "loadingIndicator". This service should have those 2 functions, ; don't use this service directly to set or hide the indicator, always use the $sabloLoadingIndicator which will delegate to your "loadingIndicator".

yourmodule.factory("loadingIndicator",function($window) 
{
	return {
		showLoading: function() {
			$($window.document.body).css({"cursor":"wait"});
		},
		hideLoading: function() {
			$($window.document.body).css({"cursor":"auto"});
		},
	}
})

...