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

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:
Morris Jobke 2015-04-20 14:27:58 +02:00
parent 596bc3bab2
commit aa2b008577
3 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
settings/css/settings.css
View File

@ -194,6 +194,14 @@ span.usersLastLoginTooltip { white-space: nowrap; }
color: #000000; 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.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; } 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 { td.remove {

33
settings/js/users/users.js
View File

@ -728,31 +728,46 @@ $(document).ready(function () {
var mailAddress = escapeHTML(UserList.getMailAddress($td)); var mailAddress = escapeHTML(UserList.getMailAddress($td));
var $input = $('<input type="text">').val(mailAddress); var $input = $('<input type="text">').val(mailAddress);
$td.children('span').replaceWith($input); $td.children('span').replaceWith($input);
$td.find('img').hide();
$input $input
.focus() .focus()
.keypress(function (event) { .keypress(function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
$tr.data('mailAddress', $input.val()); // enter key
$input.blur();
var mailAddress = $input.val();
$td.find('.loading-small').css('display', 'inline-block');
$input.css('padding-right', '26px');
$input.attr('disabled', 'disabled');
$.ajax({ $.ajax({
type: 'PUT', type: 'PUT',
url: OC.generateUrl('/settings/users/{id}/mailAddress', {id: uid}), url: OC.generateUrl('/settings/users/{id}/mailAddress', {id: uid}),
data: { data: {
mailAddress: $(this).val() mailAddress: $(this).val()
} }
}).fail(function (result) { }).success(function () {
OC.Notification.show(result.responseJSON.data.message); // set data attribute to new value
// reset the values // will in blur() be used to show the text instead of the input field
$tr.data('mailAddress', mailAddress); $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 () { .blur(function () {
var mailAddress = $tr.data('mailAddress'); if($td.find('.loading-small').css('display') === 'inline-block') {
var $span = $('<span>').text(mailAddress); // in Chrome the blur event is fired too early by the browser - even if the request is still running
$tr.data('mailAddress', mailAddress); return;
}
var $span = $('<span>').text($tr.data('mailAddress'));
$input.replaceWith($span); $input.replaceWith($span);
$td.find('img').show();
}); });
}); });

2
settings/templates/users/part.userlist.php
View File

@ -34,7 +34,7 @@
src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>" 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"))?>"/> alt="<?php p($l->t("set new password"))?>" title="<?php p($l->t("set new password"))?>"/>
</td> </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'))?>" 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'))?>"/> alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
</td> </td>