2 files changed, 46 insertions, 27 deletions

diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl
index 39e3318b9..6744f6f69 100644
--- a/admin/themes/default/template/user_list.tpl
+++ b/admin/themes/default/template/user_list.tpl
@@ -1,3 +1,4 @@
+{include file='include/colorbox.inc.tpl'}
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 
 {combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'}
@@ -274,7 +275,7 @@ jQuery(document).ready(function() {
             jQuery("script.userDetails").html()
 		      );
           
-          jQuery("#user"+userId).append(template(user));
+          jQuery("#user"+userId).html(template(user));
 
           /* groups select */
           jQuery('[data-selectize=groups]').selectize({
@@ -339,10 +340,19 @@ jQuery(document).ready(function() {
         console.log('technical error loading user details');
       }
     });
-  
-    return '<div id="user'+userId+'" class="userProperties"><img class="loading" src="themes/default/images/ajax-loader-small.gif"></div>';
+
+    jQuery(".user_form_popin")
+      .attr("id", "user"+userId)
+      .html('<div class="popinWait"><span><img class="loading" src="themes/default/images/ajax-loader-small.gif"> {/literal}{'Loading...'|translate|escape:'javascript'}{literal}</span></div>')
+    ;
   }
 
+jQuery(document).on('click', '.close-user-details',  function(e) {
+  jQuery('.user_form_popin').colorbox.close();
+  e.preventDefault();
+});
+
+
   /* change password */
   jQuery(document).on('click', '.changePasswordOpen',  function() {
     var userId = jQuery(this).parentsUntil('form').parent().find('input[name=user_id]').val();
@@ -474,7 +484,7 @@ jQuery(document).ready(function() {
         jQuery('#user'+userId+' .userDelete .loading').show();
       },
       success:function(data) {
-        oTable.fnDraw();
+        jQuery('.user_form_popin').colorbox.close();
         jQuery('#showAddUser .infos').html('&#x2714; User '+username+' deleted').show();
       },
       error:function(XMLHttpRequest, textStatus, errorThrows) {
@@ -537,28 +547,17 @@ jQuery(document).ready(function() {
    */
   jQuery(document).on('click', '#userList tbody td .openUserDetails',  function() {
     var nTr = this.parentNode.parentNode;
-    if (jQuery(this).hasClass('icon-cancel-circled')) {
-      /* This row is already open - close it */
-      jQuery(this)
-        .removeClass('icon-cancel-circled')
-        .addClass('icon-pencil')
-        .attr('title', "{/literal}{'Open user details'|translate|escape:'javascript'}{literal}")
-        .html("{/literal}{'edit'|translate|escape:'javascript'}{literal}")
-      ;
-
-      oTable.fnClose( nTr );
-    }
-    else {
-      /* Open this row */
-      jQuery(this)
-        .removeClass('icon-pencil')
-        .addClass('icon-cancel-circled')
-        .attr('title', "{/literal}{'Close user details'|translate|escape:'javascript'}{literal}")
-        .html("{/literal}{'close'|translate|escape:'javascript'}{literal}")
-      ;
-
-      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
-    }
+
+    jQuery.colorbox({
+      inline:true,
+      title:"{/literal}{'Edit user'|translate}{literal}",
+      href:".user_form_popin",
+      onClosed: function() {
+        oTable.fnDraw();
+      }
+    });
+
+    fnFormatDetails(oTable, nTr);
   });
 
 
@@ -1153,7 +1152,12 @@ span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border
 
   <span class="infos propertiesUpdateDone" style="display:none">&#x2714; <%- user.updateString %></span>
    
-  <input type="submit" value="{'Update user'|translate|escape:html}" style="display:none;" data-user_id="<%- user.id %>">
+  <input type="submit" value="{'Update user'|translate|escape:html}" data-user_id="<%- user.id %>">
   <img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none">
+  <a href="#close" class="icon-cancel-circled close-user-details" title="{'Close user details'|translate}">{'close'|translate}</a>
 </form>
 </script>
+
+<div style="display:none">
+  <div class="user_form_popin userProperties"></div>
+</div>
\ No newline at end of file
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 509aff377..0aa0dba1a 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1228,6 +1228,21 @@ a.group_perm {
 .userProperty {width:340px;float:left;margin-bottom:15px;}
 .userActions {float:right;text-align:right;}
 
+.user_form_popin {
+  width:750px;
+  height:430px;
+  padding:20px;
+}
+
+.userProperties form {
+  text-align:left;
+}
+
+.popinWait {
+  padding-top:200px;
+}
+
+
 .preview-box.icon-zoom-in {
   display:block;
   position:relative;