diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css
index 4a5e8854205d9b0e8aa5f81b818eb55128a86aa3..d9f2c7799daeaadad09f1e7e604c0d60470f9a23 100644
--- a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css
@@ -95,3 +95,34 @@
.file_picker .container {
padding-top: 50px;
}
+
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-button-container {
+ padding-top: 15px;
+ text-align: right;
+ border-top: 1px solid #e5e5e5;
+}
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container {
+ position: absolute;
+ top: 0px;
+ width: calc(100% - 30px);
+ height: calc(100% - 64px);
+}
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container > .filepicker-image-zoom-modal-tools-prev,
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container > .filepicker-image-zoom-modal-tools-next {
+ position: absolute;
+ top: calc(50% - 35px);
+ font-size: 70px;
+ cursor: pointer;
+ -webkit-text-stroke: 1px white;
+ display: none;
+}
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container:hover > .filepicker-image-zoom-modal-tools-prev,
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container:hover > .filepicker-image-zoom-modal-tools-next {
+ display: block;
+}
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container > .filepicker-image-zoom-modal-tools-prev {
+ left: 0px;
+}
+.filepicker-image-zoom-modal .filepicker-image-zoom-modal-tools-container > .filepicker-image-zoom-modal-tools-next {
+ right: 0px;
+}
diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html
index 18827747919b9cd2554df46343c163eb44b1e658..93f54c0a17bb87be07a715b1c2fe79a0e4a26bf1 100644
--- a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html
@@ -6,12 +6,16 @@
<label for="{{:refresh:field.id}}" id="{{:refresh:field.id}}_label" class="control-label" data-translate="{{:refresh:field.label}}"></label>
<!-- Visioneuse Images -->
- <div ng-if="field.type === 'image_wsdata'" class="preview-images-zone">
+ <div ng-if="field.type === 'image_wsdata'"
+ ng-show="aPreviewImages.length > 0"
+ class="preview-images-zone">
<div ng-repeat="image in aPreviewImages"
ng-class="{'preview-image-small' : aPreviewImages.length !== 1}"
class="preview-image preview-show-{{$index}}">
- <div class="image-cancel" data-no="{{$index}}" ng-click="removeFile(image)">x</div>
- <div class="image-zone"><img id="pro-img-{{$index}}" ng-src="{{image.src}}"></div>
+ <div class="image-cancel" data-no="{{$index}}" ng-click="removeFile(image)">
+ <span class="icon-trash"></span>
+ </div>
+ <div class="image-zone"><img ng-src="{{image.src}}"></div>
<div class="tools-edit-image">
<a href="javascript:void(0)"
data-no="{{$index}}"
@@ -21,11 +25,6 @@
</a>
</div>
</div>
- <div ng-if="!field.displayOnly"
- ng-class="{'preview-image-small' : aPreviewImages.length !== 1}"
- class="preview-image preview-show-{{$index}}">
- <div class="image-add" ng-click="searchNewFile()"><span class="icon-plus"></span></div>
- </div>
</div>
<!-- Visioneuse documents -->
@@ -33,17 +32,17 @@
<div ng-repeat="document in aPreviewDocuments"
class="preview-document preview-show-{{$index}}">
<a class="document-link" href="javascript:void(0)" ng-click="downloadFile(document)">{{document.name}}</a>
- <span class="document-cancel" data-no="{{$index}}" ng-click="removeFile(document)">x</span>
+ <span class="document-cancel" data-no="{{$index}}" ng-click="removeFile(document)"><span class="icon-trash"></span></span>
</div>
</div>
<!-- Fichiers à envoyer -->
- <div ng-class="{'input-group input-file-xxs' : field.type === 'file_wsdata'}" ng-click="searchNewFile()">
+ <div class="input-group input-file-xxs" ng-click="searchNewFile()">
<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)</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>
- <div ng-if="field.type === 'file_wsdata'" class="input-group-btn">
+ <div class="input-group-btn">
<div tabindex="500" class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i> Ajouter…</div>
</div>
</div>
@@ -54,4 +53,5 @@
<input ng-if="!field.multiple" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required">
<input ng-if="field.multiple" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required" multiple>
</div>
+
</div>
diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js
index ec4604032f2299203d3e3b867cdcb55794386aa5..8106201dc2f0f7e706fe1ecc8ca3267c7fc9a492 100644
--- a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js
@@ -76,6 +76,8 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
*/
scope['downloadFile'] = function(oFile) {
+ console.log("downloadFile: ", oFile);
+
var oBlob;
var sFileName = oFile['name'];
@@ -268,9 +270,38 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
* @param {object} oImage
*/
scope['showImageModal'] = function(oImage) {
+
+ var domModalcontent = $('<div class="modal-image-zone"></div>');
+ var domImage = $('<img src="' + oImage['src'] + '">');
+
+ // Boutons suivant/précédent
+ var domImageToolsContainer = $('<div class="filepicker-image-zoom-modal-tools-container"></div>');
+ var domImageToolsPrev = $('<div class="filepicker-image-zoom-modal-tools-prev"><span class="icon-keyboard_arrow_left"></span></div>');
+ var domImageToolsNext = $('<div class="filepicker-image-zoom-modal-tools-next"><span class="icon-keyboard_arrow_right"></span></div>');
+
+ // Bouton télécharger
+ var domDownloadButtonContainer = $('<div class="filepicker-image-zoom-modal-button-container"></div>');
+ var domDownloadButton = $('<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-download-alt"></span></button>');
+
+ /**
+ * Téléchargement de l'image
+ */
+ $(domDownloadButton).click(function(){
+ scope['downloadFile'](oImage);
+ });
+
+ $(domModalcontent).append(domImage);
+ $(domImageToolsContainer).append(domImageToolsPrev);
+ $(domImageToolsContainer).append(domImageToolsNext);
+ $(domDownloadButtonContainer).append(domDownloadButton);
+ $(domModalcontent).append(domDownloadButtonContainer);
+ $(domModalcontent).append(domImageToolsContainer);
+
+
var dialog = bootbox['dialog']({
- title: oImage['name'],
- message: '<div class="modal-image-zone"><img src="' + oImage['src'] + '"></div>'
+ 'title': oImage['name'],
+ 'className': 'filepicker-image-zoom-modal',
+ 'message': domModalcontent
});
}