small bug fixes and some relifting

Author: comur

Resources/public/css/comur.image_bundle.css

@@ -81,6 +81,11 @@
     -ms-filter: 'alpha(opacity=0)';
     max-width: 0;
     width: 0;
+    height: 0;
+}
+
+.fileinput-button {
+    margin-bottom: 10px;
 }
 
 .image_upload_drop_zone
@@ -103,6 +108,11 @@
     text-align: center;
 }
 
+.jcrop-holder {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .jcrop-holder img{
     max-width: none !important;
 }
@@ -134,7 +144,7 @@
 {
     /*width: 150px;
     height: 150px;*/
-    border: solid 1px #888;
+    border: solid 1px #aaaaaa;
     display: inline-block;
     margin: 5px;
     text-align: center;
@@ -153,6 +163,11 @@
 #existing-images
 {
     text-align: center;
+    padding: 10px;
+}
+
+#image_preview {
+    margin-top: 20px;
 }
 
 #image_preview img
@@ -171,3 +186,16 @@
 {
     display: none;
 }
+
+.loader
+{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    height: 100%;
+    padding-top: 30%;
+    z-index: 1000;
+    color: #555;
+}

Resources/public/js/comur.imagelibrary.js

@@ -91,12 +91,12 @@ function initializeImageManager(id, options){
     // $('#image_upload_file').bind('fileuploadadd', function (e, data) {console.log('add')});
     $('#image_crop_go_now').unbind('click');
     $('#image_crop_go_now').click(function(){ cropImage(id, options)});
-    $('#image_crop_cancel').click(function () {
-        $('#selected_image').val('');
-        $('#image_crop_go_now').addClass('hidden');
-        $('#image_crop_cancel').addClass('hidden');
-        $('#image_upload_tabs a:first').tab('show');
-    });
+    // $('#image_crop_cancel').click(function () {
+    //     $('#selected_image').val('');
+    //     $('#image_crop_go_now').addClass('hidden');
+    //     $('#image_crop_cancel').addClass('hidden');
+    //     $('#image_upload_tabs a:first').tab('show');
+    // });
     // $('#'+id+'_image_crop span').click(initJCrop_{{id}});
     // $('#'+id+'_image_crop_go_cancel').click(destroyJCrop);
 }
@@ -106,7 +106,8 @@ function destroyImageManager(){
     destroyJCrop();
     $('#image_crop_go_now').unbind('click');
     $('#image_preview').html('<p>Please select or upload an image</p>');
-    $('#image_crop_cancel').addClass('hidden');
+    // $('#image_crop_cancel').addClass('hidden');
+    reinitModal();
 }
 
 var api;
@@ -150,10 +151,6 @@ function initJCrop(id, options){
                 var selectionWidth = $('#image_preview_image').width();
                 var selectionHeight = parseInt($('#image_preview_image').width() / (options.cropConfig.minWidth / options.cropConfig.minHeight));
             }
-            console.log(parseInt(($('#image_preview_image').width() - selectionWidth)/2),
-                parseInt(($('#image_preview_image').height() - selectionHeight)/2),
-                selectionWidth, 
-                selectionHeight);
 
             api.setSelect([
                 parseInt(($('#image_preview_image').width() - selectionWidth)/2),
@@ -163,7 +160,7 @@ function initJCrop(id, options){
             ]);
             //$('#image_crop').addClass('hidden');
             $('#image_crop_go_now').removeClass('hidden');
-            $('#image_crop_cancel').removeClass('hidden');
+            // $('#image_crop_cancel').removeClass('hidden');
             $('#image_upload_tabs a:last').tab('show');
         });
         //$('#image_backdrop').removeClass('hidden');
@@ -176,6 +173,7 @@ function initJCrop(id, options){
 }
 
 function cropImage(id, options){
+    $('#cropping-loader').show();
     $.ajax({
         url: Routing.generate(options.cropConfig.cropRoute),
         type: 'POST',
@@ -220,16 +218,23 @@ function cropImage(id, options){
             }
 
             destroyJCrop(id);
-            $('#selected_image').val('');
-            $('#image_preview').html('<p>Please select or upload an image</p>');
-            $('#image_crop_go_now').addClass('hidden');
-            $('#image_crop_cancel').addClass('hidden');
-            $('#image_upload_tabs a:first').tab('show');
-            $('#image_upload_modal').modal('hide');
+            reinitModal();
+        },
+        complete: function() {
+            $('#cropping-loader').hide();
         }
     });
 }
 
