Edit profile icon ui fixed.

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

diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index de7c8b02777861fca2d2fd96cfbdcd3b3b0420e2..dea780ceb14fadb6359b4f252a128ee459c91aa8 100644 (file)
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -250,14 +250,6 @@ p.visit_twitter a {
 }
 
 
-/* ***************************************
-       edit profile page
-*************************************** */
-form#edit_profile {
-       margin-top:10px;
-}
-
-
 /* ***************************************
        user avatar upload & crop page
 *************************************** */
@@ -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 06d7bcfe22996fe2624f47e171a25f086f1029bc..7b918b00074613453cb7d4d442bd58b476aad4d0 100644 (file)
--- 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 20e16b97849d853aef3081df1e631f6c854f0760..4e921bc6bcafdea50c5c940093113e7f86f4ac72 100644 (file)
--- 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>
+