Revert recent composer changes (#8840)

* Revert "Prevent new composer from overflowing from non-breakable text (#8829)"

This reverts commit 57dff8131c.

* Revert "Fix scroll jump issue with the composer (#8791)"

This reverts commit 5167521ea4.

* Revert "Fix scroll jump issue with the composer (#8788)"

This reverts commit f568a76dc6.

* Revert "Revert link color change in composer (#8784)"

This reverts commit aedbeb2995.

* Revert "Improve composer visiblity (#8578)"

This reverts commit f14374a51c.

src/components/views/buttons/Cancel.tsx

@@ -1,40 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { ComponentProps } from "react";
-import classnames from "classnames";
-
-import AccessibleButton from "../elements/AccessibleButton";
-import { Icon as CancelIcon } from "../../../../res/img/cancel.svg";
-
-export default function CancelButton(props: ComponentProps<typeof AccessibleButton>) {
-    const classNames = classnames("mx_CancelButton", props.className ?? "");
-    const vars = {
-        "--size": `${props.size}px`,
-    } as React.CSSProperties;
-
-    return <AccessibleButton
-        {...props}
-        className={classNames}
-        style={vars}
-    >
-        <CancelIcon />
-    </AccessibleButton>;
-}
-
-CancelButton.defaultProps = {
-    size: "16",
-};

src/components/views/messages/DisambiguatedProfile.tsx

@@ -28,14 +28,9 @@ interface IProps {
     onClick?(): void;
     colored?: boolean;
     emphasizeDisplayName?: boolean;
-    as?: string;
 }
 
 export default class DisambiguatedProfile extends React.Component<IProps> {
-    public static defaultProps = {
-        as: "div",
-    };
-
     render() {
         const { fallbackName, member, colored, emphasizeDisplayName, onClick } = this.props;
         const rawDisplayName = member?.rawDisplayName || fallbackName;
@@ -62,14 +57,13 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
             [colorClass]: true,
         });
 
-        return React.createElement(this.props.as, {
-            className: "mx_DisambiguatedProfile",
-            onClick,
-        }, <>
-            <span className={displayNameClasses} dir="auto">
-                { rawDisplayName }
-            </span>
-            { mxidElement }
-        </>);
+        return (
+            <div className="mx_DisambiguatedProfile" onClick={onClick}>
+                <span className={displayNameClasses} dir="auto">
+                    { rawDisplayName }
+                </span>
+                { mxidElement }
+            </div>
+        );
     }
 }

src/components/views/messages/SenderProfile.tsx

@@ -27,17 +27,12 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
-    as?: string;
 }
 
 export default class SenderProfile extends React.PureComponent<IProps> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public static defaultProps = {
-        as: "div",
-    };
-
     render() {
         const { mxEvent, onClick } = this.props;
         const msgtype = mxEvent.getContent().msgtype;
@@ -65,7 +60,6 @@ export default class SenderProfile extends React.PureComponent<IProps> {
                         member={member}
                         colored={true}
                         emphasizeDisplayName={true}
-                        as={this.props.as}
                     />
                 );
             } }

src/components/views/rooms/MessageComposer.tsx

@@ -22,7 +22,6 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { EventType } from 'matrix-js-sdk/src/@types/event';
 import { Optional } from "matrix-events-sdk";
 import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
-import { CSSTransition } from 'react-transition-group';
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -52,14 +51,12 @@ import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdat
 import MessageComposerButtons from './MessageComposerButtons';
 import { ButtonEvent } from '../elements/AccessibleButton';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { Icon as InfoIcon } from "../../../../res/img/element-icons/room/room-summary.svg";
 
 let instanceCount = 0;
 
 interface ISendButtonProps {
     onClick: (ev: ButtonEvent) => void;
     title?: string; // defaults to something generic
-    "aria-hidden"?: boolean;
 }
 
 function SendButton(props: ISendButtonProps) {
@@ -68,7 +65,6 @@ function SendButton(props: ISendButtonProps) {
             className="mx_MessageComposer_sendMessage"
             onClick={props.onClick}
             title={props.title ?? _t('Send message')}
-            aria-hidden={props['aria-hidden'] ?? false}
         />
     );
 }
