aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--mod/profile/views/default/profile/css.php16
-rw-r--r--mod/profile/views/default/profile/edit.php2
-rw-r--r--mod/profile/views/default/profile/editicon.php70
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>
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-28 11:28:46 +0000