From 84c0bec36c2c78fcb558f37cb60bb3e8128ffaf5 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Mon, 16 Mar 2015 16:51:55 -0500
Subject: [PATCH] Fix show avatar in social tool - refs #7539

---
 main/css/base.css                       | 11 +++++++++++
 main/inc/lib/social.lib.php             |  2 +-
 main/template/default/layout/footer.tpl | 13 +++++++++++++
 main/template/default/layout/head.tpl   | 21 +++++++++++++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/main/css/base.css b/main/css/base.css
index 38236aa925..cc1df51083 100755
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -5421,3 +5421,14 @@ i.size-32.icon-new-work{
   vertical-align: bottom;
   margin-right: 5px;
 }
+
+/**
+ * Modal for user avatar preview
+ * @author Angel Fernando Quiroz Campos <angel.quiroz@beeznest.com>
+ */
+#expand-image-modal img {
+    display: block;
+    height: auto;
+    margin: auto;
+    max-width: 100%;
+}
diff --git a/main/inc/lib/social.lib.php b/main/inc/lib/social.lib.php
index e5ade7042b..e04f50f292 100755
--- a/main/inc/lib/social.lib.php
+++ b/main/inc/lib/social.lib.php
@@ -618,7 +618,7 @@ class SocialManager extends UserManager
 
             //--- User image
             if ($img_array['file'] != 'unknown.jpg') {
-                $html .= '<a class="ajax" href="'.$big_image.'"><img class="img-responsive" src='.$normal_image.' /> </a>';
+                $html .= '<a class="expand-image" href="'.$big_image.'"><img class="img-responsive" src='.$normal_image.' /> </a>';
             } else {
                 $html .= '<img src='.$normal_image.' width="110px" />';
             }
diff --git a/main/template/default/layout/footer.tpl b/main/template/default/layout/footer.tpl
index d09cec513e..ce216d795a 100755
--- a/main/template/default/layout/footer.tpl
+++ b/main/template/default/layout/footer.tpl
@@ -60,6 +60,19 @@
 {# Extra footer configured in admin section, only shown to non-admins #}
 {{ footer_extra_content }}
 
+<div class="modal fade" id="expand-image-modal" tabindex="-1" role="dialog" aria-labelledby="expand-image-modal-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="expand-image-modal-title">&nbsp;</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
     $("form").on("click", ' .advanced_parameters', function() {
         var id = $(this).attr('id') + '_options';
diff --git a/main/template/default/layout/head.tpl b/main/template/default/layout/head.tpl
index feaa097b56..cb80a761f9 100755
--- a/main/template/default/layout/head.tpl
+++ b/main/template/default/layout/head.tpl
@@ -409,6 +409,27 @@ $(function() {
         return false;
     });
 
+    $('a.expand-image').on('click', function(e) {
+        e.preventDefault();
+
+        var title = $(this).attr('title');
+
+        var image = new Image();
+        image.onload = function() {
+            if (title) {
+                $('#expand-image-modal').find('.modal-title').text(title);
+            } else {
+                $('#expand-image-modal').find('.modal-title').html('&nbsp;');
+            }
+
+            $('#expand-image-modal').find('.modal-body').html(image);
+            $('#expand-image-modal').modal({
+                show: true
+            });
+        };
+        image.src = this.href;
+    });
+
     // Global confirmation
     $('.popup-confirmation').on('click', function() {
         showConfirmationPopup(this);