Tip: Put unimportant things in the background

A great feature are the so-called badges, which show the number of records in child tables already in the headers of the tabs. However, the badges with value 0 are colored identically with badges that have a larger value. The eye can't immediately detect if there are records or not. With a little CSS+Javascript trick I move unimportant information into the background.

Problem

This is the initial situation: all badges look identical. There is no distinction between 0 and >0:

Final Result

And this is how it looks with the small change:

All badges with value 0 are discreetly moved into the background. The eye can more quickly grasp where detailed data is present and where not.

Code

This is not too hard if you know how to get and compare values. We need a function which finds badges having content = "0" and then change the appearance.

Javascript

function myAutoChangeBadges() {
    jQuery('.badge:contains("0")').addClass("badge-empty");
}

Cascading Stylesheet (CSS)

.badge.badge-empty {
    opacity: 0.1;
}

There is one thing left: We need to call our function. But when? As you might know and remember, ChildrenTabs are being lazy-loaded. They are not present at the moment the page has loaded. Additionally, ChildrenTabs can be reloaded at runtime after insert, delete or modification or after pressing the refresh button.

So, we need to find a way for calling our function after load, but not too early, and after each reload of any ChildrenTab.

Fortunately, there are helper functions in AppGini Helper Javascript Library which do the hard work for us. AppGiniHelper.DV.ready() fires after ChildrenTabs have been initially loaded. And AppGiniHelper.DV.getChildrenTabs().onReload(...) fires each time we reload a tab.

Here is the complete code for hooks/header-extras.php:

<!-- file: hooks/header-extras.php -->
<style>
    .badge.badge-empty {
        opacity: 0.1;
    }
</style>
<script>
    function myAutoChangeBadges() {
        jQuery('.badge:contains("0")').addClass("badge-empty");
    }
    jQuery(function() {
        AppGiniHelper.DV.ready(function() {
            myAutoChangeBadges();
        });
        AppGiniHelper.DV.getChildrenTabs().onReload(function() {
            myAutoChangeBadges();
        });
    });
</script>

I hope you like it!