GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

Profile avatar settings

This commit is contained in:
sarven 2009-01-21 20:33:37 +00:00
parent ac1cc954ae
commit 41f74218f2
4 changed files with 59 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
actions/avatarsettings.php
View File

@ -37,12 +37,13 @@ require_once INSTALLDIR.'/lib/accountsettingsaction.php';
/** /**
* Upload an avatar * 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 * @category Settings
* @package Laconica * @package Laconica
* @author Evan Prodromou <evan@controlyourself.ca> * @author Evan Prodromou <evan@controlyourself.ca>
* @author Zach Copley <zach@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 * @license http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
* @link http://laconi.ca/ * @link http://laconi.ca/
*/ */
@ -94,42 +95,43 @@ class AvatarsettingsAction extends AccountSettingsAction
$original = $profile->getOriginalAvatar(); $original = $profile->getOriginalAvatar();
$this->elementStart('form', array('enctype' => 'multipart/form-data', $this->elementStart('form', array('enctype' => 'multipart/form-data',
'method' => 'POST', 'method' => 'post',
'id' => 'avatar', 'id' => 'form_settings_avatar',
'class' => 'form_settings',
'action' => 'action' =>
common_local_url('avatarsettings'))); common_local_url('avatarsettings')));
$this->elementStart('fieldset');
$this->element('legend', null, _('Avatar settings'));
$this->hidden('token', common_session_token()); $this->hidden('token', common_session_token());
$this->elementStart('ul', 'form_data');
if ($original) { if ($original) {
$this->elementStart('div', $this->elementStart('li',
array('id' => 'avatar_original', array('id' => 'avatar_original',
'class' => 'avatar_view')); 'class' => 'avatar_view'));
$this->element('h3', null, _("Original:")); $this->element('h2', null, _("Original"));
$this->elementStart('div', array('id'=>'avatar_original_view')); $this->elementStart('div', array('id'=>'avatar_original_view'));
$this->element('img', array('src' => $original->url, $this->element('img', array('src' => $original->url,
'class' => 'avatar original',
'width' => $original->width, 'width' => $original->width,
'height' => $original->height, 'height' => $original->height,
'alt' => $user->nickname)); 'alt' => $user->nickname));
$this->elementEnd('div'); $this->elementEnd('div');
$this->elementEnd('div'); $this->elementEnd('li');
} }
$avatar = $profile->getAvatar(AVATAR_PROFILE_SIZE); $avatar = $profile->getAvatar(AVATAR_PROFILE_SIZE);
if ($avatar) { if ($avatar) {
$this->elementStart('div', $this->elementStart('li',
array('id' => 'avatar_preview', array('id' => 'avatar_preview',
'class' => 'avatar_view')); 'class' => 'avatar_view'));
$this->element('h3', null, _("Preview:")); $this->element('h2', null, _("Preview"));
$this->elementStart('div', array('id'=>'avatar_preview_view')); $this->elementStart('div', array('id'=>'avatar_preview_view'));
$this->element('img', array('src' => $original->url,//$avatar->url, $this->element('img', array('src' => $original->url,//$avatar->url,
'class' => 'avatar profile',
'width' => AVATAR_PROFILE_SIZE, 'width' => AVATAR_PROFILE_SIZE,
'height' => AVATAR_PROFILE_SIZE, 'height' => AVATAR_PROFILE_SIZE,
'alt' => $user->nickname)); 'alt' => $user->nickname));
$this->elementEnd('div'); $this->elementEnd('div');
$this->elementEnd('div');
foreach (array('avatar_crop_x', 'avatar_crop_y', foreach (array('avatar_crop_x', 'avatar_crop_y',
'avatar_crop_w', 'avatar_crop_h') as $crop_info) { 'avatar_crop_w', 'avatar_crop_h') as $crop_info) {
@ -138,21 +140,28 @@ class AvatarsettingsAction extends AccountSettingsAction
'id' => $crop_info)); 'id' => $crop_info));
} }
$this->submit('crop', _('Crop')); $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', $this->element('input', array('name' => 'MAX_FILE_SIZE',
'type' => 'hidden', 'type' => 'hidden',
'id' => 'MAX_FILE_SIZE', 'id' => 'MAX_FILE_SIZE',
'value' => MAX_AVATAR_SIZE)); 'value' => MAX_AVATAR_SIZE));
$this->elementEnd('li');
$this->elementEnd('ul');
$this->elementStart('p'); $this->elementStart('ul', 'form_actions');
$this->elementStart('li');
$this->element('input', array('name' => 'avatarfile',
'type' => 'file',
'id' => 'avatarfile'));
$this->elementEnd('p');
$this->submit('upload', _('Upload')); $this->submit('upload', _('Upload'));
$this->elementEnd('li');
$this->elementEnd('ul');
$this->elementEnd('fieldset');
$this->elementEnd('form'); $this->elementEnd('form');
} }
@ -277,7 +286,7 @@ class AvatarsettingsAction extends AccountSettingsAction
{ {
parent::showStylesheets(); parent::showStylesheets();
$jcropStyle = $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', $this->element('link', array('rel' => 'stylesheet',
'type' => 'text/css', 'type' => 'text/css',

20
js/jquery.Jcrop.go.js → js/jcrop/jquery.Jcrop.go.js
View File

@ -1,7 +1,7 @@
$(function(){ $(function(){
jQuery("#photo_original img").Jcrop({ jQuery("#avatar_original img").Jcrop({
onChange: showPreview, 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, onSelect: updateCoords,
aspectRatio: 1, aspectRatio: 1,
boxWidth: 480, boxWidth: 480,
@ -15,10 +15,10 @@
var rx = 96 / coords.w; var rx = 96 / coords.w;
var ry = 96 / coords.h; var ry = 96 / coords.h;
var img_width = $("#photo_original img").attr("width"); var img_width = $("#avatar_original img").attr("width");
var img_height = $("#photo_original img").attr("height"); var img_height = $("#avatar_original img").attr("height");
$('#photo_preview img').css({ $('#avatar_preview img').css({
width: Math.round(rx *img_width) + 'px', width: Math.round(rx *img_width) + 'px',
height: Math.round(ry * img_height) + 'px', height: Math.round(ry * img_height) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginLeft: '-' + Math.round(rx * coords.x) + 'px',
@ -27,14 +27,14 @@
}; };
function updateCoords(c) { function updateCoords(c) {
$('#photo_crop_x').val(c.x); $('#avatar_crop_x').val(c.x);
$('#photo_crop_y').val(c.y); $('#avatar_crop_y').val(c.y);
$('#photo_crop_w').val(c.w); $('#avatar_crop_w').val(c.w);
$('#photo_crop_h').val(c.h); $('#avatar_crop_h').val(c.h);
}; };
function checkCoords() { 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.'); alert('Please select a crop region then press submit.');
return false; return false;
}; };

0
js/jquery.Jcrop.pack.js → js/jcrop/jquery.Jcrop.pack.js
View File

28
theme/base/css/display.css
View File

@ -148,7 +148,8 @@ font-weight:bold;
#form_settings_profile legend, #form_settings_profile legend,
#form_login legend, #form_login legend,
#form_register legend, #form_register legend,
#form_password legend { #form_password legend,
#form_settings_avatar legend {
display:none; display:none;
} }
@ -1161,21 +1162,34 @@ clear:both;
#form_settings_avatar li {
#photo_original, width:auto;
#photo_preview { }
#form_settings_avatar input {
margin-left:0;
}
#avatar_original,
#avatar_preview {
float:left; float:left;
} }
#photo_preview, #avatar_preview {
#settings_photo_action-crop {
margin-left:29px; margin-left:29px;
} }
#photo_preview_view { #avatar_preview_view {
height:96px; height:96px;
width:96px; width:96px;
margin-bottom:18px;
overflow:hidden; overflow:hidden;
} }
#settings_attach,
#form_settings_avatar .form_actions {
clear:both;
}
#form_settings_avatar .form_actions {
margin-bottom:0;
}