diff options
| -rw-r--r-- | css/style.scss | 34 | ||||
| -rw-r--r-- | js/views/callinfoview.js | 17 | ||||
| -rw-r--r-- | js/views/templates.js | 2 | ||||
| -rw-r--r-- | js/views/templates/callinfoview.handlebars | 1 |
4 files changed, 51 insertions, 3 deletions
diff --git a/css/style.scss b/css/style.scss index c816e1cf3..47f21007f 100644 --- a/css/style.scss +++ b/css/style.scss @@ -83,6 +83,9 @@ * It is assumed that the icon will have the standard width for buttons in * inputs of 34px. However, further adjustments may be needed for the input and * the padding depending on the context where they are used. + * + * The confirm icon can have a sibling loading icon to switch to (by hiding one + * icon and showing the other) while the operation is in progress. */ input[type="text"], input[type="password"] { @@ -114,6 +117,32 @@ input[type="password"] { &:active:not(:disabled) { opacity: 1; } + + + .icon-loading-small { + /* Mimic size set in server for confirm button. */ + width: 34px; + height: 34px; + padding: 7px 6px; + margin-top: 3px; + margin-bottom: 3px; + + position: absolute; + top: 0; + right: 3px; + } + } +} + +.menuitem input[type="text"], +.menuitem input[type="password"] { + & + .icon-confirm + .icon-loading-small { + /* Mimic size set in server for inputs in menu items. */ + min-width: 44px; + max-height: 40px; + margin: 2px 0; + + /* Override padding set in server for icons in menu items. */ + padding: 7px 6px; } } @@ -953,11 +982,14 @@ input[type="password"] { .password-form { position: relative; - .password-confirm { + .password-confirm, + .password-loading { /* Inputs in menu items do not have a right margin, so * it does not need to be compensated. */ right: 0; + } + .password-confirm { /* Needed to override an important rule set in the * server. */ background-color: transparent !important; diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index a36872465..eaea5f6c0 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -75,6 +75,7 @@ 'passwordOption': '.password-option', 'passwordInput': '.password-input', 'passwordConfirm': '.password-confirm', + 'passwordLoading': '.password-loading', 'menu': '.password-menu', }, @@ -273,14 +274,28 @@ var newPassword = this.ui.passwordInput.val().trim(); + this.ui.passwordInput.prop('disabled', true); + this.ui.passwordConfirm.addClass('hidden'); + this.ui.passwordLoading.removeClass('hidden'); + + var restoreState = function() { + this.ui.passwordInput.prop('disabled', false); + this.ui.passwordConfirm.removeClass('hidden'); + this.ui.passwordLoading.addClass('hidden'); + }.bind(this); + this.model.setPassword(newPassword, { + wait: true, success: function() { this.ui.passwordInput.val(''); + restoreState(); OC.hideMenus(); }.bind(this), error: function() { + restoreState(); + OC.Notification.show(t('spreed', 'Error occurred while setting password'), {type: 'error'}); - } + }.bind(this) }); }, diff --git a/js/views/templates.js b/js/views/templates.js index f88adf8c8..88c9cc532 100644 --- a/js/views/templates.js +++ b/js/views/templates.js @@ -73,7 +73,7 @@ templates['callinfoview'] = template({"1":function(container,depth0,helpers,part + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.program(10, data, 0),"data":data})) != null ? stack1 : "") + " password-option\">\n <form class=\"password-form\">\n <input class=\"password-input\" required maxlength=\"200\" type=\"password\"\n placeholder=\"" + container.escapeExpression(((helper = (helper = helpers.passwordInputPlaceholder || (depth0 != null ? depth0.passwordInputPlaceholder : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"passwordInputPlaceholder","hash":{},"data":data}) : helper))) - + "\">\n <input type=\"submit\" value=\"\" autocomplete=\"new-password\" class=\"icon icon-confirm password-confirm\"></input>\n </form>\n </span>\n </li>\n </ul>\n </div>\n </div>\n"; + + "\">\n <input type=\"submit\" value=\"\" autocomplete=\"new-password\" class=\"icon icon-confirm password-confirm\"></input>\n <span class=\"icon icon-loading-small password-loading hidden\"/>\n </form>\n </span>\n </li>\n </ul>\n </div>\n </div>\n"; },"8":function(container,depth0,helpers,partials,data) { return "icon-password"; },"10":function(container,depth0,helpers,partials,data) { diff --git a/js/views/templates/callinfoview.handlebars b/js/views/templates/callinfoview.handlebars index b39c4cd07..8d1600eba 100644 --- a/js/views/templates/callinfoview.handlebars +++ b/js/views/templates/callinfoview.handlebars @@ -26,6 +26,7 @@ <input class="password-input" required maxlength="200" type="password" placeholder="{{passwordInputPlaceholder}}"> <input type="submit" value="" autocomplete="new-password" class="icon icon-confirm password-confirm"></input> + <span class="icon icon-loading-small password-loading hidden"/> </form> </span> </li> |