@@ -267,15 +263,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             } else if (replyingToThread) {
                 return _t('Reply to thread…');
             } else if (this.props.e2eStatus) {
-                return _t('Send encrypted reply…');
+                return _t('Send an encrypted reply…');
             } else {
-                return _t('Send reply…');
+                return _t('Send a reply…');
             }
         } else {
             if (this.props.e2eStatus) {
-                return _t('Send encrypted message…');
+                return _t('Send an encrypted message…');
             } else {
-                return _t('Send message…');
+                return _t('Send a message…');
             }
         }
     };
@@ -355,7 +351,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const controls = [];
+        const controls = [
+            this.props.e2eStatus ?
+                <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
+                null,
+        ];
 
         let menuPosition: AboveLeftOf | undefined;
         if (this.ref.current) {
@@ -363,8 +363,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             menuPosition = aboveLeftOf(contentRect);
         }
 
-        const roomReplaced = !!this.context.tombstone;
-
         const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
         if (canSendMessages) {
             controls.push(
@@ -381,23 +379,34 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     toggleStickerPickerOpen={this.toggleStickerPickerOpen}
                 />,
             );
-        } else if (roomReplaced) {
+
+            controls.push(<VoiceRecordComposerTile
+                key="controls_voice_record"
+                ref={this.voiceRecordingButton}
+                room={this.props.room} />);
+        } else if (this.context.tombstone) {
             const replacementRoomId = this.context.tombstone.getContent()['replacement_room'];
 
-            controls.push(<p key="room_replaced">
-                <InfoIcon width={24} />
-                &nbsp;
-                { _t("This room has been replaced and is no longer active.") }
-                &nbsp;
-                { replacementRoomId && (
-                    <a href={makeRoomPermalink(replacementRoomId)}
-                        className="mx_linkButton"
-                        onClick={this.onTombstoneClick}
-                    >
-                        { _t("The conversation continues here.") }
-                    </a>
-                ) }
-            </p>);
+            const continuesLink = replacementRoomId ? (
+                <a href={makeRoomPermalink(replacementRoomId)}
+                    className="mx_MessageComposer_roomReplaced_link"
+                    onClick={this.onTombstoneClick}
+                >
+                    { _t("The conversation continues here.") }
+                </a>
+            ) : '';
+
+            controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
+                <div className="mx_MessageComposer_replaced_valign">
+                    <img className="mx_MessageComposer_roomReplaced_icon"
+                        src={require("../../../../res/img/room_replaced.svg").default}
+                    />
+                    <span className="mx_MessageComposer_roomReplaced_header">
+                        { _t("This room has been replaced and is no longer active.") }
+                    </span><br />
+                    { continuesLink }
+                </div>
+            </div>);
         } else {
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
@@ -432,12 +441,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
 
-        if (this.props.e2eStatus) {
-            controls.push(
-                <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />,
-            );
-        }
-
         const classes = classNames({
             "mx_MessageComposer": true,
             "mx_MessageComposer--compact": this.props.compact,
@@ -451,17 +454,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     <ReplyPreview
                         replyToEvent={this.props.replyToEvent}
                         permalinkCreator={this.props.permalinkCreator} />
-                    <div
-                        className="mx_MessageComposer_row"
-                        aria-disabled={!canSendMessages && !roomReplaced}
-                        data-notice={roomReplaced}>
+                    <div className="mx_MessageComposer_row">
                         { controls }
-                    </div>
-                    <div className="mx_MessageComposer_controls">
-                        { canSendMessages && <VoiceRecordComposerTile
-                            key="controls_voice_record"
-                            ref={this.voiceRecordingButton}
-                            room={this.props.room} /> }
                         { canSendMessages && <MessageComposerButtons
                             addEmoji={this.addEmoji}
                             haveRecording={this.state.haveRecording}
@@ -481,20 +475,13 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                             showStickersButton={this.state.showStickersButton}
                             toggleButtonMenu={this.toggleButtonMenu}
                         /> }
-                        <CSSTransition
-                            in={showSendButton}
-                            classNames="mx_MessageComposer_sendMessageWrapper"
-                            addEndListener={() => {}}
-                        >
-                            <div className='mx_MessageComposer_sendMessageWrapper'>
-                                <SendButton
-                                    key="controls_send"
-                                    onClick={this.sendMessage}
-                                    title={this.state.haveRecording ? _t("Send voice message") : undefined}
-                                    aria-hidden={!showSendButton}
-                                />
-                            </div>
-                        </CSSTransition>
+                        { showSendButton && (
+                            <SendButton
+                                key="controls_send"
+                                onClick={this.sendMessage}
+                                title={this.state.haveRecording ? _t("Send voice message") : undefined}
+                            />
+                        ) }
                     </div>
                 </div>
             </div>

src/components/views/rooms/ReplyPreview.tsx

@@ -22,9 +22,7 @@ import { _t } from '../../../languageHandler';
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import ReplyTile from './ReplyTile';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
-import SenderProfile from '../messages/SenderProfile';
-import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg";
-import CancelButton from '../buttons/Cancel';
+import AccessibleButton from "../elements/AccessibleButton";
 
 function cancelQuoting(context: TimelineRenderingType) {
     dis.dispatch({
@@ -46,19 +44,19 @@ export default class ReplyPreview extends React.Component<IProps> {
         if (!this.props.replyToEvent) return null;
 
         return <div className="mx_ReplyPreview">
-            <div className="mx_ReplyPreview_header">
-                <ReplyIcon />
-                { _t('Reply to <User />', {}, {
-                    'User': () => <SenderProfile mxEvent={this.props.replyToEvent} as="span" />,
-                }) } &nbsp;
-
-                <CancelButton onClick={() => cancelQuoting(this.context.timelineRenderingType)} />
+            <div className="mx_ReplyPreview_section">
+                <div className="mx_ReplyPreview_header">
+                    <span>{ _t('Replying') }</span>
+                    <AccessibleButton
+                        className="mx_ReplyPreview_header_cancel"
+                        onClick={() => cancelQuoting(this.context.timelineRenderingType)}
+                    />
+                </div>
+                <ReplyTile
+                    mxEvent={this.props.replyToEvent}
+                    permalinkCreator={this.props.permalinkCreator}
+                />
             </div>
-            <ReplyTile
-                mxEvent={this.props.replyToEvent}
-                permalinkCreator={this.props.permalinkCreator}
-                showSenderProfile={false}
-            />
         </div>;
     }
 }

src/components/views/rooms/ReplyTile.tsx

@@ -44,7 +44,6 @@ interface IProps {
     getRelationsForEvent?: (
         (eventId: string, relationType: string, eventType: string) => Relations
     );
-    showSenderProfile?: boolean;
 }
 
 export default class ReplyTile extends React.PureComponent<IProps> {
@@ -52,7 +51,6 @@ export default class ReplyTile extends React.PureComponent<IProps> {
 
     static defaultProps = {
         onHeightChanged: () => {},
-        showSenderProfile: true,
     };
 
     componentDidMount() {
@@ -138,8 +136,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
 
         let sender;
         const needsSenderProfile = (
-            this.props.showSenderProfile
-            && !isInfoMessage
+            !isInfoMessage
             && msgType !== MsgType.Image
             && evType !== EventType.Sticker
             && evType !== EventType.RoomCreate

src/i18n/strings/en_EN.json

@@ -1700,12 +1700,12 @@
     "Send message": "Send message",
     "Reply to encrypted thread…": "Reply to encrypted thread…",
     "Reply to thread…": "Reply to thread…",
-    "Send encrypted reply…": "Send encrypted reply…",
-    "Send reply…": "Send reply…",
-    "Send encrypted message…": "Send encrypted message…",
-    "Send message…": "Send message…",
-    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
+    "Send an encrypted reply…": "Send an encrypted reply…",
+    "Send a reply…": "Send a reply…",
+    "Send an encrypted message…": "Send an encrypted message…",
+    "Send a message…": "Send a message…",
     "The conversation continues here.": "The conversation continues here.",
+    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "You do not have permission to post to this room": "You do not have permission to post to this room",
     "%(seconds)ss left": "%(seconds)ss left",
     "Send voice message": "Send voice message",
@@ -1758,7 +1758,7 @@
     "Seen by %(count)s people|one": "Seen by %(count)s person",
     "Read receipts": "Read receipts",
     "Recently viewed": "Recently viewed",
-    "Reply to <User />": "Reply to <User />",
+    "Replying": "Replying",
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",