PersonView, FamilyView ui changes #1863

src/FamilyView.php

@@ -186,11 +186,14 @@
       <div class="box box-primary">
         <div class="box-body">
             <div class="image-container">
-                <img data-src="<?= SystemURLs::getRootPath() ?>/api/families/<?= $family->getId() ?>/thumbnail"
-                data-name="<?= $family->getName()?>" alt="" class="initials-image img-circle img-responsive profile-user-img"/>
+                <img data-src="<?= SystemURLs::getRootPath() ?>/api/families/<?= $family->getId() ?>/photo" 
+                data-name="<?= $family->getName()?>" alt="" class="initials-image img-rounded img-responsive profile-user-img profile-family-img"/>
                 <?php if ($bOkToEdit): ?>
                     <div class="after">
                         <div class="buttons">
+                            <a class="hide" id="view-larger-image-btn" href="#" title="<?= gettext("View Photo") ?>">
+                                <i class="fa fa-search-plus"></i>
+                            </a>&nbsp;
                             <a href="#" data-toggle="modal" data-target="#upload-image" title="<?= gettext("Upload Photo") ?>">
                                 <i class="fa fa-camera"></i>
                             </a>&nbsp;
@@ -909,6 +912,7 @@ class="fa fa-cart-plus"></i> <?= gettext("Add All Family Members to Cart") ?></a
 
   <!-- Modal -->
   <div id="photoUploader"></div>
+
   <div class="modal fade" id="confirm-delete-image" tabindex="-1" role="dialog" aria-labelledby="delete-Image-label"
        aria-hidden="true">
     <div class="modal-dialog">
@@ -998,7 +1002,8 @@ class="btn btn-success"><i class="fa fa-check"></i> <?= gettext("Verified In Per
 } ?>
     <script src="<?= SystemURLs::getRootPath() ?>/skin/jquery-photo-uploader/PhotoUploader.js" type="text/javascript"></script>
     <link href="<?= SystemURLs::getRootPath() ?>/skin/jquery-photo-uploader/PhotoUploader.css" rel="stylesheet">
-    <script src="<?= SystemURLs::getRootPath() ?>/skin/js/FamilyView.js"></script>
+    <script src="<?= SystemURLs::getRootPath() ?>/skin/js/FamilyView.js" type="text/javascript"></script>
+    <script src="<?= SystemURLs::getRootPath() ?>/skin/js/MemberView.js" type="text/javascript"></script>
     <script>
         window.CRM.currentFamily = <?= $iFamilyID ?>;
         window.CRM.currentActive = <?= (empty($fam_DateDeactivated) ? 'true' : 'false') ?>;
@@ -1050,14 +1055,29 @@ class="btn btn-success"><i class="fa fa-check"></i> <?= gettext("Verified In Per
             });
 
             window.CRM.photoUploader = $("#photoUploader").PhotoUploader({
-              url: window.CRM.root + "/api/families/<?= $iFamilyID ?>/photo",
+              url: window.CRM.root + "/api/families/" + familyId + "/photo",
               maxPhotoSize: window.CRM.maxUploadSize,
               photoHeight: 400,
               photoWidth: 400,
               done: function(e) {
                 location.reload();
               }
             });
+
+
+        contentExists(window.CRM.root + "/api/families/" + familyId + "/photo", function(success) {
+            if (success) {
+                $("#view-larger-image-btn").removeClass('hide');
+
+                $("#view-larger-image-btn").click(function() {
+                    bootbox.alert({
+                        title: "<?= gettext('Family Photo') ?>",
+                        message: '<img class="img-rounded img-responsive center-block" src="<?= SystemURLs::getRootPath() ?>/api/families/' + familyId + '/photo" />',
+                        backdrop: true
+                    });
+                });
+            }
+        });
 
         });
     </script>

src/PersonView.php

@@ -184,10 +184,14 @@
     <div class="box box-primary">
       <div class="box-body box-profile">
         <div class="image-container">
