toaster: Add clear filter button to filter tooltips

This patch modifies the basetable_top.html template to add
the 'Show all' button to the applied filter tooltip. It also
adds a delay in the tooltip dismissal in main.js to allow
users to click the button comfortably.

The patch does not add the functionality to the button (when
you click on it nothing happens). Someone else will need
to add that in.

Signed-off-by: Belen Barros <belen.barros.pena@intel.com>

diff --git a/lib/toaster/toastergui/static/js/main.js b/lib/toaster/toastergui/static/js/main.js
index 52e0084095e39fc174c2cc300dc5b011d67ed17b..032584d4e25918ca79de39fc9f9ba86617c18539 100644 (file)
--- a/lib/toaster/toastergui/static/js/main.js
+++ b/lib/toaster/toastergui/static/js/main.js
@@ -20,7 +20,7 @@ $(document).ready(function() {
        $('td > a.btn').popover({html:true, container:'body', placement:'left'});
 
        // enable tooltips for applied filters
-       $('th a.btn-primary').tooltip({container:'body', html:true, placement:'bottom'});
+       $('th a.btn-primary').tooltip({container:'body', html:true, placement:'bottom', delay:{hide:1500}});
 
        // enable help information tooltip
     $(".get-help").tooltip({container:'body', html:true, delay:{show:300}});

diff --git a/lib/toaster/toastergui/templates/basetable_top.html b/lib/toaster/toastergui/templates/basetable_top.html
index 67a1d103db1bdcee726a2aa89a871d9675ecb759..84c73a72e03bccc3078ebd74438a491d48127523 100644 (file)
--- a/lib/toaster/toastergui/templates/basetable_top.html
+++ b/lib/toaster/toastergui/templates/basetable_top.html
@@ -79,7 +79,7 @@
                 {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'orderby' : '{{tc.orderfield}}' })" >{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%}
                 {%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%}
                 {%if tc.filter%}<div class="btn-group pull-right">
-                    <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter%} title="{{tc.filter.options|filtered_tooltip:request.GET.filter}}"{%endif%} data-toggle="modal"> <i class="icon-filter filtered"></i> </a>
+                    <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter%} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-small btn-primary' href=''>Show all {{objectname}}</a></p>" {%endif%} data-toggle="modal"> <i class="icon-filter filtered"></i> </a>
                 </div>{%endif%}
             </th>{% endfor %}
         </tr>