mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix popover position and avatar loading 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-10-04 17:01:03 +02:00
parent 0ce3636fba
commit 4ca88471b0
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
3 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
settings/css/settings.scss
View File

@ -35,12 +35,13 @@ input {
} }
#avatarform { #avatarform {
> h2 {
position: relative;
}
.avatardiv { .avatardiv {
margin: 10px auto; margin: 10px auto;
} }
.federationScopeMenu {
/* popover magic fix */
margin-right: calc(-50% - 7px);
}
.warning { .warning {
width: 100%; width: 100%;
} }
@ -117,11 +118,11 @@ input {
} }
.icon-federation-menu { .icon-federation-menu {
float: right;
padding-left: 16px; padding-left: 16px;
background-size: 16px; background-size: 16px;
background-position: left 8px; background-position: left 8px;
opacity: .3; opacity: .3;
margin-left: 10px;
cursor: pointer; cursor: pointer;
.icon-triangle-s { .icon-triangle-s {
@ -163,12 +164,18 @@ input {
&:after { &:after {
clear: both; clear: both;
} }
> div { &:not(#personal-settings-avatar-container) > div {
float: left; float: left;
width: 300px; width: 300px;
}
> div {
h2 { h2 {
position: relative; position: relative;
margin-bottom: 5px; margin-bottom: 5px;
display: inline-flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
} }
> form span { > form span {
&[class^="icon-checkmark"], &[class^="icon-error"] { &[class^="icon-checkmark"], &[class^="icon-error"] {

3
settings/js/settings/personalInfo.js
View File

@ -128,6 +128,7 @@ function avatarResponseHandler (data) {
var $warning = $('#avatarform .warning'); var $warning = $('#avatarform .warning');
$warning.hide(); $warning.hide();
if (data.status === "success") { if (data.status === "success") {
$('#displayavatar .avatardiv').removeClass('icon-loading');
updateAvatar(); updateAvatar();
} else if (data.data === "notsquare") { } else if (data.data === "notsquare") {
showAvatarCropper(); showAvatarCropper();
@ -302,7 +303,7 @@ $(document).ready(function () {
}, },
submit: function(e, data) { submit: function(e, data) {
$('#displayavatar img').hide(); $('#displayavatar img').hide();
$('#displayavatar .avatardiv').addClass('loading'); $('#displayavatar .avatardiv').addClass('icon-loading');
data.formData = _.extend(data.formData || {}, { data.formData = _.extend(data.formData || {}, {
requesttoken: OC.requestToken requesttoken: OC.requestToken
}); });

64
settings/templates/settings/personal/personal.info.php
View File

@ -66,38 +66,40 @@ vendor_style('jcrop/css/jquery.Jcrop');
</div> </div>
<div id="personal-settings"> <div id="personal-settings">
<div id="personal-settings-avatar-container"> <div id="personal-settings-avatar-container" class="personal-settings-container">
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>"> <div>
<h2> <form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password"> <h2>
<span class="icon-triangle-s"></span> <label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
</span> <span class="icon-triangle-s"></span>
</h2> </span>
<div id="displayavatar"> </h2>
<div class="avatardiv"></div> <div id="displayavatar">
<div class="warning hidden"></div> <div class="avatardiv"></div>
<?php if ($_['avatarChangeSupported']): ?> <div class="warning hidden"></div>
<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label> <?php if ($_['avatarChangeSupported']): ?>
<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div> <label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div> <div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield"> <div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p> <input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
<?php else: ?> <p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
<?php p($l->t('Picture provided by original account')); ?> <?php else: ?>
<?php endif; ?> <?php p($l->t('Picture provided by original account')); ?>
</div> <?php endif; ?>
<div id="cropper" class="hidden">
<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>
</div>
<span class="icon-checkmark hidden"></span> <div id="cropper" class="hidden">
<?php if($_['lookupServerUploadEnabled']) { ?> <div class="inner-container">
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>"> <div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
<?php } ?> <div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
</form> </div>
</div>
<span class="icon-checkmark hidden"></span>
<?php if($_['lookupServerUploadEnabled']) { ?>
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
<?php } ?>
</form>
</div>
</div> </div>
<div class="personal-settings-container"> <div class="personal-settings-container">