-            <img  data-name="<?= $person->getFullName()?>" data-src = "<?= SystemURLs::getRootPath().'/api/persons/'.$person->getId().'/thumbnail' ?>" class="initials-image profile-user-img img-responsive img-circle">
+            <img  data-name="<?= $person->getFullName()?>" data-src ="<?= SystemURLs::getRootPath().'/api/persons/'.$person->getId().'/photo' ?>" 
+            class="initials-image profile-user-img img-responsive img-rounded profile-user-img-md">
             <?php if ($bOkToEdit): ?>
                 <div class="after">
                 <div class="buttons">
+                    <a id="view-larger-image-btn" class="hide" href="#" title="<?= gettext("View Photo") ?>">
+                        <i class="fa fa-search-plus"></i>
+                    </a>&nbsp;
                     <a href="#" class="" data-toggle="modal" data-target="#upload-image" title="<?= gettext("Upload Photo") ?>">
                         <i class="fa fa-camera"></i>
                     </a>&nbsp;
@@ -928,6 +932,7 @@ class="form-control select2" style="width:100%" data-placeholder="Select ...">
 </div>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/jquery-photo-uploader/PhotoUploader.js" type="text/javascript"></script>
 <link href="<?= SystemURLs::getRootPath() ?>/skin/jquery-photo-uploader/PhotoUploader.css" rel="stylesheet">
+<script src="<?= SystemURLs::getRootPath() ?>/skin/js/MemberView.js" type="text/javascript"></script>
 <script>
   var person_ID = <?= $iPersonID ?>;
   function GroupRemove(Group, Person) {
@@ -993,6 +998,25 @@ function GroupAdd() {
         };
         $("#assigned-volunteer-opps-table").DataTable(options);
         $("#assigned-properties-table").DataTable(options);
+
+
+        contentExists(window.CRM.root + "/api/persons/" + person_ID + "/photo", function(success) {
+            if (success) {
+                $("#view-larger-image-btn").removeClass('hide');
+
+                $("#view-larger-image-btn").click(function() {
+                    bootbox.alert({
+                        title: "<?= gettext('Photo') ?>",
+                        message: '<img class="img-rounded img-responsive center-block" src="<?= SystemURLs::getRootPath() ?>/api/persons/' + person_ID + '/photo" />',
+                        backdrop: true
+                    });
+                });
+            }
+        });
+
+
+
+
     });
 
 

src/skin/js/MemberView.js

@@ -0,0 +1,14 @@
+function contentExists(contentUrl, callback) {
+    $.ajax({
+        method :"HEAD",
+        url: contentUrl,
+        processData: false,
+        global:false,
+        success: function(data, textStatus, jqXHR){
+            callback(true, data, textStatus, jqXHR);
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+            callback(false, jqXHR, textStatus, errorThrown);
+        }
+    });
+}

src/skin/scss/_imageOverlay.scss

@@ -3,25 +3,27 @@
 }
 .image-container .after {
     position: absolute;
-    top: 0;
-    left: 0;
+    bottom: 0;
+    left: 1px;
     width: 100%;
-    height: 100%;
-    display: none;
+    height: 44px;
+    display: block;
     color: #FFF;
 }
-.image-container:hover .after {
+.image-container:hover .after .buttons {
     display: block;
     background: rgba(0, 0, 0, .6);
 }
 .image-container .after .buttons {
     font-size: 1.7em;
-    position: absolute;
-    top: 40%;
-    height: 40px;
-    width: 100%;
+    width: 80%;
+    max-width: 180px;
     text-align:center;
+    background: rgba(0, 0, 0, .2);
+    margin-left:auto;
+    margin-right:auto;
+    display:block;
 }
 .image-container .after .buttons a {
     color: #EEE;
-}
+}

src/skin/scss/_profileImage.scss

@@ -1,9 +1,15 @@
-.profile-user-img{
+.profile-user-img {
   height:100px;
 }
 
+.profile-family-img, .profile-user-img-md {
+  height:160px;
+  width:200px;
+  border:0;
+}
+
 .user-image{
   height:auto;
   max-width:100%;
   border-radius:50%;
-}
+}