wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1828 from nextcloud/avatar-picker-improvements

Browse source 
Avatar picker improvements
This commit is contained in:
Morris Jobke 2016-10-24 16:33:18 +02:00 committed by GitHub
commit cfae91ab64
3 changed files with 57 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
settings/css/settings.css
View file

@ -30,9 +30,37 @@ input#openid, input#webdav { width:20em; }
}
#avatar #cropper {
float: left;
background-color: #fff;
z-index: 500;
position: relative;
/* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
position: fixed;
background-color: rgba(0, 0, 0, .2);
box-sizing: border-box;
top: 45px;
left: 0;
width: 100%;
height: calc(100% - 45px);
}
#avatar #cropper .inner-container {
z-index: 2001; /* above the top bar if needed */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
color: #333;
border-radius: 3px;
box-shadow: 0 0 7px #888;
padding: 15px;
}
#avatar #cropper .inner-container .jcrop-holder {
box-shadow: 0 0 7px #888;
}
#avatar #cropper .inner-container .button {
margin-top: 15px;
}
#avatar #cropper .inner-container .primary {
float: right;
}
#displaynameform,

34
settings/js/personal.js
View file

@ -112,7 +112,10 @@ function updateAvatar (hidedefault) {
$('#header .avatardiv').addClass('avatardiv-shown');
}
$displaydiv.css({'background-color': ''});
$displaydiv.avatar(OC.currentUser, 145, true);
$displaydiv.avatar(OC.currentUser, 145, true, null, function() {
$displaydiv.removeClass('loading');
$('#displayavatar img').show();
});
$.get(OC.generateUrl(
'/avatar/{user}/{size}',
{
@ -129,24 +132,27 @@ function updateAvatar (hidedefault) {
function showAvatarCropper () {
var $cropper = $('#cropper');
$cropper.prepend("<img>");
var $cropperImage = $('#cropper img');
var $cropperImage = $('<img/>');
$cropperImage.css('opacity', 0); // prevent showing the unresized image
$cropper.children('.inner-container').prepend($cropperImage);
$cropperImage.attr('src',
OC.generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(oc_requesttoken) + '#' + Math.floor(Math.random() * 1000));
// Looks weird, but on('load', ...) doesn't work in IE8
$cropperImage.ready(function () {
$('#displayavatar').hide();
$cropper.show();
$cropperImage.load(function () {
var img = $cropperImage.get()[0];
var selectSize = Math.min(img.width, img.height);
var offsetX = (img.width - selectSize) / 2;
var offsetY = (img.height - selectSize) / 2;
$cropperImage.Jcrop({
onChange: saveCoords,
onSelect: saveCoords,
aspectRatio: 1,
boxHeight: 500,
boxWidth: 500,
setSelect: [0, 0, 300, 300]
boxHeight: Math.min(500, $('#app-content').height() -100),
boxWidth: Math.min(500, $('#app-content').width()),
setSelect: [offsetX, offsetY, selectSize, selectSize]
}, function() {
$cropper.show();
});
});
}
@ -293,6 +299,8 @@ $(document).ready(function () {
avatarResponseHandler(response);
},
submit: function(e, data) {
$('#displayavatar img').hide();
$('#displayavatar .avatardiv').addClass('loading');
data.formData = _.extend(data.formData || {}, {
requesttoken: OC.requestToken
});
@ -319,6 +327,8 @@ $(document).ready(function () {
OC.dialogs.filepicker(
t('settings', "Select a profile picture"),
function (path) {
$('#displayavatar img').hide();
$('#displayavatar .avatardiv').addClass('loading');
$.ajax({
type: "POST",
url: OC.generateUrl('/avatar/'),
@ -356,6 +366,8 @@ $(document).ready(function () {
});
$('#abortcropperbutton').click(function () {
$('#displayavatar .avatardiv').removeClass('loading');
$('#displayavatar img').show();
cleanCropper();
});

6
settings/templates/personal.php
View file

@ -50,8 +50,10 @@
</div>
<div id="cropper" class="hidden">
<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
<div class="inner-container">
<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
</div>
</div>
</form>
<?php endif; ?>