+function reinitModal() {
+    $('#selected_image').val('');
+    $('#image_preview').html('<p>Please select or upload an image</p>');
+    $('#image_crop_go_now').addClass('hidden');
+    // $('#image_crop_cancel').addClass('hidden');
+    $('#image_upload_tabs a:first').tab('show');
+    $('#image_upload_modal').modal('hide');
+}
+
 function addImageToGallery(filename, id, thumb, options)
 {
     // $('#'+id).val(js_array_to_php_array(galleries[id]));

Resources/views/Form/croppable_image_modal.html.twig

@@ -40,7 +40,8 @@
                 <h3>{% trans %}Insert Image{% endtrans %}</h3>
             </div>
             <div class="modal-body">
-                <ul class="nav nav-pills" id="image_upload_tabs">
+                <div id="cropping-loader" class="text-center loader" style="display: none"><i class="fa fa-spinner fa-pulse fa-5x"></i></div>
+                <ul class="nav nav-tabs" id="image_upload_tabs">
                     <li class="active">
                         <a href="#upload-image" data-toggle="tab">{% trans %}Upload Image{% endtrans %}</a>
                     </li>
@@ -55,12 +56,13 @@
                             </div>
                         </div>
                         <div id="image_upload_drop_zone" class="image_upload_drop_zone">
+                            <p><i class="fa fa-image fa-3x"></i></p>
                             <p>{% trans %}Drop your file here{% endtrans %}</p>
-                            <p>{% trans %}or{% endtrans %}</p>
                         </div>
+                        <p>{% trans %}or{% endtrans %}</p>
                         <div id="image_upload_file_container">
                             <span class="btn btn-info fileinput-button">
-                                <i class="icon-white icon-download-alt"></i>
+                                <i class="fa fa-upload"></i>&nbsp;
                                 <span> {% trans %}Select a file...{% endtrans %}</span>
                                 <input id="image_upload_file" type="file" name="image_upload_file">
                             </span>
@@ -80,22 +82,25 @@
                     </div>
                     <!-- CROP IMAGE -->
                     <div class="tab-pane" id="crop-and-use">
-                        <p>{% trans %}Please adjust selection to your image{% endtrans %}</p>
+                        <h4 class="text-info text-center"><i class="fa fa-info-circle"></i>&nbsp;{% trans %}Please adjust selection to your image{% endtrans %}</h4>
                         <div class="image_preview" id="image_preview" style="z-index: 1050">
-                            <p>{% trans %}Please select or upload an image{% endtrans %}</p>
+                            <p class="text-danger text-center">{% trans %}Please select or upload an image{% endtrans %}</p>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans %}Close{% endtrans %}</button>
+                    <button class="btn btn-danger" data-dismiss="modal">
+                        <i class="fa fa-ban"></i>&nbsp;
+                        {% trans %}Close{% endtrans %}
+                    </button>
                     <span class="btn btn-success hidden" id="image_crop_go_now">
-                        <i class="icon-white icon icon-fullscreen"></i>
+                        <i class="fa fa-cut"></i>&nbsp;
                         {% trans %}Crop & Use !{% endtrans %}
                     </span>
-                    <span class="btn btn-success hidden" id="image_crop_cancel">
-                        <i class="icon-white icon icon-fullscreen"></i>
-                        {% trans %}Cancel{% endtrans %}
-                    </span>
+{#                    <span class="btn btn-danger hidden" id="image_crop_cancel">#}
+{#                        <i class="fa fa-ban"></i>&nbsp;#}
+{#                        {% trans %}Cancel{% endtrans %}#}
+{#                    </span>#}
                 </div>
             </div>
         </div>

Resources/views/Form/fields.html.twig

@@ -15,7 +15,7 @@
         <div class="image_preview select-image-button" id="image_preview_{{ form[name].vars.id }}" style="z-index: 1050">
             <div class="image_edit_button">
                 <span class="btn btn-success select-image-button">
-                    <i class="glyphicon glyphicon-edit glyphicon-white"></i> {% trans %}Edit{% endtrans %}
+                    <i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}
                 </span>
             </div>
             <div id="image_preview_image_{{form[name].vars.id}}">
@@ -58,7 +58,10 @@
                 {% endif %}
                 initializeImageManager('{{ form[name].vars.id }}', options);
                 // console.log('{{form[name].vars.id}} onclick');
-                $('#image_upload_modal').modal('show');
+                $('#image_upload_modal').modal({
+                  backdrop: 'static',
+                  keyboard: false
+                });
             });
         });
         $('.select-image-button').mouseover(function(){
@@ -89,14 +92,14 @@
                 <div class="gallery-image-container" data-image="{{ image.vars.value }}">
                     <span class="gallery-image-helper"></span>
                     {{ form_widget(image) }}
-                    <span class="remove-image"><i class="glyphicon glyphicon-remove" data-delete="image"></i></span>
+                    <span class="remove-image"><i class="fa fa-times" data-delete="image"></i></span>
                     <img src="/{{ (options.uploadConfig.webDir ~ '/' ~ image.vars.value)|thumb(options.galleryThumbSize, options.galleryThumbSize) }}?{{ 'now'  | date('U') }}"/>
                 </div>
             {% endfor %}
         </div>
         <div class="image_add_button" id="image_add_button_{{form[name].vars.id}}">
             <span class="btn btn-success add-image-button">
-                <i class="glyphicon glyphicon-picture glyphicon-white"></i> {% trans %}Add image{% endtrans %}
+                <i class="fa fa-picture"></i> {% trans %}Add image{% endtrans %}
             </span>
         </div>
 
@@ -109,7 +112,10 @@
             galleries['{{form[name].vars.id}}'] = true;
             $('#image_add_button_{{form[name].vars.id}}').click(function(event){
                 initializeImageManager('{{ form[name].vars.id }}', $.parseJSON('{{ options | json_encode() | raw }}'));
-                $('#image_upload_modal').modal('show');
+                $('#image_upload_modal').modal({
+                  backdrop: 'static',
+                  keyboard: false
+                });
             });
             $( "#gallery_preview_{{form[name].vars.id}}" ).sortable({
                 placeholder: "gallery-image-container placeholder",