mirror of
https://github.com/nextcloud/server.git
synced 2024-09-01 05:57:11 +02:00
Add loading feedback for email change in user management
* show loading indicator while the request is running * change value after the request succeed - not before and undo maybe wrong changes * move markup to HTML template * show notification temporarily
This commit is contained in:
parent
596bc3bab2
commit
aa2b008577
@ -194,6 +194,14 @@ span.usersLastLoginTooltip { white-space: nowrap; }
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#userlist .mailAddress .loading-small {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -26px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:pointer; }
|
||||
tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; }
|
||||
td.remove {
|
||||
|
@ -728,31 +728,46 @@ $(document).ready(function () {
|
||||
var mailAddress = escapeHTML(UserList.getMailAddress($td));
|
||||
var $input = $('<input type="text">').val(mailAddress);
|
||||
$td.children('span').replaceWith($input);
|
||||
$td.find('img').hide();
|
||||
$input
|
||||
.focus()
|
||||
.keypress(function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
$tr.data('mailAddress', $input.val());
|
||||
$input.blur();
|
||||
// enter key
|
||||
|
||||
var mailAddress = $input.val();
|
||||
$td.find('.loading-small').css('display', 'inline-block');
|
||||
$input.css('padding-right', '26px');
|
||||
$input.attr('disabled', 'disabled');
|
||||
$.ajax({
|
||||
type: 'PUT',
|
||||
url: OC.generateUrl('/settings/users/{id}/mailAddress', {id: uid}),
|
||||
data: {
|
||||
mailAddress: $(this).val()
|
||||
}
|
||||
}).fail(function (result) {
|
||||
OC.Notification.show(result.responseJSON.data.message);
|
||||
// reset the values
|
||||
}).success(function () {
|
||||
// set data attribute to new value
|
||||
// will in blur() be used to show the text instead of the input field
|
||||
$tr.data('mailAddress', mailAddress);
|
||||
$tr.children('.mailAddress').children('span').text(mailAddress);
|
||||
$td.find('.loading-small').css('display', '');
|
||||
$input.removeAttr('disabled')
|
||||
.triggerHandler('blur'); // needed instead of $input.blur() for Firefox
|
||||
}).fail(function (result) {
|
||||
OC.Notification.showTemporary(result.responseJSON.data.message);
|
||||
$td.find('.loading-small').css('display', '');
|
||||
$input.removeAttr('disabled')
|
||||
.css('padding-right', '6px');
|
||||
});
|
||||
}
|
||||
})
|
||||
.blur(function () {
|
||||
var mailAddress = $tr.data('mailAddress');
|
||||
var $span = $('<span>').text(mailAddress);
|
||||
$tr.data('mailAddress', mailAddress);
|
||||
if($td.find('.loading-small').css('display') === 'inline-block') {
|
||||
// in Chrome the blur event is fired too early by the browser - even if the request is still running
|
||||
return;
|
||||
}
|
||||
var $span = $('<span>').text($tr.data('mailAddress'));
|
||||
$input.replaceWith($span);
|
||||
$td.find('img').show();
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -34,7 +34,7 @@
|
||||
src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
|
||||
alt="<?php p($l->t("set new password"))?>" title="<?php p($l->t("set new password"))?>"/>
|
||||
</td>
|
||||
<td class="mailAddress"><span></span> <img class="svg action"
|
||||
<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="svg action"
|
||||
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
|
||||
alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
|
||||
</td>
|
||||
|
Loading…
Reference in New Issue
Block a user