UI: modal waiting

4 files changed, 34 insertions, 17 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 7091fffaf..db39ecc8e 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -86,13 +86,30 @@
         {% include 'ishtar/blocks/footer.html' %}
     </div>
     {% endblock %}
-    <div id="progress">
-        <div id='progress-content'>
-            <p class='progress-detail progress-1'>{% trans "Processing..." %}</p>
-            <p class='progress-detail progress-2'>{% trans "This can be long." %}</p>
-            <p class='progress-detail progress-3'>{% trans "Time to take a coffee?" %} <i class="fa fa-coffee" aria-hidden="true"></i></p>
-            <p class='progress-detail progress-4'>{% trans "Time to take another coffee?" %} <i class="fa fa-coffee" aria-hidden="true"></i></p>
+    <div class="modal modal-progress" tabindex="-1" role="dialog"
+         data-backdrop="static" data-keyboard="false" aria-hidden="true">
+      <div class="modal-dialog modal-sm modal-dialog-centered">
+        <div class="modal-content" id='progress-content'>
+            <div class="modal-header">
+                <span class='progress-detail progress-1'>
+                    {% trans "Processing..." %}</span>
+                <span class='progress-detail progress-2'>
+                    {% trans "This can be long." %}</span>
+                <span class='progress-detail progress-3'>
+                    {% trans "Time to take a coffee?" %} <i class="fa fa-coffee" aria-hidden="true"></i></span>
+                <span class='progress-detail progress-4'>
+                    {% trans "Time to take another coffee?" %} <i class="fa fa-coffee" aria-hidden="true"></i></span>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="progress">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+                </div>
+            </div>
         </div>
+      </div>
     </div>
     <div id='message'>
         <div class='information'><i class="fa fa-info-circle" aria-hidden="true"></i> <span class='content'></span></div>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index d3e7312ac..37dd090d2 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -48,7 +48,7 @@
     <div class='col-md-2'>
         <div class="btn-group btn-group-sm" role="group">
             <button type='button' class="btn btn-secondary" data-toggle="modal"
-                    data-target=".table-modal-lg">
+                    data-target="#modal_grid_{{name}}">
                 {% trans "Expand table" %} <i class="fa fa-expand" aria-hidden="true"></i>
             </button>
         </div>
@@ -98,8 +98,8 @@ var query_vars = new Array({{col_idx|safe}});
 var selItems_{{sname}} = new Array();
 jQuery(document).ready(function(){
   jQuery("#search_{{name}}").click(function (){
-    if ($("#progress").length > 0){
-        $("#progress").show();
+    if ($('.modal-progress').length > 0){
+        $('.modal-progress').modal('show');
     }
     var data = "";
     for (idx in query_vars){
@@ -129,8 +129,8 @@ jQuery(document).ready(function(){
     $(".{{slug}}-csv-full").attr("href", '{{extra_source}}csv?submited=1&' + data);
     {% endfor %}
 
-    if ($("#progress").length > 0){
-        $("#progress").hide();
+    if ($('.modal-progress').length > 0){
+        $('.modal-progress').modal('hide');
     }
     return false;
   });
diff --git a/ishtar_common/templates/blocks/JQueryJqGrid.html b/ishtar_common/templates/blocks/JQueryJqGrid.html
index 9160ef9b5..74ccd7780 100644
--- a/ishtar_common/templates/blocks/JQueryJqGrid.html
+++ b/ishtar_common/templates/blocks/JQueryJqGrid.html
@@ -51,8 +51,8 @@ var query_vars = new Array({{col_idx|safe}});
 var selItems_{{sname}} = new Array();
 jQuery(document).ready(function(){
   jQuery("#search_{{name}}").click(function (){
-    if ($("#progress").length > 0){
-        $("#progress").show();
+    if ($('.modal-progress').length > 0){
+        $('.modal-progress').modal('show');
     }
     var data = "";
     for (idx in query_vars)
@@ -84,8 +84,8 @@ jQuery(document).ready(function(){
 
     mygrid.setGridParam({url:url, page:1});
     mygrid.trigger("reloadGrid");
-    if ($("#progress").length > 0){
-        $("#progress").hide();
+    if ($('.modal-progress').length > 0){
+        $('.modal-progress').modal('hide');
     }
     return false;
   });
diff --git a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
index ed61d1265..827fcf02d 100644
--- a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
+++ b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
@@ -17,10 +17,10 @@
 $(function() {
  $( "#dash-tabs" ).tabs({
    beforeActivate: function( event, ui ) {
-    $("#progress").show();
+    $('.modal-progress').modal('show');
    },
    load: function( event, ui ) {
-    $("#progress").hide();
+    $('.modal-progress').modal('hide');
    }
  });
 });