Merge branch 'develop' into travis/message-states

src/components/views/rooms/AuxPanel.tsx

@@ -17,10 +17,8 @@ limitations under the License.
 import React from 'react';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { Room } from 'matrix-js-sdk/src/models/room'
-import * as sdk from '../../../index';
 import dis from "../../../dispatcher/dispatcher";
 import AppsDrawer from './AppsDrawer';
-import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -36,9 +34,6 @@ interface IProps {
     userId: string,
     showApps: boolean, // Render apps
 
-    // set to true to show the file drop target
-    draggingFile: boolean,
-
     // maxHeight attribute for the aux panel and the video
     // therein
     maxHeight: number,
@@ -149,21 +144,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        let fileDropTarget = null;
-        if (this.props.draggingFile) {
-            fileDropTarget = (
-                <div className="mx_RoomView_fileDropTarget">
-                    <div className="mx_RoomView_fileDropTargetLabel" title={_t("Drop File Here")}>
-                        <TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
-                        <br />
-                        { _t("Drop file here to upload") }
-                    </div>
-                </div>
-            );
-        }
-
         const callView = (
             <CallViewForRoom
                 roomId={this.props.room.roomId}
@@ -246,7 +226,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             <AutoHideScrollbar className={classes} style={style} >
                 { stateViews }
                 { appsDrawer }
-                { fileDropTarget }
                 { callView }
                 { this.props.children }
             </AutoHideScrollbar>

src/components/views/rooms/MemberList.js

@@ -27,6 +27,8 @@ import * as sdk from "../../../index";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -456,6 +458,8 @@ export default class MemberList extends React.Component {
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
                 inviteButtonText = _t("Invite to this community");
+            } else if (room.isSpaceRoom()) {
+                inviteButtonText = _t("Invite to this space");
             }
 
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -483,12 +487,26 @@ export default class MemberList extends React.Component {
                 onSearch={ this.onSearchQueryChanged } />
         );
 
+        let previousPhase = RightPanelPhases.RoomSummary;
+        // We have no previousPhase for when viewing a MemberList from a Space
+        let scopeHeader;
+        if (room?.isSpaceRoom()) {
+            previousPhase = undefined;
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={room} height={32} width={32} />
+                <RoomName room={room} />
+            </div>;
+        }
+
         return <BaseCard
             className="mx_MemberList"
-            header={inviteButton}
+            header={<React.Fragment>
+                { scopeHeader }
+                { inviteButton }
+            </React.Fragment>}
             footer={footer}
             onClose={this.props.onClose}
-            previousPhase={RightPanelPhases.RoomSummary}
+            previousPhase={previousPhase}
         >
             <div className="mx_MemberList_wrapper">
                 <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}

src/components/views/rooms/RoomList.tsx

@@ -47,6 +47,9 @@ import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../con
 import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import CallHandler from "../../../CallHandler";
+import SpaceStore from "../../../stores/SpaceStore";
+import { showAddExistingRooms, showCreateNewRoom } from "../../../utils/space";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -152,6 +155,50 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         defaultHidden: false,
         addRoomLabel: _td("Add room"),
         addRoomContextMenu: (onFinished: () => void) => {
+            if (SpaceStore.instance.activeSpace) {
+                const canAddRooms = SpaceStore.instance.activeSpace.currentState.maySendStateEvent(EventType.SpaceChild,
+                    MatrixClientPeg.get().getUserId());
+
+                return <IconizedContextMenuOptionList first>
+                    <IconizedContextMenuOption
+                        label={_t("Create new room")}
+                        iconClassName="mx_RoomList_iconPlus"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            showCreateNewRoom(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                        }}
+                        disabled={!canAddRooms}
+                        tooltip={canAddRooms ? undefined
+                            : _t("You do not have permissions to create new rooms in this space")}
+                    />
+                    <IconizedContextMenuOption
+                        label={_t("Add existing room")}
+                        iconClassName="mx_RoomList_iconHash"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            showAddExistingRooms(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                        }}
+                        disabled={!canAddRooms}
+                        tooltip={canAddRooms ? undefined
+                            : _t("You do not have permissions to add rooms to this space")}
+                    />
+                    <IconizedContextMenuOption
+                        label={_t("Explore space rooms")}
+                        iconClassName="mx_RoomList_iconExplore"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            defaultDispatcher.fire(Action.ViewRoomDirectory);
+                        }}
+                    />
+                </IconizedContextMenuOptionList>;
+            }
+
             return <IconizedContextMenuOptionList first>
                 <IconizedContextMenuOption
                     label={_t("Create new room")}

src/components/views/rooms/SendMessageComposer.js

@@ -404,7 +404,9 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef.clearUndoHistory();
         this._editorRef.focus();
         this._clearStoredEditorState();
-        dis.dispatch({action: "scroll_to_bottom"});
+        if (SettingsStore.getValue("scrollToBottomOnMessageSent")) {
+            dis.dispatch({action: "scroll_to_bottom"});
+        }
     }
 
     componentWillUnmount() {

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -23,6 +23,8 @@ import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import {isValid3pidInvite} from "../../../RoomInvite";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
 
 export default class ThirdPartyMemberInfo extends React.Component {
     static propTypes = {
@@ -32,14 +34,14 @@ export default class ThirdPartyMemberInfo extends React.Component {
     constructor(props) {
         super(props);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
-        const me = room.getMember(MatrixClientPeg.get().getUserId());
-        const powerLevels = room.currentState.getStateEvents("m.room.power_levels", "");
+        this.room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
+        const me = this.room.getMember(MatrixClientPeg.get().getUserId());
+        const powerLevels = this.room.currentState.getStateEvents("m.room.power_levels", "");
 
         let kickLevel = powerLevels ? powerLevels.getContent().kick : 50;
         if (typeof(kickLevel) !== 'number') kickLevel = 50;
 
-        const sender = room.getMember(this.props.event.getSender());
+        const sender = this.room.getMember(this.props.event.getSender());
 
         this.state = {
             stateKey: this.props.event.getStateKey(),
@@ -119,9 +121,18 @@ export default class ThirdPartyMemberInfo extends React.Component {
             );
         }
 
+        let scopeHeader;
+        if (this.room.isSpaceRoom()) {
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={this.room} height={32} width={32} />
+                <RoomName room={this.room} />
+            </div>;
+        }
+
         // We shamelessly rip off the MemberInfo styles here.
         return (
             <div className="mx_MemberInfo" role="tabpanel">
+                { scopeHeader }
                 <div className="mx_MemberInfo_name">
                     <AccessibleButton className="mx_MemberInfo_cancel"
                         onClick={this.onCancel}