diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-08-21 02:02:40 +0300 |
|---|---|---|
| committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-08-27 18:29:51 +0300 |
| commit | f56122ae787f433f94eaea60a5a8277c6b0089be (patch) | |
| tree | 25bdd0b9326667db7bc12a10e5b2a6ce696d9bd1 | |
| parent | 0c377377fa5b9110ea1e2cedb98cba333313980e (diff) | |
Wait for the server response to set the room as public or private
Until now the model was updated as soon as the checkbox was modified,
which triggered a change event that in turn caused the UI to be updated.
However, if the room could not be successfully set as public or private
nothing was done and the model as well as the UI were kept with the
wrong state (at least, until the model is fetched again). To prevent
this now the model waits for a successful server response to update the
attributes; in case of failure only the checkbox needs to be restored,
as it is the only UI element that changed due to the direct interaction
of the user (in case of success the whole view will be rendered again
due to the room type change, so no need to do anything explicitly in
that case).
As the model is not changed until the successful server response is
received now the checkbox is replaced by a working icon while waiting
for the answer. In a similar way the checkbox is also disabled to
prevent further requests while the previous one is ongoing.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
| -rw-r--r-- | css/style.scss | 12 | ||||
| -rw-r--r-- | js/views/callinfoview.js | 19 |
2 files changed, 30 insertions, 1 deletions
diff --git a/css/style.scss b/css/style.scss index 70a16bd13..c816e1cf3 100644 --- a/css/style.scss +++ b/css/style.scss @@ -913,6 +913,18 @@ input[type="password"] { .link-checkbox-label { white-space: nowrap; padding: 12px; + + /* If ".icon-loading-small" is set hide the checkbox and show a + * loading icon instead */ + &.icon-loading-small:before { + background-image: none !important; + background-color: transparent !important; + border-color: transparent !important; + } + &.icon-loading-small:after { + top: 21px; + left: 23px; + } } .button { cursor: pointer; diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 30b4bf57c..a36872465 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -65,6 +65,7 @@ 'shareLinkOptions': '.share-link-options', 'clipboardButton': '.clipboard-button', 'linkCheckbox': '.link-checkbox', + 'linkCheckboxLabel': '.link-checkbox-label', 'callButton': 'div.call-button', @@ -245,7 +246,23 @@ toggleLinkCheckbox: function() { var isPublic = this.ui.linkCheckbox.prop('checked'); - this.model.setPublic(isPublic); + this.ui.linkCheckbox.prop('disabled', true); + this.ui.linkCheckboxLabel.addClass('icon-loading-small'); + + this.model.setPublic(isPublic, { + wait: true, + error: function() { + this.ui.linkCheckbox.prop('checked', !isPublic); + this.ui.linkCheckbox.prop('disabled', false); + this.ui.linkCheckboxLabel.removeClass('icon-loading-small'); + + if (isPublic) { + OC.Notification.show(t('spreed', 'Error occurred while making the room public'), {type: 'error'}); + } else { + OC.Notification.show(t('spreed', 'Error occurred while making the room private'), {type: 'error'}); + } + }.bind(this) + }); }, /** |