Profile avatar settings

4 files changed, 59 insertions, 36 deletions

diff --git a/actions/avatarsettings.php b/actions/avatarsettings.php
index a9b381b0a..ffbeb5486 100644
--- a/actions/avatarsettings.php
+++ b/actions/avatarsettings.php
@@ -37,12 +37,13 @@ require_once INSTALLDIR.'/lib/accountsettingsaction.php';
 /**
  * Upload an avatar
  *
- * We use jQuery to crop the image after upload.
+ * We use jCrop plugin for jQuery to crop the image after upload.
  *
  * @category Settings
  * @package  Laconica
  * @author   Evan Prodromou <evan@controlyourself.ca>
  * @author   Zach Copley <zach@controlyourself.ca>
+ * @author   Sarven Capadisli <csarven@controlyourself.ca>
  * @license  http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
  * @link     http://laconi.ca/
  */
@@ -94,42 +95,43 @@ class AvatarsettingsAction extends AccountSettingsAction
         $original = $profile->getOriginalAvatar();
 
         $this->elementStart('form', array('enctype' => 'multipart/form-data',
-                                          'method' => 'POST',
-                                          'id' => 'avatar',
+                                          'method' => 'post',
+                                          'id' => 'form_settings_avatar',
+                                          'class' => 'form_settings',
                                           'action' =>
                                           common_local_url('avatarsettings')));
+        $this->elementStart('fieldset');
+        $this->element('legend', null, _('Avatar settings'));
         $this->hidden('token', common_session_token());
 
+        $this->elementStart('ul', 'form_data');
         if ($original) {
-            $this->elementStart('div',
+            $this->elementStart('li',
                                 array('id' => 'avatar_original',
                                       'class' => 'avatar_view'));
-            $this->element('h3', null, _("Original:"));
+            $this->element('h2', null, _("Original"));
             $this->elementStart('div', array('id'=>'avatar_original_view'));
             $this->element('img', array('src' => $original->url,
-                                        'class' => 'avatar original',
                                         'width' => $original->width,
                                         'height' => $original->height,
                                         'alt' => $user->nickname));
             $this->elementEnd('div');
-            $this->elementEnd('div');
+            $this->elementEnd('li');
         }
 
         $avatar = $profile->getAvatar(AVATAR_PROFILE_SIZE);
 
         if ($avatar) {
-            $this->elementStart('div',
+            $this->elementStart('li',
                                 array('id' => 'avatar_preview',
                                       'class' => 'avatar_view'));
-            $this->element('h3', null, _("Preview:"));
+            $this->element('h2', null, _("Preview"));
             $this->elementStart('div', array('id'=>'avatar_preview_view'));
             $this->element('img', array('src' => $original->url,//$avatar->url,
-                                        'class' => 'avatar profile',
                                         'width' => AVATAR_PROFILE_SIZE,
                                         'height' => AVATAR_PROFILE_SIZE,
                                         'alt' => $user->nickname));
             $this->elementEnd('div');
-            $this->elementEnd('div');
 
             foreach (array('avatar_crop_x', 'avatar_crop_y',
                            'avatar_crop_w', 'avatar_crop_h') as $crop_info) {
@@ -138,21 +140,28 @@ class AvatarsettingsAction extends AccountSettingsAction
                                               'id' => $crop_info));
             }
             $this->submit('crop', _('Crop'));
+
+            $this->elementEnd('li');
         }
 
+        $this->elementStart('li', array ('id' => 'settings_attach'));
+        $this->element('input', array('name' => 'avatarfile',
+                                      'type' => 'file',
+                                      'id' => 'avatarfile'));
         $this->element('input', array('name' => 'MAX_FILE_SIZE',
                                       'type' => 'hidden',
                                       'id' => 'MAX_FILE_SIZE',
                                       'value' => MAX_AVATAR_SIZE));
+        $this->elementEnd('li');
+        $this->elementEnd('ul');
 
-        $this->elementStart('p');
-
-        $this->element('input', array('name' => 'avatarfile',
-                                      'type' => 'file',
-                                      'id' => 'avatarfile'));
-        $this->elementEnd('p');
-
+        $this->elementStart('ul', 'form_actions');
+        $this->elementStart('li');
         $this->submit('upload', _('Upload'));
