Add filepicker preview

src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css

@@ -39,9 +39,13 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    margin-bottom: 10px;
+    /* margin-bottom: 10px; */
+    margin-bottom: calc(50% - 20px);
     display: none;
 }
+.file_picker .preview-images-zone > .preview-image > .tools-edit-image > a > .icon-zoom-in{
+    font-size: 22px;
+}
 .file_picker .preview-images-zone > .preview-image > .image-cancel {
     font-size: 18px;
     position: absolute;
@@ -60,12 +64,20 @@
 }
 .preview-image:hover > .tools-edit-image,
 .file_picker .preview-image:hover > .image-cancel {
-    display: block;
+    display: block !important;
 }
 .file_picker .ui-sortable-helper {
     width: 90px !important;
     height: 90px !important;
 }
+.modal-image-zone {
+    max-height: 600px;
+    overflow-y: auto;
+}
+.modal-image-zone > img {
+    height: auto;
+    width: 100%;
+}
 
 .file_picker .container {
     padding-top: 50px;

src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html

@@ -10,11 +10,14 @@
         <div ng-repeat="image in aPreviewImages"
              ng-class="{'preview-image-small' : aPreviewImages.length > 4}"
              class="preview-image preview-show-{{$index}}">
-            <div class="image-cancel" data-no="{{$index}}">x</div>
+            <div class="image-cancel" data-no="{{$index}}" ng-click="removeImage(image)">x</div>
             <div class="image-zone"><img id="pro-img-{{$index}}" ng-src="{{image.src}}"></div>
             <div class="tools-edit-image">
-                <a href="javascript:void(0)" data-no="{{$index}}" class="btn btn-light btn-edit-image">
-                    <span class="ison-zoom-in"></span>
+                <a href="javascript:void(0)"
+                   data-no="{{$index}}"
+                   class="btn btn-light btn-edit-image"
+                   ng-click="showImageModal(image)">
+                    <span class="icon-zoom-in"></span>
                 </a>
             </div>
         </div>
@@ -25,9 +28,10 @@
         </div>
     </div>
 
-    <!-- Visioneuse fichiers -->
-    <div ng-show="aFiles.length > 0" tabindex="500" class="form-control file-caption  kv-fileinput-caption">
-        <div class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> {{aFiles.length}} fichier(s) à modifier</div>
+    <!-- Visioneuse nombre fichiers -->
+    <div tabindex="500" class="form-control file-caption  kv-fileinput-caption">
+        <div ng-show="aFiles.length > 0" class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> {{aFiles.length}} fichier(s) à modifier</div>
+        <div ng-show="aFiles.length == 0" class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> Aucun fichier disponible</div>
     </div>
 
     <!-- Bouton caché input -->

src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js

@@ -157,6 +157,12 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
                         return bIsFilePresent;
                     }
 
+
+                    scope['removeImage'] = function(oImage) {
+                        console.log("removeImage: ", oImage);
+
+                    }
+
                     /**
                      * Show the finder to search no files to add
                      * @export
@@ -165,6 +171,14 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
                         var oInput = $(element).find('#' + scope['field']['id']);
                         $(oInput).click();
                     }
+
+
+                    scope['showImageModal'] = function(oImage) {
+                        var dialog = bootbox.dialog({
+                            title: oImage['name'],
+                            message: '<div class="modal-image-zone"><img src="' + oImage['src'] + '"></div>'
+                        });
+                    }
                 },
                 post: function (scope, element, attributes, controller, transcludeFn) {
                     $log.log("formReader.FilePickerDirective.post");