Profile avatar settings
This commit is contained in:
sarven
parent
ac1cc954ae
commit
41f74218f2
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user