PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

fix spinner layout bouncing when changing notifs

Browse source 
all-important s/done/then/ on pushRulesPromise to ensure that the refresh completes before relaying-out the page
s/Loud/Highlight & sound/
This commit is contained in:
Matthew Hodgson 2016-04-17 14:00:20 +01:00
parent d512e25cca
commit 58c431abc2
2 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/views/settings/Notifications.js
View file

@ -103,6 +103,7 @@ module.exports = React.createClass({
},
onNotifStateButtonClicked: function(event) {
// FIXME: use .bind() rather than className metadata here surely
var vectorRuleId = event.target.className.split("-")[0];
var newPushRuleVectorState = event.target.className.split("-")[1];
@ -410,7 +411,9 @@ module.exports = React.createClass({
_refreshFromServer: function() {
var self = this;
var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).done(function(rulesets) {
var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
//console.log("resolving pushRulesPromise");
/// XXX seriously? wtf is this?
MatrixClientPeg.get().pushRules = rulesets;
@ -501,6 +504,8 @@ module.exports = React.createClass({
var vectorState = ruleDefinition.ruleToVectorState(rule);
//console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);
self.state.vectorPushRules.push({
"vectorRuleId": vectorRuleId,
"description" : ruleDefinition.description,
@ -535,10 +540,11 @@ module.exports = React.createClass({
});
var pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
//console.log("resolving pushersPromise");
self.setState({pushers: resp.pushers});
});
q.all([pushRulesPromise, pushersPromise]).done(function() {
q.all([pushRulesPromise, pushersPromise]).then(function() {
self.setState({
phase: self.phases.DISPLAY
});
@ -546,6 +552,15 @@ module.exports = React.createClass({
self.setState({
phase: self.phases.ERROR
});
}).finally(() => {
// actually explicitly update our state having been deep-manipulating it
self.state({
masterPushRule: self.state.masterPushRule,
vectorContentRules: self.state.vectorContentRules,
vectorPushRules: self.state.vectorPushRules,
externalContentRules: self.state.externalContentRules,
externalPushRules: self.state.externalPushRules,
});
});
},
@ -599,6 +614,7 @@ module.exports = React.createClass({
var rows = [];
for (var i in this.state.vectorPushRules) {
var rule = this.state.vectorPushRules[i];
//console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState);
rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
}
return rows;
@ -607,13 +623,10 @@ module.exports = React.createClass({
render: function() {
var self = this;
var spinner;
if (this.state.phase === this.phases.LOADING) {
var Loader = sdk.getComponent("elements.Spinner");
return (
<div className="mx_UserSettings_notifTable">
<Loader />
</div>
);
spinner = <Loader />;
}
if (this.state.masterPushRule) {
@ -714,6 +727,8 @@ module.exports = React.createClass({
<div className="mx_UserSettings_notifTable">
{ spinner }
<div className="mx_UserNotifSettings_tableRow">
<div className="mx_UserNotifSettings_inputCell">
<input id="enableDesktopNotifications"
@ -756,7 +771,7 @@ module.exports = React.createClass({
<th width="55%"></th>
<th width="15%">Off</th>
<th width="15%">On</th>
<th width="15%">Loud</th>
<th width="15%">Highlight<br/>&amp; sound</th>
</tr>
</thead>
<tbody>

4
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
View file

@ -106,6 +106,10 @@ limitations under the License.
display: table;
}
.mx_UserSettings_notifTable .mx_Spinner {
position: absolute;
}
.mx_UserSettings_profileTable
{
display: table;