Making Refresh option look more elegant

[rajatgupta21]

This ticket is to improvise the look and feel of the Refresh button currently available for all the boot grid table implementations.

1. Removal of the Refresh button
2. Add refresh icon adjacent to filter option to simplify the the look and feel.

Before :

After :

[danielhb]

@samhenri any comments about this change?

[rajatgupta21]

@samhenri Could you please provide comments regarding this change.

[rajatgupta21]

@danielhb @samhenri this patch is holding us on further ui patches. Need your inputs soon

[samhenri]

Sorry for my delay @rajatgupta21. I think we should keep at least the button text or align the Refresh button to the left. If we place it on the right, it looks like it belongs to the filter, or that it makes the filter refresh and not the actual table.

Take a look at the User Activity Log table. It also uses jQuery Bootgrid to render the table but we customized it to hide the looking glass icon and placed the buttons on the left.

I wasn't able to apply the patch yet but I think that if the button doesn't have any text, it should at least have a label hidden with sr-only class for accessibility.

[danielhb]

@samhenri @rajatgupta21 sent 2 patches to make this change: one in Ginger and other in s390x . Is this change a plug-in side change or perhaps we can embed this in WoK?

[samhenri]

@danielhb For now it is a plug-in side change. jQuery Bootgrid is not well documented but we are able to apply DOM manipulations once the plugin is applied to a table:

var grid = $('#' + gridId).bootgrid({
   ...
}).on("loaded.rs.jquery.bootgrid", function(e) {
        $('.input-group .glyphicon-search').remove();
        $('.search > div').removeClass('input-group');
        ...
}

I did copied some things from Ginger Bootgrid to Wok but most of it is hard-coded to Wok User Log.

[samhenri]

I believe the major concern with Bootgrid is that we don't package Bootstrap Glyphicons with Wok due to that Fedora Font Licensing issue, so we have to watch for glyphicons used on sort and other places and replace with non-branded icons from Font Awesome 4.1.

[danielhb]

Let's get this issue sorted out.

@samhenri so this is a plug-in side change, no global solution. You also said that:

"I think we should keep at least the button text or align the Refresh button to the left. If we place it on the right, it looks like it belongs to the filter, or that it makes the filter refresh and not the actual table. "

Isn't the refresh button already aligned to the left in the following link? Do you wish to "decouple" it from the looking glass icon to further show that the refresh button isn't part of the filter?

https://cloud.githubusercontent.com/assets/511072/14700111/cb4e3d9a-07ba-11e6-976b-68c8a7231c24.jpg

You also said:

"I wasn't able to apply the patch yet but I think that if the button doesn't have any text, it should at least have a label hidden with sr-only class for accessibility."

@rajatgupta21 do your patches include this hidden label ? I don't recall now

[samhenri]

@danielhb I meant on the left side of the panel, right where the action button usually is and yes, decoupled from the filter input.

[rajatgupta21]

@danielhb @samhenri Thanks for your inputs. I am investigating above suggestions along with the possibility of moving ADD options into Actions drop down itself wherever required.

Example: Storage devices you can see Add drop down goal to move Add drop down actions into Actions like Actions -> Add -> Add FCP -> Add ECKD ...