Merge branch 'develop' into t3chguy/optional_new_behaviour_roomsublist

src/components/views/elements/PersistedElement.js

@@ -16,28 +16,24 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require('react-dom');
+const PropTypes = require('prop-types');
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
-const ContainerId = "mx_PersistedElement";
-
-function getOrCreateContainer() {
-    let container = document.getElementById(ContainerId);
+function getOrCreateContainer(containerId) {
+    let container = document.getElementById(containerId);
 
     if (!container) {
         container = document.createElement("div");
-        container.id = ContainerId;
+        container.id = containerId;
         document.body.appendChild(container);
     }
 
     return container;
 }
 
-// Greater than that of the ContextualMenu
-const PE_Z_INDEX = 5000;
-
 /*
  * Class of component that renders its children in a separate ReactDOM virtual tree
  * in a container element appended to document.body.
@@ -50,6 +46,14 @@ const PE_Z_INDEX = 5000;
  * bounding rect as the parent of PE.
  */
 export default class PersistedElement extends React.Component {
+
+    static propTypes = {
+        // Unique identifier for this PersistedElement instance
+        // Any PersistedElements with the same persistKey will use
+        // the same DOM container.
+        persistKey: PropTypes.string.isRequired,
+    };
+
     constructor() {
         super();
         this.collectChildContainer = this.collectChildContainer.bind(this);
@@ -97,18 +101,16 @@ export default class PersistedElement extends React.Component {
             left: parentRect.left + 'px',
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
-            zIndex: PE_Z_INDEX,
         });
     }
 
     render() {
-        const content = <div ref={this.collectChild}>
+        const content = <div ref={this.collectChild} style={this.props.style}>
             {this.props.children}
         </div>;
 
-        ReactDOM.render(content, getOrCreateContainer());
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
 
         return <div ref={this.collectChildContainer}></div>;
     }
 }
-

src/components/views/messages/MStickerBody.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 
+import React from 'react';
 import MImageBody from './MImageBody';
 import sdk from '../../../index';
 

src/components/views/rooms/MemberInfo.js

@@ -332,13 +332,40 @@ module.exports = withMatrixClient(React.createClass({
         });
     },
 
-    onMuteToggle: function() {
+    _warnSelfDemote: function() {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        return new Promise((resolve) => {
+            Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
+                title: _t("Demote yourself?"),
+                description:
+                    <div>
+                        { _t("You will not be able to undo this change as you are demoting yourself, " +
+                            "if you are the last privileged user in the room it will be impossible " +
+                            "to regain privileges.") }
+                    </div>,
+                button: _t("Demote"),
+                onFinished: resolve,
+            });
+        });
+    },
+
+    onMuteToggle: async function() {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const roomId = this.props.member.roomId;
         const target = this.props.member.userId;
         const room = this.props.matrixClient.getRoom(roomId);
         if (!room) return;
 
+        // if muting self, warn as it may be irreversible
+        if (target === this.props.matrixClient.getUserId()) {
+            try {
+                if (!(await this._warnSelfDemote())) return;
+            } catch (e) {
+                console.error("Failed to warn about self demotion: ", e);
+                return;
+            }
+        }
+
         const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
         if (!powerLevelEvent) return;
 
@@ -436,7 +463,7 @@ module.exports = withMatrixClient(React.createClass({
         }).done();
     },
 
-    onPowerChange: function(powerLevel) {
+    onPowerChange: async function(powerLevel) {
         const roomId = this.props.member.roomId;
         const target = this.props.member.userId;
         const room = this.props.matrixClient.getRoom(roomId);
@@ -455,20 +482,12 @@ module.exports = withMatrixClient(React.createClass({
 
         // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
         if (myUserId === target) {
-            Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
-                title: _t("Warning!"),
-                description:
-                    <div>
-                        { _t("You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.") }<br />
-                        { _t("Are you sure?") }
-                    </div>,
-                button: _t("Continue"),
-                onFinished: (confirmed) => {
-                    if (confirmed) {
-                        this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                    }
-                },
-            });
+            try {
+                if (!(await this._warnSelfDemote())) return;
+                this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+            } catch (e) {
+                console.error("Failed to warn about self demotion: ", e);
+            }
             return;
         }
 
@@ -478,7 +497,8 @@ module.exports = withMatrixClient(React.createClass({
                 title: _t("Warning!"),
                 description:
                     <div>
-                        { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }<br />
+                        { _t("You will not be able to undo this change as you are promoting the user " +
+                            "to have the same power level as yourself.") }<br />
                         { _t("Are you sure?") }
                     </div>,
                 button: _t("Continue"),

src/components/views/rooms/Stickerpicker.js

@@ -27,6 +27,10 @@ import WidgetUtils from '../../../utils/WidgetUtils';
 
 const widgetType = 'm.stickerpicker';
 
+// We sit in a context menu, so the persisted element container needs to float
+// above it, so it needs a greater z-index than the ContextMenu
+const STICKERPICKER_Z_INDEX = 5000;
+
 export default class Stickerpicker extends React.Component {
     constructor(props) {
         super(props);
@@ -211,7 +215,7 @@ export default class Stickerpicker extends React.Component {
                             width: this.popoverWidth,
                         }}
                     >
-                    <PersistedElement>
+                    <PersistedElement containerId="mx_persisted_stickerPicker" style={{zIndex: STICKERPICKER_Z_INDEX}}>
                         <AppTile
                             collectWidgetMessaging={this._collectWidgetMessaging}
                             id={stickerpickerWidget.id}