Merge pull request #6761 from nextcloud/fix-avatar-loading-state
Fix popover position and avatar loading
This commit is contained in:
John Molakvoæ
GitHub
commit
7a05cf300c
|
|
@ -35,12 +35,13 @@ input {
|
|||
}
|
||||
|
||||
#avatarform {
|
||||
> h2 {
|
||||
position: relative;
|
||||
}
|
||||
.avatardiv {
|
||||
margin: 10px auto;
|
||||
}
|
||||
.federationScopeMenu {
|
||||
/* popover magic fix */
|
||||
margin-right: calc(-50% - 7px);
|
||||
}
|
||||
.warning {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -117,11 +118,11 @@ input {
|
|||
}
|
||||
|
||||
.icon-federation-menu {
|
||||
float: right;
|
||||
padding-left: 16px;
|
||||
background-size: 16px;
|
||||
background-position: left 8px;
|
||||
opacity: .3;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-triangle-s {
|
||||
|
|
@ -163,12 +164,23 @@ input {
|
|||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
> div {
|
||||
&:not(#personal-settings-avatar-container) > div {
|
||||
float: left;
|
||||
width: 300px;
|
||||
}
|
||||
> div {
|
||||
h2 {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
> label {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
> form span {
|
||||
&[class^="icon-checkmark"], &[class^="icon-error"] {
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ function avatarResponseHandler (data) {
|
|||
var $warning = $('#avatarform .warning');
|
||||
$warning.hide();
|
||||
if (data.status === "success") {
|
||||
$('#displayavatar .avatardiv').removeClass('icon-loading');
|
||||
updateAvatar();
|
||||
} else if (data.data === "notsquare") {
|
||||
showAvatarCropper();
|
||||
|
|
@ -302,7 +303,7 @@ $(document).ready(function () {
|
|||
},
|
||||
submit: function(e, data) {
|
||||
$('#displayavatar img').hide();
|
||||
$('#displayavatar .avatardiv').addClass('loading');
|
||||
$('#displayavatar .avatardiv').addClass('icon-loading');
|
||||
data.formData = _.extend(data.formData || {}, {
|
||||
requesttoken: OC.requestToken
|
||||
});
|
||||
|
|
|
|||
|
|
@ -66,38 +66,40 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
</div>
|
||||
|
||||
<div id="personal-settings">
|
||||
<div id="personal-settings-avatar-container">
|
||||
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
|
||||
<h2>
|
||||
<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</h2>
|
||||
<div id="displayavatar">
|
||||
<div class="avatardiv"></div>
|
||||
<div class="warning hidden"></div>
|
||||
<?php if ($_['avatarChangeSupported']): ?>
|
||||
<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
|
||||
<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
|
||||
<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
|
||||
<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
|
||||
<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
|
||||
<?php else: ?>
|
||||
<?php p($l->t('Picture provided by original account')); ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<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 id="personal-settings-avatar-container" class="personal-settings-container">
|
||||
<div>
|
||||
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
|
||||
<h2>
|
||||
<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</h2>
|
||||
<div id="displayavatar">
|
||||
<div class="avatardiv"></div>
|
||||
<div class="warning hidden"></div>
|
||||
<?php if ($_['avatarChangeSupported']): ?>
|
||||
<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
|
||||
<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
|
||||
<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
|
||||
<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
|
||||
<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
|
||||
<?php else: ?>
|
||||
<?php p($l->t('Picture provided by original account')); ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon-checkmark hidden"></span>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
<span class="icon-checkmark hidden"></span>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="personal-settings-container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue