Edit profile icon ui fixed.

git-svn-id: http://code.elgg.org/elgg/trunk@5324 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 51 insertions, 37 deletions

diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index de7c8b027..dea780ceb 100644
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -251,14 +251,6 @@ p.visit_twitter a {
 
 
 /* ***************************************
-	edit profile page
-*************************************** */
-form#edit_profile {
-	margin-top:10px;
-}
-
-
-/* ***************************************
 	user avatar upload & crop page
 *************************************** */
 #avatar_upload {
@@ -276,21 +268,17 @@ form#edit_profile {
 	margin:20px 0 0 0;
 	padding:10px 0 0 0;
 }	
-#avatar_croppingtool .current_user_avatar {
+#user_avatar {
 	float: left;
 	margin-right: 20px;
 }	
-#avatar_croppingtool .user_avatar_crop_preview {
+#user_avatar_preview {
 	float: left;
 	position: relative;
 	overflow: hidden;
 	width: 100px;
 	height: 100px;
 }
-/* @todo fix image cropping */
-#avatar_cropping img.current_user_avatar {
-	max-width:560px;
-}
 
 
 /* ***************************************
diff --git a/mod/profile/views/default/profile/edit.php b/mod/profile/views/default/profile/edit.php
index 06d7bcfe2..7b918b000 100644
--- a/mod/profile/views/default/profile/edit.php
+++ b/mod/profile/views/default/profile/edit.php
@@ -12,7 +12,7 @@
  * @uses $vars['profile'] Profile items from $CONFIG->profile, defined in profile/start.php for now 
  */
 ?>
-<form action="<?php echo $vars['url']; ?>action/profile/edit" method="post" id="edit_profile">
+<form action="<?php echo $vars['url']; ?>action/profile/edit" method="post" id="edit_profile" class="margin_top">
 <?php echo elgg_view('input/securitytoken') ?>
 
 	<p><label>
diff --git a/mod/profile/views/default/profile/editicon.php b/mod/profile/views/default/profile/editicon.php
index 20e16b978..4e921bc6b 100644
--- a/mod/profile/views/default/profile/editicon.php
+++ b/mod/profile/views/default/profile/editicon.php
@@ -18,7 +18,7 @@ $currentuser = $vars['user'];
 <!-- grab the required js for icon cropping -->
 <script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js"></script>
 
-<p><?php echo elgg_echo('profile:profilepictureinstructions'); ?></p>
+<p class="margin_top"><?php echo elgg_echo('profile:profilepictureinstructions'); ?></p>
 
 <div id="current_user_avatar">
 
@@ -26,7 +26,7 @@ $currentuser = $vars['user'];
 	<?php 
 		
 		$user_avatar = $currentuser->getIcon('medium');
-		echo "<img src='{$user_avatar}' alt='avatar' />";
+		echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />";
 
 	?>
 
@@ -51,12 +51,17 @@ $currentuser = $vars['user'];
 <label><?php echo elgg_echo('profile:profilepicturecroppingtool'); ?></label><br />
 <p>	
 <?php
+
     echo elgg_echo("profile:createicon:instructions");
+    
     //display the current user photo
+     
     $user_master_image = $currentuser->getIcon('master');
+    
 ?>
 </p>
 <script type="text/javascript">
+
     //function to display a preview of the users cropped section
     function preview(img, selection) {
 		// catch for the first click on the image
@@ -64,11 +69,11 @@ $currentuser = $vars['user'];
 			return;
 		}
 		
-        var origWidth = $(".current_user_avatar").width(); //get the width of the users master photo
-        var origHeight = $(".current_user_avatar").height(); //get the height of the users master photo
+        var origWidth = $("#user_avatar").width(); //get the width of the users master photo
+        var origHeight = $("#user_avatar").height(); //get the height of the users master photo
         var scaleX = 100 / selection.width; 
         var scaleY = 100 / selection.height; 
-        $('.user_avatar_crop_preview > img').css({ 
+        $('#user_avatar_preview > img').css({ 
             width: Math.round(scaleX * origWidth) + 'px', 
             height: Math.round(scaleY * origHeight) + 'px', 
             marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
@@ -76,34 +81,54 @@ $currentuser = $vars['user'];
          }); 
     } 
         
-    function selectChange(img, selection){
+    //variables for the newly cropped avatar
+    //var $x1, $y1, $x2, $y2, $w, $h;
+        
+        function selectChange(img, selection){
+           
            //populate the form with the correct coordinates once a user has cropped their image
            $('#x_1').val(selection.x1);
            $('#x_2').val(selection.x2);
            $('#y_1').val(selection.y1);
            $('#y_2').val(selection.y2);
-     }     
+           
+         }     
          
-    $(document).ready(function () {
+        $(document).ready(function () {
             
-        $('<div class="user_avatar_crop_preview"><img src="<?php echo $user_master_image; ?>" /></div>') 
-        .insertAfter($('.current_user_avatar'));
-        
-        $('<label><?php echo elgg_echo('profile:preview'); ?></label><br />').insertBefore($('.user_avatar_crop_preview'));
-    }); 
+            //get the coordinates from the form
+            /*
+            var x_1 = $('#x_1').val();
+            var x_2 = $('#x_2').val();
+            var y_1 = $('#y_1').val();
+            var y_2 = $('#y_2').val();
+            var w = x_2 - x_1;
+            var h = y_2 - y_1;
+            selection = { x1: x_1, y1: y_1, x2: x_2, y2: y_2, width: w, height: h };
+            */
+            
+            $('<div id="user_avatar_preview"><img src="<?php echo $user_master_image; ?>" /></div>') 
+            .insertAfter($('#user_avatar'));
+            
+            $('<div id="user_avatar_preview_title"><label><?php echo elgg_echo('profile:preview'); ?></label></div>').insertBefore($('#user_avatar_preview'));
+        }); 
         
-    $(window).load(function () { 
-        //this produces the coordinates
-        $('.current_user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
-        //show the preview
-        $('.current_user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
+        $(window).load(function () { 
+            
+            //this produces the coordinates
+            $('#user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
+            //show the preview
+            $('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
   
-    });
+        });
+ 
 </script>
 
-<div id="avatar_cropping" class="clearfloat">
-	<img class="current_user_avatar" src="<?php echo $user_master_image; ?>" alt="<?php echo elgg_echo("profile:icon"); ?>" />
-</div>
+<p>
+<img id="user_avatar" src="<?php echo $user_master_image; ?>" alt="<?php echo elgg_echo("profile:icon"); ?>" />
+</p>
+
+<div class="clearfloat"></div>
 
 <form action="<?php echo $vars['url']; ?>action/profile/cropicon" method="post" />
 	<?php echo elgg_view('input/securitytoken'); ?>
@@ -116,3 +141,4 @@ $currentuser = $vars['user'];
 </form>
 
 </div>
+