From 5a44b70efccca4a5028dee26e09dfd00a9038f53 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 20 Oct 2016 15:57:34 +0200 Subject: [PATCH 1/7] Prevent flashing the full sized image when cropping an avatar Signed-off-by: Robin Appelman --- settings/js/personal.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/settings/js/personal.js b/settings/js/personal.js index dbc82758fd..9f4a4f377b 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -129,8 +129,9 @@ function updateAvatar (hidedefault) { function showAvatarCropper () { var $cropper = $('#cropper'); - $cropper.prepend(""); - var $cropperImage = $('#cropper img'); + var $cropperImage = $(''); + $cropperImage.css('opacity', 0); + $cropper.prepend($cropperImage); $cropperImage.attr('src', OC.generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(oc_requesttoken) + '#' + Math.floor(Math.random() * 1000)); @@ -147,6 +148,8 @@ function showAvatarCropper () { boxHeight: 500, boxWidth: 500, setSelect: [0, 0, 300, 300] + }, function() { + $cropperImage.css('opacity', 1); }); }); } From 9983b5533a689845d24013d601bf717dd4a302aa Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 20 Oct 2016 16:23:54 +0200 Subject: [PATCH 2/7] float the avatar cropper over the page Signed-off-by: Robin Appelman --- settings/css/settings.css | 34 +++++++++++++++++++++++++++++++-- settings/js/personal.js | 6 ++---- settings/templates/personal.php | 6 ++++-- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/settings/css/settings.css b/settings/css/settings.css index 39f4c28a3a..632162eafe 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -30,9 +30,39 @@ 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); + /*opacity: .20;*/ + box-sizing: border-box; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding-top: 45px; + text-align: center; +} +#avatar #cropper .inner-container { + display: inline-block; + margin-top: 160px; + margin-left: 30px; + background: #fff; + color: #333; + border-radius: 3px; + box-shadow: 0 0 7px #888; + padding: 15px; + text-align: left; +} + +#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, diff --git a/settings/js/personal.js b/settings/js/personal.js index 9f4a4f377b..213af93a0f 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -130,8 +130,8 @@ function updateAvatar (hidedefault) { function showAvatarCropper () { var $cropper = $('#cropper'); var $cropperImage = $(''); - $cropperImage.css('opacity', 0); - $cropper.prepend($cropperImage); + $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)); @@ -148,8 +148,6 @@ function showAvatarCropper () { boxHeight: 500, boxWidth: 500, setSelect: [0, 0, 300, 300] - }, function() { - $cropperImage.css('opacity', 1); }); }); } diff --git a/settings/templates/personal.php b/settings/templates/personal.php index b7bb0c8bfc..ea1c7ba645 100644 --- a/settings/templates/personal.php +++ b/settings/templates/personal.php @@ -50,8 +50,10 @@ From 154fbe06ce643a727f43ca0c980eaa190a4c919a Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 20 Oct 2016 16:25:11 +0200 Subject: [PATCH 3/7] only show cropper dialog when the cropper is ready Signed-off-by: Robin Appelman --- settings/js/personal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/settings/js/personal.js b/settings/js/personal.js index 213af93a0f..e75f6b9e0f 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -139,7 +139,6 @@ function showAvatarCropper () { // Looks weird, but on('load', ...) doesn't work in IE8 $cropperImage.ready(function () { $('#displayavatar').hide(); - $cropper.show(); $cropperImage.Jcrop({ onChange: saveCoords, @@ -148,6 +147,8 @@ function showAvatarCropper () { boxHeight: 500, boxWidth: 500, setSelect: [0, 0, 300, 300] + }, function() { + $cropper.show(); }); }); } From ac167d4dc633f2087326dac7a28281f429d61af8 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 20 Oct 2016 16:36:03 +0200 Subject: [PATCH 4/7] show spinner while loading/cropping avatar Signed-off-by: Robin Appelman --- settings/js/personal.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/settings/js/personal.js b/settings/js/personal.js index e75f6b9e0f..c5d659e5c8 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -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}', { @@ -138,7 +141,6 @@ function showAvatarCropper () { // Looks weird, but on('load', ...) doesn't work in IE8 $cropperImage.ready(function () { - $('#displayavatar').hide(); $cropperImage.Jcrop({ onChange: saveCoords, @@ -295,6 +297,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 }); @@ -321,6 +325,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/'), @@ -358,6 +364,8 @@ $(document).ready(function () { }); $('#abortcropperbutton').click(function () { + $('#displayavatar .avatardiv').removeClass('loading'); + $('#displayavatar img').show(); cleanCropper(); }); From 55c445ff3917c6caf9baad2fe4db0c56b51c72bb Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 21 Oct 2016 15:08:36 +0200 Subject: [PATCH 5/7] set initial cropper to max size Signed-off-by: Robin Appelman --- settings/js/personal.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/settings/js/personal.js b/settings/js/personal.js index c5d659e5c8..34fffe7ddd 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -139,16 +139,18 @@ function showAvatarCropper () { $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 () { - + $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] + setSelect: [offsetX, offsetY, selectSize, selectSize] }, function() { $cropper.show(); }); From ad902d6bea06ae147db72b8bf5e0dfe5166e9d1c Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 24 Oct 2016 13:54:56 +0200 Subject: [PATCH 6/7] center cropper vertically Signed-off-by: Robin Appelman --- settings/css/settings.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/settings/css/settings.css b/settings/css/settings.css index 632162eafe..2f0f4b2351 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -34,25 +34,23 @@ input#openid, input#webdav { width:20em; } /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ position: fixed; background-color: rgba(0, 0, 0, .2); - /*opacity: .20;*/ box-sizing: border-box; - top: 0; + top: 45px; left: 0; width: 100%; - height: 100%; - padding-top: 45px; - text-align: center; + height: calc(100% - 45px); } #avatar #cropper .inner-container { - display: inline-block; - margin-top: 160px; - margin-left: 30px; + 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; - text-align: left; } #avatar #cropper .inner-container .jcrop-holder { From 0aec8647c2b2323ea5d030ef60b6dddb4d5ee9fd Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 24 Oct 2016 13:56:21 +0200 Subject: [PATCH 7/7] use smaller cropper on small screens Signed-off-by: Robin Appelman --- settings/js/personal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/settings/js/personal.js b/settings/js/personal.js index 34fffe7ddd..ae23782443 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -148,8 +148,8 @@ function showAvatarCropper () { onChange: saveCoords, onSelect: saveCoords, aspectRatio: 1, - boxHeight: 500, - boxWidth: 500, + boxHeight: Math.min(500, $('#app-content').height() -100), + boxWidth: Math.min(500, $('#app-content').width()), setSelect: [offsetX, offsetY, selectSize, selectSize] }, function() { $cropper.show();