+        $this->elementEnd('li');
+        $this->elementEnd('ul');
+
+        $this->elementEnd('fieldset');
         $this->elementEnd('form');
 
     }
@@ -277,7 +286,7 @@ class AvatarsettingsAction extends AccountSettingsAction
     {
         parent::showStylesheets();
         $jcropStyle =
-          common_path('js/jcrop/jquery.Jcrop.css?version='.LACONICA_VERSION);
+          common_path('theme/base/css/jquery.Jcrop.css?version='.LACONICA_VERSION);
 
         $this->element('link', array('rel' => 'stylesheet',
                                      'type' => 'text/css',
diff --git a/js/jquery.Jcrop.go.js b/js/jcrop/jquery.Jcrop.go.js
index e5d587354..d5176c14c 100644
--- a/js/jquery.Jcrop.go.js
+++ b/js/jcrop/jquery.Jcrop.go.js
@@ -1,7 +1,7 @@
 		$(function(){
-			jQuery("#photo_original img").Jcrop({
+			jQuery("#avatar_original img").Jcrop({
 				onChange: showPreview,
-				setSelect: [ 0, 0, $("#photo_original img").attr("width"), $("#photo_original img").attr("height") ],
+				setSelect: [ 0, 0, $("#avatar_original img").attr("width"), $("#avatar_original img").attr("height") ],
 				onSelect: updateCoords,
 				aspectRatio: 1,
 				boxWidth: 480,
@@ -15,10 +15,10 @@
 			var rx = 96 / coords.w;
 			var ry = 96 / coords.h;
 
-			var img_width = $("#photo_original img").attr("width");
-			var img_height = $("#photo_original img").attr("height");
+			var img_width = $("#avatar_original img").attr("width");
+			var img_height = $("#avatar_original img").attr("height");
 
-			$('#photo_preview img').css({
+			$('#avatar_preview img').css({
 				width: Math.round(rx *img_width) + 'px',
 				height: Math.round(ry * img_height) + 'px',
 				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
@@ -27,14 +27,14 @@
 		};
 
 		function updateCoords(c) {
-			$('#photo_crop_x').val(c.x);
-			$('#photo_crop_y').val(c.y);
-			$('#photo_crop_w').val(c.w);
-			$('#photo_crop_h').val(c.h);
+			$('#avatar_crop_x').val(c.x);
+			$('#avatar_crop_y').val(c.y);
+			$('#avatar_crop_w').val(c.w);
+			$('#avatar_crop_h').val(c.h);
 		};
 
 		function checkCoords() {
-			if (parseInt($('#photo_crop_w').val())) return true;
+			if (parseInt($('#avatar_crop_w').val())) return true;
 			alert('Please select a crop region then press submit.');
 			return false;
 		};
diff --git a/js/jquery.Jcrop.pack.js b/js/jcrop/jquery.Jcrop.pack.js
index aa82e8abe..aa82e8abe 100644
--- a/js/jquery.Jcrop.pack.js
+++ b/js/jcrop/jquery.Jcrop.pack.js
diff --git a/theme/base/css/display.css b/theme/base/css/display.css
index 18205fceb..cfe445a98 100644
--- a/theme/base/css/display.css
+++ b/theme/base/css/display.css
@@ -148,7 +148,8 @@ font-weight:bold;
 #form_settings_profile legend,
 #form_login legend,
 #form_register legend,
-#form_password legend {
+#form_password legend,
+#form_settings_avatar legend {
 display:none;
 }
 
@@ -1161,21 +1162,34 @@ clear:both;
 
 
 
-
-#photo_original,
-#photo_preview {
+#form_settings_avatar li {
+width:auto;
+}
+#form_settings_avatar input {
+margin-left:0; 
+}
+#avatar_original,
+#avatar_preview {
 float:left;
 }
-#photo_preview,
-#settings_photo_action-crop {
+#avatar_preview {
 margin-left:29px;
 }
-#photo_preview_view {
+#avatar_preview_view {
 height:96px;
 width:96px;
+margin-bottom:18px;
 overflow:hidden;
 }
 
+#settings_attach,
+#form_settings_avatar .form_actions {
+clear:both;
+}
+
+#form_settings_avatar .form_actions {
+margin-bottom:0;
+}