diff options
| author | Robin Appelman <robin@icewind.nl> | 2016-10-20 16:23:54 +0200 |
|---|---|---|
| committer | Robin Appelman <robin@icewind.nl> | 2016-10-20 16:23:54 +0200 |
| commit | 9983b5533a689845d24013d601bf717dd4a302aa (patch) | |
| tree | 2cdc25aa504f4f5771fc0e3df7186468e2538510 /settings | |
| parent | 5a44b70efccca4a5028dee26e09dfd00a9038f53 (diff) | |
| download | nextcloud-server-9983b5533a689845d24013d601bf717dd4a302aa.tar.gz nextcloud-server-9983b5533a689845d24013d601bf717dd4a302aa.zip | |
float the avatar cropper over the page
Signed-off-by: Robin Appelman <robin@icewind.nl>
Diffstat (limited to 'settings')
| -rw-r--r-- | settings/css/settings.css | 34 | ||||
| -rw-r--r-- | settings/js/personal.js | 6 | ||||
| -rw-r--r-- | 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 39f4c28a3a5..632162eafe2 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 9f4a4f377b3..213af93a0fe 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 = $('<img/>'); - $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 b7bb0c8bfc7..ea1c7ba6459 100644 --- a/settings/templates/personal.php +++ b/settings/templates/personal.php @@ -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; ?> |