Updated ImageMgr modal

Added feed back if no images to display
Added Loading... feedback

adim_app/static/_src/adim/ui.js

@@ -369,7 +369,7 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
             .data('loaded', false)
             .modal({'show':false});
 
-        $("#aom-show-but").on("click", {
+        $(".aom-show-but").on("click", {
             anObjMgr: this._anObjMgr,
             anObjMgrModal: this._anObjMgrModal
         }, _showAnObjMgr);
@@ -1219,8 +1219,10 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
         event.data.anObjMgrModal.modal('show');
         if (! event.data.anObjMgrModal.data('loaded')) {
             event.data.anObjMgr.loadAnObjs({success: function(anobjs){
-                event.data.anObjMgrModal.data('loaded', true);
-
+                if (event.data && event.data.anObjMgrModal) {
+                    event.data.anObjMgrModal.find(".aom-loader").remove();
+                    event.data.anObjMgrModal.data('loaded', true);
+                }
             }})
         }
     }

adim_app/static/_src/less/adim.css

@@ -1709,6 +1709,7 @@ fieldset[disabled] .btn-cimaf-layer.active {
 #aom-list-container {
   overflow-y: scroll;
   overflow-x: hidden;
+  min-height: 200px;
 }
 #aom-list-container .popover .popover-title {
   font-size: 12px;
@@ -1725,6 +1726,18 @@ fieldset[disabled] .btn-cimaf-layer.active {
 #aom-list-container .popover .popover-content .dl-horizontal dd {
   margin-left: 90px;
 }
+#aom-list-container .aom-loader {
+  text-align: center;
+  margin-top: 80px;
+  opacity: 0.66;
+}
+#aom-list-container .aom-empty-list-msg {
+  display: none;
+  margin: 50px;
+}
+#aom-list-container .aom-empty-list-msg:last-child {
+  display: block;
+}
 #aom-dropzone {
   margin-top: 20px;
 }

adim_app/static/_src/less/anobj-mgr.css

@@ -58,6 +58,7 @@
 #aom-list-container {
   overflow-y: scroll;
   overflow-x: hidden;
+  min-height: 200px;
 }
 #aom-list-container .popover .popover-title {
   font-size: 12px;
@@ -74,6 +75,18 @@
 #aom-list-container .popover .popover-content .dl-horizontal dd {
   margin-left: 90px;
 }
+#aom-list-container .aom-loader {
+  text-align: center;
+  margin-top: 80px;
+  opacity: 0.66;
+}
+#aom-list-container .aom-empty-list-msg {
+  display: none;
+  margin: 50px;
+}
+#aom-list-container .aom-empty-list-msg:last-child {
+  display: block;
+}
 #aom-dropzone {
   margin-top: 20px;
 }

adim_app/static/_src/less/anobj-mgr.less

@@ -47,6 +47,7 @@
 
     overflow-y: scroll;
     overflow-x: hidden;
+    min-height: @aom-list-item-height;
 
     .popover {
         .popover-title { font-size: 12px; font-weight: 500; }
@@ -58,6 +59,18 @@
             }
         }
     }
+    .aom-loader {
+        text-align: center;
+        margin-top: 80px;
+        opacity: 0.66;
+    }
+    .aom-empty-list-msg {
+        display: none;
+        margin: 50px;
+        &:last-child {
+            display: block;
+        }
+    }
 }
 
 #aom-dropzone {

adim_app/templates/adim_app/annotation_new.html

@@ -53,7 +53,7 @@ window.ADIM_CONFIG = {
 
                 <p>
                     Pour <strong>choisir une image</strong> de votre collection, cliquez&nbsp;sur&nbsp;
-                    <button type="button" class="btn btn-sm btn-default navbar-btn" onclick="$('#aom-show-but').click()">
+                    <button type="button" class="btn btn-sm btn-default navbar-btn aom-show-but">
                         <span class="glyphicon glyphicon-th"></span> Mes images
                     </button>
                 </p>

adim_app/templates/adim_app/base_annotation.html

@@ -19,7 +19,7 @@
     </li>
 
     <li>
-        <a href="#" id="aom-show-but">
+        <a href="#" id="aom-show-but" class="aom-show-but">
             <span class="glyphicon glyphicon-th"></span>
             Mes Images
         </a>
@@ -92,7 +92,14 @@
                 </div>
                 <div class="modal-body">
                     <div id="aom-list-panel">
-                        <div id="aom-list-container"></div>
+                        <div id="aom-list-container">
+                            <div class="aom-empty-list-msg alert alert-info">
+                                Vous n'avez pas encore d'images. Utilisez le bouton "Nouvelle Image"
+                            </div>
+                            <div class="aom-loader">
+                                <h4><span class="label label-default">Chargement en cours ...</span></h4>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer">