Merge branch 'develop' into travis/skinning/pt3-easy-comps

Author: turt2live

res/css/structures/_SpaceRoomDirectory.scss

@@ -203,8 +203,9 @@ limitations under the License.
         .mx_SpaceRoomDirectory_actions {
             width: 180px;
             text-align: right;
-            height: min-content;
-            margin: auto 0 auto 28px;
+            margin-left: 28px;
+            display: inline-flex;
+            align-items: center;
 
             .mx_AccessibleButton {
                 vertical-align: middle;
@@ -223,9 +224,5 @@ limitations under the License.
             line-height: $font-15px;
             color: $secondary-fg-color;
         }
-
-        .mx_Checkbox {
-            display: inline-block;
-        }
     }
 }

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
-.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
+.mx_DecoratedRoomAvatar, .mx_ExtraTile {
     position: relative;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {

src/RoomInvite.js

@@ -22,7 +22,7 @@ import MultiInviter from './utils/MultiInviter';
 import Modal from './Modal';
 import * as sdk from './';
 import { _t } from './languageHandler';
-import InviteDialog, {KIND_DM, KIND_INVITE, KIND_SPACE_INVITE} from "./components/views/dialogs/InviteDialog";
+import InviteDialog, {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
 import {CommunityPrototypeStore} from "./stores/CommunityPrototypeStore";
 
@@ -50,11 +50,10 @@ export function showStartChatInviteDialog(initialText) {
 }
 
 export function showRoomInviteDialog(roomId) {
-    const isSpace = MatrixClientPeg.get()?.getRoom(roomId)?.isSpaceRoom();
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createTrackedDialog(
-        "Invite Users", isSpace ? "Space" : "Room", InviteDialog, {
-            kind: isSpace ? KIND_SPACE_INVITE : KIND_INVITE,
+        "Invite Users", "", InviteDialog, {
+            kind: KIND_INVITE,
             roomId,
         },
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,

src/VoipUserMapper.ts

@@ -37,7 +37,7 @@ export default class VoipUserMapper {
         return results[0].userid;
     }
 
-    public async getOrCreateVirtualRoomForRoom(roomId: string):Promise<string> {
+    public async getOrCreateVirtualRoomForRoom(roomId: string): Promise<string> {
         const userId = DMRoomMap.shared().getUserIdForRoomId(roomId);
         if (!userId) return null;
 
@@ -52,15 +52,15 @@ export default class VoipUserMapper {
         return virtualRoomId;
     }
 
-    public nativeRoomForVirtualRoom(roomId: string):string {
+    public nativeRoomForVirtualRoom(roomId: string): string {
         const virtualRoom = MatrixClientPeg.get().getRoom(roomId);
         if (!virtualRoom) return null;
         const virtualRoomEvent = virtualRoom.getAccountData(VIRTUAL_ROOM_EVENT_TYPE);
         if (!virtualRoomEvent || !virtualRoomEvent.getContent()) return null;
         return virtualRoomEvent.getContent()['native_room'] || null;
     }
 
-    public isVirtualRoom(room: Room):boolean {
+    public isVirtualRoom(room: Room): boolean {
         if (this.nativeRoomForVirtualRoom(room.roomId)) return true;
 
         if (this.virtualRoomIdCache.has(room.roomId)) return true;
@@ -79,6 +79,8 @@ export default class VoipUserMapper {
     }
 
     public async onNewInvitedRoom(invitedRoom: Room) {
+        if (!CallHandler.sharedInstance().getSupportsVirtualRooms()) return;
+
         const inviterId = invitedRoom.getDMInviter();
         console.log(`Checking virtual-ness of room ID ${invitedRoom.roomId}, invited by ${inviterId}`);
         const result = await CallHandler.sharedInstance().sipNativeLookup(inviterId);

src/components/structures/MessagePanel.js

@@ -500,6 +500,9 @@ export default class MessagePanel extends React.Component {
 
         let prevEvent = null; // the last event we showed
 
+        // Note: the EventTile might still render a "sent/sending receipt" independent of
+        // this information. When not providing read receipt information, the tile is likely
+        // to assume that sent receipts are to be shown more often.
         this._readReceiptsByEvent = {};
         if (this.props.showReadReceipts) {
             this._readReceiptsByEvent = this._getReadReceiptsByShownEvent();
@@ -536,10 +539,17 @@ export default class MessagePanel extends React.Component {
                     const nextEvent = i < this.props.events.length - 1
                         ? this.props.events[i + 1]
                         : null;
+
+                    // The next event with tile is used to to determine the 'last successful' flag
+                    // when rendering the tile. The shouldShowEvent function is pretty quick at what
+                    // it does, so this should have no significant cost even when a room is used for
+                    // not-chat purposes.
+                    const nextTile = this.props.events.slice(i + 1).find(e => this._shouldShowEvent(e));
+
                     // make sure we unpack the array returned by _getTilesForEvent,
                     // otherwise react will auto-generate keys and we will end up
                     // replacing all of the DOM elements every time we paginate.
-                    ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, nextEvent));
+                    ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, nextEvent, nextTile));
                     prevEvent = mxEv;
                 }
 
@@ -555,7 +565,7 @@ export default class MessagePanel extends React.Component {
         return ret;
     }
 
-    _getTilesForEvent(prevEvent, mxEv, last, nextEvent) {
+    _getTilesForEvent(prevEvent, mxEv, last, nextEvent, nextEventWithTile) {
         const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
@@ -600,12 +610,23 @@ export default class MessagePanel extends React.Component {
         let isLastSuccessful = false;
         const isSentState = s => !s || s === 'sent';
         const isSent = isSentState(mxEv.getAssociatedStatus());
-        if (!nextEvent && isSent) {
+        const hasNextEvent = nextEvent && this._shouldShowEvent(nextEvent);
+        if (!hasNextEvent && isSent) {
             isLastSuccessful = true;
-        } else if (nextEvent && isSent && !isSentState(nextEvent.getAssociatedStatus())) {
+        } else if (hasNextEvent && isSent && !isSentState(nextEvent.getAssociatedStatus())) {
             isLastSuccessful = true;
         }
 
+        // This is a bit nuanced, but if our next event is hidden but a future event is not
+        // hidden then we're not the last successful.
+        if (
+            nextEventWithTile &&
+            nextEventWithTile !== nextEvent &&
+            isSentState(nextEventWithTile.getAssociatedStatus())
+        ) {
+            isLastSuccessful = false;
+        }
+
         // We only want to consider "last successful" if the event is sent by us, otherwise of course
         // it's successful: we received it.
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();

src/components/structures/SpaceRoomDirectory.tsx

@@ -64,6 +64,7 @@ export interface ISpaceSummaryEvent {
     state_key: string;
     content: {
         order?: string;
+        suggested?: boolean;
         auto_join?: boolean;
         via?: string;
     };
@@ -91,7 +92,7 @@ const SubSpace: React.FC<ISubspaceProps> = ({
     const name = space.name || space.canonical_alias || space.aliases?.[0] || _t("Unnamed Space");
 
     const evContent = event?.getContent();
-    const [autoJoin, _setAutoJoin] = useState(evContent?.auto_join);
+    const [suggested, _setSuggested] = useState(evContent?.suggested);
     const [removed, _setRemoved] = useState(!evContent?.via);
 
     const cli = MatrixClientPeg.get();
@@ -102,12 +103,12 @@ const SubSpace: React.FC<ISubspaceProps> = ({
     let actions;
     if (editing && queueAction) {
         if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
-            const setAutoJoin = () => {
-                _setAutoJoin(v => {
+            const setSuggested = () => {
+                _setSuggested(v => {
                     queueAction({
                         event,
                         removed,
-                        autoJoin: !v,
+                        suggested: !v,
                     });
                     return !v;
                 });
@@ -118,7 +119,7 @@ const SubSpace: React.FC<ISubspaceProps> = ({
                     queueAction({
                         event,
                         removed: !v,
-                        autoJoin,
+                        suggested,
                     });
                     return !v;
                 });
@@ -131,7 +132,7 @@ const SubSpace: React.FC<ISubspaceProps> = ({
             } else {
                 actions = <React.Fragment>
                     <FormButton kind="danger" onClick={setRemoved} label={_t("Remove from Space")} />
-                    <StyledCheckbox checked={autoJoin} onChange={setAutoJoin} />
+                    <StyledCheckbox checked={suggested} onChange={setSuggested} />
                 </React.Fragment>;
             }
         } else {
@@ -182,8 +183,8 @@ const SubSpace: React.FC<ISubspaceProps> = ({
 
 interface IAction {
     event: MatrixEvent;
+    suggested: boolean;
     removed: boolean;
-    autoJoin: boolean;
 }
 
 interface IRoomTileProps {
@@ -199,7 +200,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
     const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Unnamed Room");
 
     const evContent = event?.getContent();
-    const [autoJoin, _setAutoJoin] = useState(evContent?.auto_join);
+    const [suggested, _setSuggested] = useState(evContent?.suggested);
     const [removed, _setRemoved] = useState(!evContent?.via);
 
     const cli = MatrixClientPeg.get();
@@ -209,12 +210,12 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
     let actions;
     if (editing && queueAction) {
         if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
-            const setAutoJoin = () => {
-                _setAutoJoin(v => {
+            const setSuggested = () => {
+                _setSuggested(v => {
                     queueAction({
                         event,
                         removed,
-                        autoJoin: !v,
+                        suggested: !v,
                     });
                     return !v;
                 });
@@ -225,7 +226,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
                     queueAction({
                         event,
                         removed: !v,
-                        autoJoin,
+                        suggested,
                     });
                     return !v;
                 });
@@ -238,7 +239,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
             } else {
                 actions = <React.Fragment>
                     <FormButton kind="danger" onClick={setRemoved} label={_t("Remove from Space")} />
-                    <StyledCheckbox checked={autoJoin} onChange={setAutoJoin} />
+                    <StyledCheckbox checked={suggested} onChange={setSuggested} />
                 </React.Fragment>;
             }
         } else {
@@ -445,10 +446,10 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
 
         const onSaveButtonClicked = () => {
             // TODO setBusy
-            pendingActions.current.forEach(({event, autoJoin, removed}) => {
+            pendingActions.current.forEach(({event, suggested, removed}) => {
                 const content = {
                     ...event.getContent(),
-                    auto_join: autoJoin,
+                    suggested,
                 };
 
                 if (removed) {
@@ -463,7 +464,7 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
         if (isEditing) {
             adminButton = <React.Fragment>
                 <FormButton label={_t("Save changes")} onClick={onSaveButtonClicked} />
-                <span>{ _t("All users join by default") }</span>
+                <span>{ _t("Promoted to users") }</span>
             </React.Fragment>;
         } else {
             adminButton = <FormButton label={_t("Manage rooms")} onClick={onManageButtonClicked} />;

src/components/structures/SpaceRoomView.tsx

@@ -557,7 +557,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
             case Phase.PublicCreateRooms:
                 return <SpaceSetupFirstRooms
                     space={this.props.space}
-                    title={_t("What discussions do you want to have?")}
+                    title={_t("What are some things you want to discuss?")}
                     description={_t("We'll create rooms for each topic.")}
                     onFinished={() => this.setState({ phase: Phase.PublicShare })}
                 />;

src/components/views/dialogs/InfoDialog.js

@@ -27,7 +27,7 @@ export default class InfoDialog extends React.Component {
         className: PropTypes.string,
         title: PropTypes.string,
         description: PropTypes.node,
-        button: PropTypes.oneOfType(PropTypes.string, PropTypes.bool),
+        button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
         onKeyDown: PropTypes.func,

src/components/views/dialogs/InviteDialog.tsx

@@ -49,7 +49,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
-export const KIND_SPACE_INVITE = "space_invite";
 export const KIND_CALL_TRANSFER = "call_transfer";
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -311,7 +310,7 @@ interface IInviteDialogProps {
     // not provided.
     kind: string,
 
-    // The room ID this dialog is for. Only required for KIND_INVITE and KIND_SPACE_INVITE.
+    // The room ID this dialog is for. Only required for KIND_INVITE.
     roomId: string,
 
     // The call to transfer. Only required for KIND_CALL_TRANSFER.
@@ -351,8 +350,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     constructor(props) {
         super(props);
 
-        if ((props.kind === KIND_INVITE || props.kind === KIND_SPACE_INVITE) && !props.roomId) {
-            throw new Error("When using KIND_INVITE or KIND_SPACE_INVITE a roomId is required for an InviteDialog");
+        if ((props.kind === KIND_INVITE) && !props.roomId) {
+            throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
         } else if (props.kind === KIND_CALL_TRANSFER && !props.call) {
             throw new Error("When using KIND_CALL_TRANSFER a call is required for an InviteDialog");
         }
@@ -1029,7 +1028,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             sectionSubname = _t("May include members not in %(communityName)s", {communityName});
         }
 
-        if (this.props.kind === KIND_INVITE || this.props.kind === KIND_SPACE_INVITE) {
+        if (this.props.kind === KIND_INVITE) {
             sectionName = kind === 'recents' ? _t("Recently Direct Messaged") : _t("Suggestions");
         }
 
@@ -1250,25 +1249,31 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             }
             buttonText = _t("Go");
             goButtonFn = this._startDm;
-        } else if (this.props.kind === KIND_INVITE || this.props.kind === KIND_SPACE_INVITE) {
-            title = this.props.kind === KIND_INVITE ? _t("Invite to this room") : _t("Invite to this space");
+        } else if (this.props.kind === KIND_INVITE) {
+            const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
+            const isSpace = room?.isSpaceRoom();
+            title = isSpace
+                ? _t("Invite to %(spaceName)s", {
+                    spaceName: room.name || _t("Unnamed Space"),
+                })
+                : _t("Invite to this room");
 
             let helpTextUntranslated;
-            if (this.props.kind === KIND_INVITE) {
+            if (isSpace) {
                 if (identityServersEnabled) {
                     helpTextUntranslated = _td("Invite someone using their name, email address, username " +
-                        "(like <userId/>) or <a>share this room</a>.");
+                        "(like <userId/>) or <a>share this space</a>.");
                 } else {
                     helpTextUntranslated = _td("Invite someone using their name, username " +
-                        "(like <userId/>) or <a>share this room</a>.");
+                        "(like <userId/>) or <a>share this space</a>.");
                 }
-            } else { // KIND_SPACE_INVITE
+            } else {
                 if (identityServersEnabled) {
                     helpTextUntranslated = _td("Invite someone using their name, email address, username " +
-                        "(like <userId/>) or <a>share this space</a>.");
+                        "(like <userId/>) or <a>share this room</a>.");
                 } else {
                     helpTextUntranslated = _td("Invite someone using their name, username " +
-                        "(like <userId/>) or <a>share this space</a>.");
+                        "(like <userId/>) or <a>share this room</a>.");
                 }
             }