pulling the avatar code out of the profile plugin - just some minor icon related code left

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

5 files changed, 82 insertions, 13 deletions

diff --git a/views/default/core/avatar/crop.php b/views/default/core/avatar/crop.php
new file mode 100644
index 000000000..499e2af4e
--- /dev/null
+++ b/views/default/core/avatar/crop.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Avatar cropping view
+ *
+ * @uses vars['entity']
+ */
+
+?>
+<div id="avatar-croppingtool">
+	<label><?php echo elgg_echo('avatar:crop:title'); ?></label>
+	<br />
+	<p>
+		<?php echo elgg_echo("avatar:create:instructions"); ?>
+	</p>
+	<?php echo elgg_view_form('avatar/crop', array(), $vars); ?>
+</div>
diff --git a/views/default/core/avatar/upload.php b/views/default/core/avatar/upload.php
new file mode 100644
index 000000000..8d920a900
--- /dev/null
+++ b/views/default/core/avatar/upload.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Avatar upload view
+ *
+ * @uses $vars['entity']
+ */
+
+$user_avatar = $vars['entity']->getIcon('medium');
+
+?>
+
+<p class="mtm">
+	<?php echo elgg_echo('avatar:upload:instructions'); ?>
+</p>
+
+<div id="current-user-avatar">
+	<label><?php echo elgg_echo('avatar:current'); ?></label>
+	<?php echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />"; ?>
+</div>
+
+<div id="avatar-upload">
+<?php
+	$form_params = array('enctype' => 'multipart/form-data');
+	echo elgg_view_form('avatar/upload', $form_params, $vars);
+?>
+</div>
diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index e75fea1ec..cbf4e2b2d 100644
--- a/views/default/css/screen.php
+++ b/views/default/css/screen.php
@@ -107,6 +107,36 @@ echo elgg_view('css/elements/skin', $vars);
 }
 
 /* ***************************************
+	AVATAR
+*************************************** */
+#avatar-upload {
+	height:145px;
+}
+#current-user-avatar {
+	float:left;
+	width:160px;
+	height:130px;
+	border-right:1px solid #cccccc;
+	margin:0 20px 0 0;
+}
+#avatar-croppingtool {
+	border-top: 1px solid #cccccc;
+	margin:20px 0 0 0;
+	padding:10px 0 0 0;
+}
+#user-avatar {
+	float: left;
+	margin-right: 20px;
+}
+#user-avatar-preview {
+	float: left;
+	position: relative;
+	overflow: hidden;
+	width: 100px;
+	height: 100px;
+}
+
+/* ***************************************
 	WIDGETS
 *************************************** */
 .widget-column {
diff --git a/views/default/forms/avatar/crop.php b/views/default/forms/avatar/crop.php
index 1082ab803..856546020 100644
--- a/views/default/forms/avatar/crop.php
+++ b/views/default/forms/avatar/crop.php
@@ -9,10 +9,7 @@ $master_image = $vars['entity']->getIcon('master');
 
 ?>
 <p>
-	<?php echo elgg_echo("avatar:create:instructions"); ?>
-</p>
-<p>
-	<img id="user_avatar" src="<?php echo $master_image; ?>" alt="<?php echo elgg_echo('avatar'); ?>" />
+	<img id="user-avatar" src="<?php echo $master_image; ?>" alt="<?php echo elgg_echo('avatar'); ?>" />
 </p>
 
 <div class="clearfloat"></div>
@@ -28,7 +25,7 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 
 ?>
 <!-- grab the required js for icon cropping -->
-<script type="text/javascript" src="<?php echo elgg_get_site_url(); ?>mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js"></script>
+<script type="text/javascript" src="<?php echo elgg_get_site_url(); ?>vendors/jquery/jquery.imgareaselect-0.8.min.js"></script>
 
 <script type="text/javascript">
 
@@ -39,11 +36,11 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 			return;
 		}
 
-		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 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_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',
@@ -60,12 +57,12 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 	}
 
 	$(document).ready(function() {
-		$('<div id="user_avatar_preview"><img src="<?php echo $master_image; ?>" /></div>').insertAfter($('#user_avatar'));
-        $('<div id="user_avatar_preview_title"><label><?php echo elgg_echo('avatar:preview'); ?></label></div>').insertBefore($('#user_avatar_preview'));
+		$('<div id="user-avatar-preview"><img src="<?php echo $master_image; ?>" /></div>').insertAfter($('#user-avatar'));
+        $('<div id="user-avatar-preview-title"><label><?php echo elgg_echo('avatar:preview'); ?></label></div>').insertBefore($('#user-avatar-preview'));
 
 		// this produces the coordinates
-		$('#user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
+		$('#user-avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
 		// show the preview
-		$('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
+		$('#user-avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
 	});
 </script>
diff --git a/views/default/forms/avatar/upload.php b/views/default/forms/avatar/upload.php
index 733e2996c..4354d691a 100644
--- a/views/default/forms/avatar/upload.php
+++ b/views/default/forms/avatar/upload.php
@@ -8,7 +8,7 @@
 echo elgg_view('input/hidden', array('internalname' => 'guid', 'value' => $vars['entity']->guid));
 ?>
 <p>
-	<label><?php echo elgg_echo("profile:editicon"); ?></label><br />
+	<label><?php echo elgg_echo("avatar:upload"); ?></label><br />
 	<?php echo elgg_view("input/file",array('internalname' => 'avatar')); ?>
 <br />
 	<?php echo elgg_view('input/submit', array('value' => elgg_echo('upload'))); ?>