From 41f74218f2ab70b78ba96d386b41fb6a1f958f75 Mon Sep 17 00:00:00 2001 From: sarven Date: Wed, 21 Jan 2009 20:33:37 +0000 Subject: [PATCH] Profile avatar settings --- actions/avatarsettings.php | 47 +++++++++++++++++------------ js/{ => jcrop}/jquery.Jcrop.go.js | 20 ++++++------ js/{ => jcrop}/jquery.Jcrop.pack.js | 0 theme/base/css/display.css | 28 ++++++++++++----- 4 files changed, 59 insertions(+), 36 deletions(-) rename js/{ => jcrop}/jquery.Jcrop.go.js (56%) rename js/{ => jcrop}/jquery.Jcrop.pack.js (100%) diff --git a/actions/avatarsettings.php b/actions/avatarsettings.php index a9b381b0ac..ffbeb54863 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 * @author Zach Copley + * @author Sarven Capadisli * @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 similarity index 56% rename from js/jquery.Jcrop.go.js rename to js/jcrop/jquery.Jcrop.go.js index e5d5873545..d5176c14c2 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 similarity index 100% rename from js/jquery.Jcrop.pack.js rename to js/jcrop/jquery.Jcrop.pack.js diff --git a/theme/base/css/display.css b/theme/base/css/display.css index 18205fcebe..cfe445a98e 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; +}